Question

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

我希望@import "~src/styles/variables";能够正常工作，每次迭代回调都会插入返回的文本。但是，它只返回forEach，例如：

＆＃13;

undefined

＆＃13;

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

＆＃13;

那么，我该怎么做？

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...等

简单的JavaScript模板文字，用于将迭代值（例如数组元素）插入HTML

1 个答案: