Question

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

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'而不是实际的标签名称，以及为不同的html标签交换span标签，但结果仍然相同。

我试图搜索此问题，但是没有任何运气找到其他人在模板文字方面遇到此问题。

Answer 1

这正是Array.join（）默认工作的方式（在隐式字符串化数组时调用），在数组条目之间添加一个逗号 - 这是map（）返回的 - ＆gt;数组。您可以通过自己调用它来轻松删除它，将空字符串作为参数传递给join（）

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

请注意，您还需要从地图返回...

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

1 个答案: