Простые литералы шаблона JavaScript для вставки повторяющихся значений (например, элементов массива) в HTML - PullRequest
Новая
       33

Простые литералы шаблона JavaScript для вставки повторяющихся значений (например, элементов массива) в HTML

0 голосов
/ 29 мая 2018

Я хочу использовать шаблонный литерал, т. Е. Обратные пометки, для вставки элементов из массива в мой 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 Ответ

0 голосов
/ 29 мая 2018

Используйте 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...,и т.д.

...