拼接逗号分隔字符串时如何忽略初始undefined值且不使用字符串数组

以下两种实现方式均不依赖字符串数组，可直接规避初始undefined值拼接的问题： #

方法1：三元运算符适配初始值 #

在拼接时先判断已有标签是否为有效值，存在值时才拼接逗号和新标签，不存在则直接使用新标签：

addTag(tag: any){
  this.tags = `${this.asunto.etiquetas ? this.asunto.etiquetas + ', ' : ''}${tag}`;
  (<HTMLInputElement>document.getElementById("tags")).value = '';
}

方法2：短路逻辑简化写法 #

用短路判断分支处理两种场景，写法更简洁：

addTag(tag: any){
  this.tags = this.asunto.etiquetas ? `${this.asunto.etiquetas}, ${tag}` : tag;
  (<HTMLInputElement>document.getElementById("tags")).value = '';
}

额外优化建议 #

• 若需要兼容this.asunto.etiquetas可能为空字符串的场景，可把判断条件修改为this.asunto.etiquetas?.trim()，避免空值时拼接多余逗号
• Angular环境不推荐直接用document.getElementById操作DOM，建议使用@ViewChild绑定输入框元素，符合Angular框架最佳实践

内容的提问来源于stack exchange，提问作者Aetos2501