时间戳

首页 > 解决方案 > 用于将迭代值（例如数组元素）插入 HTML 的简单 JavaScript 模板文字

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

问题描述

我想使用模板文字，即反引号，将数组中的元素插入到我的 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>

那么，我该怎么做呢？

标签： javascripthtmlarraystemplatestemplate-literals

解决方案

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

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

推荐阅读