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

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...等，轻松地将该策略与其他可迭代对象一起使用。