Используйте myArray.map(...).join('')
вместо myArray.forEach(...)
.
В литерале шаблона результаты кода в заполнителе, то есть в ${...}
, приводятся к строке передвставки.Цикл 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...
,и т.д.