我正在使用模板字面量进行测试,但是在输出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>`)}`
}