javascript - 用于将迭代值(例如数组元素)插入 HTML 的简单 JavaScript 模板文字

Question

我想使用模板文字(即反引号)将数组中的元素插入到 HTML 中。本质上，我想创建自己的极其简单的模板系统。

我希望 forEach 能够工作，每个迭代回调只插入返回的文本。但是，它只返回 undefined，例如:

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

<div></div>

那么，我该怎么做呢？

Answer 1

使用myArray.map(...).join('')而不是myArray.forEach(...)。

在模板文字中，占位符内的代码结果(即 ${...} 内)在插入之前被强制转换为字符串。 forEach(...) 循环仅返回 undefined根据定义。相反，map(...) 返回一个可用值，即 array 。但是，当数组被强制转换为字符串时，默认情况下会在元素之间插入逗号。这会导致在预期插入之间出现不需要的文本节点，每个节点都包含一个逗号。但是，可以通过使用 .join('') 将数组元素与空字符串显式连接来更改此默认值:

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

<div></div>

请注意，此策略可以轻松地与其他可迭代对象一起使用，只需首先将它们强制转换为数组即可，例如使用 [...mySet].map... 而不是 myArray.map... 等