Javascript 如何使用模板lliteralls多次创建包含数据的行？

我正在用香草JavaScript创建一个日历，使用ES6特性

我有一个神奇的函数，它通过调用类render方法创建元素，然后将字符串解析为节点元素

现在，我创建了一个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>" : " "} '
        }


    }

renderDays（）{
//周
对于（var j=0；j<5；j++）{
常量行=第%7天==0；
变量html
html+='${row？”：“}”；
//日子
对于（变量i=0；i<28；i++）{
创建元素（天）；
}
html+=“${row？”：”“}”
}
}

那么在我的渲染中

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

render（）{
return/*html*/`
${this.renderDays（）}
`;
}

---

我怎样才能做到这一点？在ES5中，只需将其追加或添加到变量中，但应如何按照这种方式创建它？

要使用模板文本，必须使用back ticks```（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;
}

renderDays（）{
让HTML = ''；/ /考虑正确地范围变量
//周
for（设j=0；j<5；j++）{
常量行=第%7天==0；
html+=`${row？''：'}`；
//天---可能是错误的逻辑，因为您在每行内循环28次，或者总共5*28次？
for（设i=0；i<28；i++）{
createElement（天）；//您可能是指html+=createElement（天）？
}
html+=`${row？''：'}`
}
//console.log（html）
返回html；
}

您的

renderDays（）

函数中没有返回值我添加了它，因此返回HTML，但得到的结果是：“：”}${row？”。就像模板literals没有编译或osmething.template literal以“not with”开头一样，我确实更改为back ticks，但该值未定义/renderDays（）{//Weeks行（var j=0；j<5；j++）{const行=day%7==0；var html；html+=

${Row？'”：“}

；//Days（var i=0；i<28；i++）{createElement（day）；}html+=

${row？”：“}

}返回html；}它甚至没有循环任何内容，所有内容都是未定义的。@Luigi你能试试上面的代码并告诉我你是否有任何错误吗？@Luigi你的createElement（）做什么？你没有将它添加到HTMLI中吗