如何在HTML模板字面量中嵌入JavaScript forEach循环？

需要重复生成9个包含动态类名与属性的HTML代码块，当前采用for循环结合JavaScript模板字面量实现。现有数组：

const allSounds = ["Beachfront","Busy coffee shop","Busy restaurant"]

想要在模板字面量内部通过forEach循环生成额外HTML块，尝试嵌入${}及拆分模板字面量均失败，求正确实现语法。

原代码示例：

for (let i = 0; i < 9; i++) {
    let controlDiv = document.createElement('div');
    controlDiv.setAttribute("class", "control" + i);

    controlDiv.innerHTML =  `
    <audio id="audio${i}" class="player${i}" src="audio/${defaultSounds[i]}.opus" loop></audio>
    <div class="on-off-container">
        <button onclick="onOff('audio${i}', 'btn-icon${i}','displaySpan${i}','on-off${i}')" type="button" class="on-off-btn btn-inactive on-off${i}">
             <i class="fa-solid fa-power-off"></i>
        </button>
    </div>
    `;
    
    document.getElementById("control-grid").appendChild(controlDiv);
}

尝试的错误写法：

for (let i = 0; i < 9; i++) {
    let controlDiv = document.createElement('div');
    controlDiv.setAttribute("class", "control" + i);
    controlDiv.innerHTML =  `
    <audio id="audio${i}" class="player${i}" src="audio/${defaultSounds[i]}.opus" loop></audio>

    allSounds.foreach {
        `[some more HTML to append to the DOM]`;
    }

    <div class="on-off-container">
        <button onclick="onOff('audio${i}', 'btn-icon${i}','displaySpan${i}','on-off${i}')" type="button" class="on-off-btn btn-inactive on-off${i}">
             <i class="fa-solid fa-power-off"></i>
        </button>
    </div>
    `;
    
    document.getElementById("control-grid").appendChild(controlDiv);
}

核心问题是模板字面量中不能直接写forEach循环逻辑，需要用map生成HTML字符串数组后拼接成完整字符串，再通过${}嵌入模板。同时注意修正forEach的驼峰拼写。

修改后的完整代码：

for (let i = 0; i < 9; i++) {
    let controlDiv = document.createElement('div');
    controlDiv.setAttribute("class", "control" + i);

    // 用map生成allSounds对应的HTML块，join拼接成字符串
    const soundsHTML = allSounds.map((sound, index) => {
        // 替换成你需要的HTML结构，可使用i和index生成动态标识
        return `
        <div class="sound-item sound-${i}-${index}">
            <span>${sound}</span>
            <!-- 其他动态元素 -->
        </div>
        `;
    }).join('');

    controlDiv.innerHTML =  `
    <audio id="audio${i}" class="player${i}" src="audio/${defaultSounds[i]}.opus" loop></audio>

    <!-- 插入循环生成的HTML片段 -->
    ${soundsHTML}

    <div class="on-off-container">
        <button onclick="onOff('audio${i}', 'btn-icon${i}','displaySpan${i}','on-off${i}')" type="button" class="on-off-btn btn-inactive on-off${i}">
             <i class="fa-solid fa-power-off"></i>
        </button>
    </div>
    `;
    
    document.getElementById("control-grid").appendChild(controlDiv);
}

关键说明： #

• map替代forEach：forEach无返回值，无法生成HTML字符串；map会为每个数组元素返回对应HTML片段，再用join('')拼接成可嵌入模板的完整字符串。
• 动态标识生成：map回调中可访问外层for循环的i和当前元素的index，用来生成唯一类名或ID。
• 模板嵌入：通过${soundsHTML}将循环生成的HTML插入到主模板的对应位置。

内容的提问来源于stack exchange，提问作者user21083546