用于将迭代值(例如数组元素)插入到JavaScript中的简单HTML模板文字
用于将迭代值(例如数组元素)插入到JavaScript中的简单HTML模板文字
提问于 2018-05-29 08:26:55
我想使用模板文字，即反引号，将数组中的元素插入到我的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>
那么，我该怎么做呢？
回答 1
Stack Overflow用户
发布于 2018-05-29 08:26:55
不使用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...，等等。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50574786
复制相关文章
相似问题