如何从对象数组提取属性拼接为无前置逗号的逗号分隔值，能否在HTML直接实现

你的逻辑初始值finalName为空字符串，第一次forEach遍历执行拼接时，会生成,第一个元素名称的格式，最终返回的结果自然会在开头多出多余逗号。

更简洁且不会出现多余分隔符的写法是直接用数组的map+join方法，join会自动把数组元素用指定分隔符拼接，不会在首尾额外生成多余字符：

getSeperatedByCommaName(): string {
  return this.options.Ids.map(value => value.Name).join(',');
}

绝大多数前端场景下都可以直接在模板中完成拼接，不需要单独封装函数：

• Vue 模板写法：{{ options.Ids.map(item => item.Name).join(',') }}
• Angular 模板写法：{{ options.Ids.map(item => item.Name).join(',') }}
• React JSX 写法：{options.Ids.map(item => item.Name).join(',')}

如果是原生JS渲染，也可以直接把拼接后的字符串插入到对应DOM节点中即可。

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