Как создать строку с данными внутри несколько раз с помощью шаблона lliteralls?

Question

Я создаю Календарь в Vanilla JavaScript, используя функции ES6.

У меня есть волшебная функция, которая создаетElement, вызывая метод рендеринга класса, а затем анализирует строку для элементов узла.

Теперь я создал компонент дня и компонент строки.

Я импортирую день внутри строки, и мне нужно отобразить строку календаря с указанием дней внутри нее, так что в целом он должен отображать 4-5 строк с 28-31 днями, которые разделенывнутри рядов.

Примерно так:

renderDays() {

        // Weeks
        for(var j = 0; j < 5; j++) {
            const row = day % 7 == 0;
            var html
            html += ' ${row ? "<div class="cal__cell-row">" : " "} '; 
                // Days
                for (var i = 0; i < 28; i++) {
                    createElement(day);   
                }

            html += ' ${row ? "</div>" : " "} '
        }


    }

Тогда в моем рендере у меня есть

render() {
        return /*html*/`
            <div data-child="row" class="cal__cell-row">
                ${this.renderDays()}
            </div>
        `;
    }

Как я могу сделать эту работу?В ES5 это просто добавление или добавление в переменную, но как это следует создать следующим образом?

Answer 1

Чтобы использовать шаблонные литералы, вы должны использовать обратные тики `` (тот, что ниже клавиши Esc)

Вы используете кавычки, и это не займет ${}, как вы ожидаете.

Вы также можете использовать let вместо var, если хотите следовать практикам Es6, упомянутым в вопросе.

renderDays() {            
        let html = ''; // consider scoping the variables correctly
        // Weeks
        for(let j = 0; j < 5; j++) {
            const row = day % 7 == 0;
            html += ` ${row ? '<div class="cal__cell-row">' : ' '} `; 
                // Days --- potentially incorrect logic as you are looping inside each row 28 times, or 5*28 times in total ?
                for (let i = 0; i < 28; i++) {
                    createElement(day);   // possibly you mean html+= createElement(day) ?
                }
            html += ` ${row ? '</div>' : ' '} `
        }
        // console.log(html)
        return html;
}