HTML模板字符串可以用反引号（）配合模板字符串特性来动态生成。在JavaScript中，使用反引号可以创建多行字符串，并且可以通过${}`插值语法动态插入变量。示例：constname="张三";constage=25;consthtml=`<div><h1>姓名：${name}</h1><p>年龄：${age}</p></div

本文深入解析了JavaScript中使用反引号（`）编写HTML模板字符串的核心技巧与关键陷阱：从基础的${}变量插值语法、支持简单表达式但严禁复杂逻辑，到通过map+join实现列表渲染、安全调用纯函数处理数据，再到揭示innerHTML失效的真实原因——非法HTML结构、空白符干扰及未转义导致的XSS风险；全文强调模板字符串本质是JS特性而非HTML增强，提醒开发者警惕常见误写（如$[name]）、避免异步操作和DOM查询嵌入插值，并给出实用防御方案，助你写出既简洁又健壮、兼顾安全性与可维护性的动态HTML生成代码。

模板字符串里怎么插变量

用 ${} 包住变量或表达式就行，这是 JavaScript 原生语法，不是 HTML 特性。模板字符串本身是 JS 的，`（反引号）只是它的字面量写法，它生成的还是普通字符串，可以赋值给 innerHTML、拼进 DOM 或传给框架组件。

常见错误是写成 $[name] 或 #{name}，或者漏掉大括号外面的 $，结果变量不解析，原样输出。

• const name = "张三"; const html = `
  Hello ${name}
  `; → 正确
• const html = `
  Hello $name
  `; → 错误，$name 不会被替换
• const html = `
  Hello ${user.name || "游客"}
  `; → 支持简单表达式，但别塞复杂逻辑

在 HTML 模板中嵌套循环怎么写

JS 模板字符串不提供类似 Vue 的 v-for 语法，得靠 map() + join() 手动拼接。直接写 for 循环会破坏字符串结构，容易漏引号或换行符。

比如渲染用户列表：

const users = [{id: 1, name: "李四"}, {id: 2, name: "王五"}];
const listHtml = `
  

${users.map(u => `
• ${u.name}
`).join('')}

注意点：

• 每个 map 项必须返回字符串，不能有 return 后换行再写内容
• join('') 不能漏，否则数组默认转成逗号分隔（"
• …
,
• …
"）
• 属性值记得用双/单引号包裹，避免 data-id=${u.id} 在 id 是空或含空格时出错

模板字符串里能直接执行函数吗

可以，只要函数返回字符串，比如格式化时间、截取文本。但要注意副作用和性能——每次拼接都重新调用，不适合含异步、DOM 查询或大量计算的函数。

• ${formatDate(new Date())} → 安全，纯函数
• ${document.querySelector('#app').innerHTML} → 危险，执行时 DOM 可能还没就绪，且每次拼接都查一次
• ${api.getData()} → 错误，这是 Promise，返回的是 [object Promise]，不是字符串

如果真要动态加载内容，得先 await 数据，再拼模板，不能把异步操作塞进 ${} 里。

为什么 innerHTML = templateString 有时不生效

最常见原因是模板字符串里写了非法 HTML 结构，比如没闭合标签、在