在模板字面量中插值经map处理的数组时为何会出现逗号？

嘿，这是个很常见的小坑！我来给你拆解一下原因和解决办法：

问题根源 #

当你在模板字面量里直接插入map()返回的数组时，JavaScript会自动把这个数组转换成字符串——而数组的toString()方法默认会用逗号来分隔每个元素。所以你的map返回的是一个包含多个<p>字符串片段的数组，模板字面量把它转成字符串时，就会在每个片段之间自动加上逗号。

举个极简例子就能直观看到这个现象：

const arr = ['<p>foo</p>', '<p>bar</p>'];
console.log(`${arr}`); // 输出 "<p>foo</p>,<p>bar</p>"

解决办法 #

只需要在map()后面链式调用join('')，把数组里的所有字符串片段拼接成一个没有分隔符的完整字符串就行：

template() {
  return `high score: ${this.highscore.map(user => `<p>Username: ${user.username} <br> HighScore: ${user.highScore}</p>`).join('')}`;
}

这样一来，map生成的每个<p>元素就会直接首尾相连，不会再有讨厌的逗号干扰HTML结构啦！

内容的提问来源于stack exchange，提问作者Björn Hjorth