如何在JS模板字面量中将对象内字符串数组元素渲染为span标签

开发者阿泽

2026-10-7

实现方案

核心思路是通过数组的map方法遍历captionTags生成单个<span>的字符串集合，再用join('')拼接为完整HTML字符串嵌入模板即可，修改后的代码如下：

let items = [{
  "id": 1,
  "name": "item 1",
  "captionTags": ["Stills", "Animation", "Virtual Reality"]
}, {
  "id": 2,
  "name": "item 2",
  "captionTags": ["Configurator", "Animation", "Application"]
}, {
  "id": 3,
  "name": "item 3",
  "captionTags": ["Stills", "Configurator"]
}];

function displayItems() {
  let itemsContainer = document.querySelector('.items-container');
  itemsContainer.innerHTML = '';
  items.forEach(item => {
    itemsContainer.innerHTML += `
        <div class="items-wrapper">
        <div class="item-caption">
            <span class="item-caption-col">
                <h3>${item.name}</h3>
                <span class="item-caption-tags">
                  ${item.captionTags.map(tag => `<span class="tag-item">${tag}</span>`).join('')}
                </span>
            </span>
        </div>
    </div>`
  });
};
displayItems();