模板字符串是JavaScript原生字符串类型,用反引号`包裹,支持变量插值${}和多行;${}内仅限表达式,不可写语句;嵌套需保持反引号;变量须在当前作用域存在,否则静默为undefined。

模板字符串不是语法糖,是 JavaScript 原生支持的字符串字面量类型,用反引号 ` 包裹,核心能力是变量插值和多行支持。
怎么写模板字符串:必须用反引号,不能用单/双引号
只有 `(反引号)才能启用模板字符串功能。用 ' 或 " 写出的字符串,哪怕内容一模一样,也无法解析 ${...}。
常见错误现象:
- 写成
"Hello ${name}"→ 输出原样文字,${name}不被替换 - 复制粘贴时混入中文全角反引号
`→ 语法报错Uncaught SyntaxError: Invalid or unexpected token
正确写法:
立即学习“Java免费学习笔记(深入)”;
`Hello ${name}`
变量插值:${} 里只能放表达式,不是语句
${...} 是占位符,里面填的是「表达式」,不是「语句」。能运行、有返回值的才算表达式。
- ✅ 支持:变量名
${count}、函数调用${getName()}、三元运算${age >= 18 ? 'adult' : 'minor'}、数组访问${items[0].id} - ❌ 不支持:
${let x = 1}(let是声明语句)、${if (x) {...}}(if是语句)、${return 42}
如果逻辑复杂,先算好结果再放进 ${},别硬塞控制流。
嵌套模板字符串:可以,但要注意引号层级和可读性
模板字符串内部还能嵌套模板字符串,因为 ${...} 里允许任意表达式,包括另一个带 ` 的字符串。
例如生成 HTML 片段:
``${user.name}
${user.tags.map(tag => `${tag}`).join('')}
注意点:
- 内层模板字符串仍需用
`,不能偷懒换" - 嵌太多层容易眼花,建议提取成独立函数或使用模板引擎处理重度 HTML 拼接
- 没有编译期校验,拼错变量名或漏写
$会导致静默渲染为空字符串
最常被忽略的是作用域——${} 中的变量必须在当前执行上下文中可访问,闭包、异步回调里取不到外部临时变量时,插值会是 undefined,而不是报错。










