javascript - 如何使用模板文字多次创建包含数据的行？

Question

我正在使用ES6功能在Vanilla JavaScript中创建日历。

通过调用类render方法，然后将字符串解析为节点元素，我有一个createElement的魔术函数。

现在，我创建了一个day组件和一个row组件。

我正在将日期导入行中，而我需要做的是在其中显示天的日历行，因此总共应该显示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键下方的一个）

您使用的是引号，它并没有像您期望的那样使用${}。

如果要遵循问题中提到的Es6惯例，也可以使用let代替var。

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;
}