模板文字中的数组映射在项目之间呈现额外的逗号

Question

在以下示例中，我尝试呈现帖子列表（标题、body 及其标签）：

const container = $('.container');
posts.forEach((post)=> {
 container.append(
`<div>
  <h2>${post.title}</h2>
  <p>${post.body}</p>
  <div>
   ${post.tags.map((tag) => {
     `<span>${tag.name}</span>`
   })}
  </div> 
 </div>`)
});

然而，输出在标签之间呈现了一个额外的逗号。我试图输出 'test' 而不是实际的标签名称，并将 span 标签换成不同的 html 标签，但结果仍然相同。

我曾尝试搜索此问题，但没能找到其他人遇到此模板文字问题。

Answer 1

这正是 Array.join() 默认情况下的工作方式（在对数组进行隐式字符串化时调用），在数组条目之间添加逗号 - 这就是 map() 编辑的 return -> 一个数组。您可以通过自己调用它轻松摆脱它，将空字符串作为参数传递给 join()

${post.tags.map((tag) => `<span>${tag.name}</span>`).join('')}

请注意，您也需要从地图 return...

模板文字中的数组映射在项目之间呈现额外的逗号

Array map in template literal renders an extra comma between items

javascript

ecmascript-6

template-literals