JS - 模板文字意外，

Question

所以我只是对模板文字进行了一些实验，我的 html 输出中似乎出现了意想不到的 ,。任何人都可以向我解释为什么这些 , 在我使用 map 时显示？

 this.highscore = [
        {
            "username" : "Thor",
            "highScore": 1002023
        },
        {
            "username" : "Hulk",
            "highScore": 1037465
        },
        {
            "username" : "Superman",
            "highScore": 5948393
        },
        {
            "username" : "Spiderman",
            "highScore": 5949384
        }
    ]

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

render() {
    this.innerHTML = this.template()
}

输入 HTML

Username: Thor 
1002023

, /* <----- where does this sucker come from? */
Username: Hulk 
1037465

,
Username: Superman 
5948393

,
Username: Spiderman 
5949384

只是奖金

从 T.J 解释为什么会发生这种情况。 Crowder 是正确的，他建议我应该使用 join 并且为了它的乐趣我用自定义函数标记模板来处理它，将它留在这里咯咯笑：

function removeYaOldBugger(strings, personExp, ageExp) {
 return personExp.join("")
} 

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

Answer 1

因为map returns一个数组，然后${...}强制转换为字符串，其中使用Array#join，默认使用,作为元素之间的分隔符。您可以通过在 map 调用的末尾添加 .join("") 来修复它：

return `high score: ${this.highscore.map(user => `<p>Username: ${user.username} <br> ${user.highScore}</p>`).join("")}`
// >>-------------------------------------------------------------------------------------------------------^^^^^^^^^

JS - 模板文字意外，

JS - Template literals unexpected ,

javascript

template-literals