如何使用模板字面量(Template Literals)将循环项包裹在<li>标签中

现有代码问题 #

• 核心问题1：拼接数组元素时没有包裹<li>标签，生成的HTML结构里自然没有li节点
• 核心问题2：模板字面量使用方式错误，${uls+=a[i]}仅做了赋值操作，生成的模板字符串没有被接收，完全没有发挥模板字面量的作用
• 潜在问题：循环变量i未声明，会泄露为全局变量

正确实现代码 #

// 按需替换为你的实际数组
const a = ["元素1", "元素2", "元素3"]
let uls = "<ul>";
// 声明循环变量i
for(let i=0;i<a.length;i++){
  // 用模板字面量拼接li标签和数组内容，赋值给uls
  uls += `<li>${a[i]}</li>`;
}
uls += "</ul>";
// 实际项目更推荐用innerHTML插入到指定节点，替换document.write
// document.body.innerHTML = uls
document.write(uls);

补充优化方案 #

如果不需要兼容老旧浏览器，可使用数组map方法简化写法，代码更简洁：

const a = ["元素1", "元素2", "元素3"]
const list = `<ul>
  ${a.map(item => `<li>${item}</li>`).join('')}
</ul>`
document.body.innerHTML = list

注意：实际开发不推荐使用document.write，如果页面加载完成后调用该方法会覆盖整个页面内容，建议选择指定DOM节点通过innerHTML或者appendChild的方式插入内容。

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