模板字符串支持嵌套，内外层均需用反引号，内层${}可执行变量、函数、三元等运算并保留换行缩进；常用于动态生成html，但需防xss且注意null/undefined转字符串问题。

可以直接在 ${} 内部写另一个用反引号包裹的模板字符串，JS 会先求值内部模板，再把结果插入外层字符串。

语法上完全合法，无需特殊处理

模板字符串本身是表达式，只要放在 ${} 中，就能被当作值参与计算。内部模板会先执行插值、换行、嵌套等所有行为，再把最终字符串作为结果返回给外层。

• 外层和内层都必须用反引号（`），单双引号无效
• 内层模板里的 ${} 照常生效，支持变量、函数调用、三元运算等
• 缩进和换行会被保留，适合生成 HTML 或带格式的文本

常见使用场景举例

比如动态生成带样式的列表项，或根据条件拼接不同结构的 HTML：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

const user = { name: '王五', role: 'admin' };
const itemHtml = `

${user.name} ${user.role === 'admin' ? `${user.role}` : user.role}

`;

更进一步，用 map 遍历时嵌套：

const users = [{name:'张三',active:true}, {name:'李四',active:false}];
const list = `

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

`;

注意事项

嵌套本身没有限制层级，但要注意可读性和维护性：

• null 或 undefined 会原样转成字符串 "null"、"undefined"，建议提前判断
• 高频拼接（如万级循环）时性能略低于数组 join，但日常使用无感
• 模板字符串不自动做 HTML 转义，直接插入用户输入有 XSS 风险，需自行过滤或使用安全库