如何用JavaScript模板字面量插入数组元素到HTML？解决forEach返回undefined问题

嘿，我碰到过这个问题很多次了！你遇到的问题核心在于forEach的特性——它没有返回值，默认会返回undefined，所以当你在模板字符串里直接用它的时候，最终插入的就是undefined，而不是你想要的<li>元素列表。

解决方案：用map() + join('')替代forEach #

map()方法会遍历数组并返回一个新数组，每个元素对应你在回调函数里生成的<li>字符串。之后用join('')把数组里的所有字符串拼接成一个完整的HTML片段，这样就能正确插入到模板字符串中了。

修改后的JavaScript代码：

const myArray = ['square', 'triangle', 'circle'];
document.querySelector('div').innerHTML = `
  <p>Some shapes:</p>
  <ul>
    ${myArray.map(elmt => `
      <li>${elmt}</li>
    `).join('')}
  </ul>
`;

对应的HTML代码保持不变：

<div></div>

可选方案：使用reduce() #

如果你偏好reduce的写法，也可以用它来累加生成HTML字符串：

const myArray = ['square', 'triangle', 'circle'];
document.querySelector('div').innerHTML = `
  <p>Some shapes:</p>
  <ul>
    ${myArray.reduce((html, elmt) => html + `<li>${elmt}</li>`, '')}
  </ul>
`;

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