如何将forEach遍历数组的结果通过模板字符串插入HTML？

forEach只是遍历数组，不会返回新值，没法直接生成HTML片段。你可以换成map方法，它会返回一个新数组，刚好用来生成每个分类对应的<span>元素，最后把数组拼接成字符串就能插入模板里了。

修改后的代码如下：

const postCategories = arr[index].category;
// 用map生成每个分类的span字符串，再拼接成一个整体
const categorySpans = postCategories.map(category => {
  return `<span>${category.name}</span>`;
}).join(''); // 把数组转成无分隔符的字符串

// 把拼接好的分类span插入模板
const article = `<article class="news">
<div class="news-taxonomy">
      ${categorySpans}
</div>
</article>`;

// 最后把生成的article添加到页面（比如添加到某个容器里）
document.querySelector('.some-container').innerHTML = article;

关键点说明 #

• map遍历每个分类，返回包含分类名称的<span>字符串，形成一个数组
• join('')把数组里的所有字符串合并成一个，这样多个分类就会变成连续的span元素
• 模板字符串里用${categorySpans}直接插入生成的内容

如果需要给分类span加样式，直接在map里的span标签加class就行，比如：

return `<span class="category-tag">${category.name}</span>`;

内容的提问来源于stack exchange，提问作者natal