如何移除模板字符串末尾的逗号？附问题复现代码

嘿，我明白你碰到的麻烦了！你现在看到的元素末尾的逗号，其实不是来自每个字符串本身，而是因为数组在模板字符串中会被自动转换为字符串，元素之间默认用逗号分隔。你当前的代码里，map方法返回的是一个包含三个字符串的数组，直接放到模板里的话，JavaScript会自动把数组转成用逗号连接的字符串——你的replace(",", "")其实没起作用，因为逗号根本不在单个的内容里。

解决方案：用join('')拼接数组元素 #

只需要在map之后调用join('')，把数组里的所有字符串拼接成一个完整的字符串（不带任何分隔符），就能彻底去掉那些讨厌的逗号了。修改后的代码如下：

const HTML = `<select> ${[1, 2, 3].map(e => `<option>${e}</option>`).join('')} </select>`;
console.log(HTML);

如果想让生成的HTML结构更美观（每个单独一行），也可以在join里传入换行符：

const HTML = `<select> 
${[1, 2, 3].map(e => `  <option>${e}</option>`).join('\n')} 
</select>`;
console.log(HTML);

这样生成的HTML既没有多余的逗号，结构也更清晰易读。

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