模板字符串支持嵌套，内外层均需用反引号，内层${}可执行变量、函数、三元等运算并保留换行缩进；常用于动态生成HTML，但需防XSS且注意null/undefined转字符串问题。
可以直接在 ${} 内部写另一个用反引号包裹的模板字符串，JS 会先求值内部模板，再把结果插入外层字符串。
语法上完全合法，无需特殊处理
模板字符串本身是表达式，只要放在 ${} 中，就能被当作值参与计算。内部模板会先执行插值、换行、嵌套等所有行为，再把最终字符串作为结果返回给外层。
- 外层和内层都必须用反引号（
`），单双引号无效 - 内层模板里的
${}照常生效，支持变量、函数调用、三元运算等 - 缩进和换行会被保留，适合生成 HTML 或带格式的文本
常见使用场景举例
比如动态生成带样式的列表项，或根据条件拼接不同结构的 HTML：
const user = { name: '王五', role: 'admin' };
const itemHtml = `<li class="user-item">
<span>${user.name}</span>
<small>${user.role === 'admin' ? `<strong>${user.role}</strong>` : user.role}</small>
</li>`;
更进一步，用 map 遍历时嵌套：
const users = [{name:'张三',active:true}, {name:'李四',active:false}];
const list = `<ul>
${users.map(u => `<li${u.active ? ' class="active"' : ''}>${u.name}</li>`).join('')}
</ul>`;
注意事项
嵌套本身没有限制层级，但要注意可读性和维护性：
-
null或undefined会原样转成字符串"null"、"undefined"，建议提前判断 - 高频拼接（如万级循环）时性能略低于数组
join，但日常使用无感 - 模板字符串不自动做 HTML 转义，直接插入用户输入有 XSS 风险，需自行过滤或使用安全库
