Как засунуть цикл в ``?

Question

[Dmitri1998]

Как можно засунуть в `` цикл для отображения списка?
https://jsfiddle.net/f1nt6hx9/

Comments

[WbICHA]

Только если через самовызывающуюся функцию, но зачем, если можно написать по-человечески?
Впрочем, цикл в текущем виде всё равно не будет работать.

[Dmitri1998]

WbICHA, как это можно написать лучше?
Мне пока в голову только такая мысль пришла

Answer 1

[Василий Банников]

`
        <div class="box">
  		${[0,1,2,3,4,5,6,7,8,9].map(i=> `<p class="show">Show ${i}</p>`).join('\n')}
        </div>
`

Answer 2

[Сергей Соколов]

В шаблонных строках в фигурных скобках ${ } можно помещать не любой код, а выражения. Что-то, имеющее значение: `Привет, ${ ["м", "р"].join("и") }!`

Comments

[Dmitri1998]

Спасибо, а если бы вам нужно было создавать функцию, которая должна вывести родитель списка (вставив в него название из data) и сам список внутри него из 2 и более одинаковых хтмл, но с разными вставляемыми значениями так же из data, вы бы так и сделали или можно реализовать лучше?
Мне просто пока только такой вариант в голову пришел

[Василий Банников]

Dmitri1998, чем обычный цикл не нравится?

let html = "<ul>";
for(const x of data) {
   html+=`<li>${x}</li>`;
}
html+= "</ul>";

[Dmitri1998]

Василий Банников, я в реакте подсмотрел и как-то так шаблон делался, вот и по примеру пытался написать свою функцию создания компонента

[Сергей Соколов]

Dmitri1998, функция в итоге что должна вернуть? Если строку HTML, то её можно собирать как предложил Василий Банников
Подсмотренный в React / Vue синтакс доступен небесплатно: придётся тащить библиотеку.

[Василий Банников]

Dmitri1998, в react/vue совсем не такой синтаксис, и там вся магия идёт за счёт jsx и сборщика

[Dmitri1998]

Сергей Соколов, должна вернуть html, который мы добавим на страницу в виде списка
И таких 3 разных списка, которые так по очереди будут создаваться