模板字符串用${}插变量，是js原生语法；支持简单表达式但禁复杂逻辑；列表渲染用map+join；可调纯函数但禁异步或dom操作；innerhtml失效多因非法html或空白符；需手动转义防xss。
模板字符串里怎么插变量
用 ${} 包住变量或表达式就行，这是 JavaScript 原生语法，不是 HTML 特性。模板字符串本身是 JS 的，`（反引号）只是它的字面量写法，它生成的还是普通字符串，可以赋值给 innerHTML、拼进 DOM 或传给框架组件。
常见错误是写成 $[name] 或 #{name}，或者漏掉大括号外面的 $，结果变量不解析，原样输出。
-
const name = "张三"; const html = `<div>Hello ${name}</div>`;→ 正确 -
const html = `<div>Hello $name</div>`;→ 错误，$name 不会被替换 -
const html = `<div>Hello ${user.name || "游客"}</div>`;→ 支持简单表达式，但别塞复杂逻辑
在 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('')不能漏，否则数组默认转成逗号分隔（"<li>…</li>,<li>…</li>"） - 属性值记得用双/单引号包裹，避免
data-id=${u.id}在 id 是空或含空格时出错
模板字符串里能直接执行函数吗
可以，只要函数返回字符串，比如格式化时间、截取文本。但要注意副作用和性能——每次拼接都重新调用，不适合含异步、DOM 查询或大量计算的函数。
-
${formatDate(new Date())}→ 安全，纯函数 -
${document.querySelector('#app').innerHTML}→ 危险，执行时 DOM 可能还没就绪，且每次拼接都查一次 -
${api.getData()}→ 错误，这是 Promise，返回的是 [object Promise]，不是字符串
如果真要动态加载内容，得先 await 数据，再拼模板，不能把异步操作塞进 ${} 里。
为什么 innerHTML = templateString 有时不生效
最常见原因是模板字符串里写了非法 HTML 结构，比如没闭合标签、在 <table> 里直接拼 <code><div>、或在 <code><ul></ul> 外写 <li>。浏览器解析失败时会静默丢弃部分内容，看起来“没渲染”。
另一个隐蔽问题是换行和空白符：模板字符串保留所有缩进和回车，可能让 HTML 出现意外空格或文本节点，尤其在 inline 元素间。可以用 .replace(/\s+/g, ' ').trim() 预处理，但更推荐用 createElement + append 处理复杂结构。
反引号本身不解决 XSS，${userInput} 直接插入等于裸奔。必须手动转义：${userInput.replace(/&/g, '&').replace(/, '，或用 <code>textContent 控制单个文本节点。
