如何简化这个 JavaScript/Angular 代码？答案

【问题标题】：How to simplify this JavaScript/Angular code?如何简化这个 JavaScript/Angular 代码？
【发布时间】：2019-09-10 20:56:41
【问题描述】：

aria-describedby 需要在多个 ID 之间有一个空格。 aria-describedby 不需要时需要从<div> 属性中取出。

我试过了，效果很好，但我的主管不高兴；他希望我使用数组来简化它，我不知道从哪里开始：

var describedByText = [this.error ? this.errorId : '', this.help ? this.helpId : '' ];
var describedBy = describedByText.join(" ");

然后在 HTML <div> 中，我有这个：

aria-describedby=“${ifDefined(describedBy ? describedBy : undefined)}”

有多个ID时的结果是：

<div aria-describedby="FormId1 FormId2"></div>

不需要aria-describedby：

<div aria-describedby=" "></div> <!-- which should be <div></div> -->

【问题讨论】：

标签： javascript html arrays angular ternary

【解决方案1】：

即使没有设置this.errorId 或this.helpId 之一，您仍然总是向数组添加两个元素。 Array.prototype.join 并不关心这些元素实际上是什么，而是简单地将它们连接起来并在它们之间放置一个空格。

因此你最终得到describedBy === ' '。

要解决此问题，请仅在必须时向数组添加元素：

var describedByText = [];

if (this.errorId) {
    describedByText.push(this.errorId);
}

if (this.helpId) {
    describedByText.push(this.helpId);
}

var describedBy = describedByText.join(" ");

【讨论】：

【解决方案2】：

关于将aria-describedby 移出div，您可以执行以下操作：

<div [attr.aria-describedby]="describedBy || null"></div>

为您的 ARIA 属性使用属性绑定，并根据 describedBy 值设置它的值。如果describedBy 是空字符串，则将属性值设置为null - 这将从DOM 中删除该属性。

【讨论】：