模板字面量用反引号(`)定义,支持插值${...}、多行和原始字符串;不可用单/双引号或中文符号;需注意空格污染、IE不兼容及XSS风险。

JavaScript 中没有叫“模板字面量_”的语法或标准术语,下划线不是合法标识符的一部分,模板字面量_ 这种写法会直接报错:SyntaxError: Invalid or unexpected token。你实际想查的,是反引号(`)包裹的 模板字面量(Template Literal),也常被叫作“模板字符串”。
模板字面量用反引号,不是单引号或双引号
这是最基础但最容易踩的坑:必须用 `,不是 ' 或 "。混用会导致语法错误或静默失败(比如当反引号被误写成中文符号时)。
-
`hello ${name}`✅ 正确 -
"hello ${name}"❌ 变成普通字符串,${name}不解析 -
`hello ${name}`(用了中文反引号 `)❌ 报Invalid or unexpected token
插值表达式必须写在 ${...} 里,且内部不能有未闭合的括号或引号
${...} 是插值语法的唯一入口,里面是 JS 表达式,不是字符串拼接。常见错误包括:
- 忘记写
$,写成`hello {name}`→ 输出字面量{name} - 在
${...}里嵌套未闭合的引号:${obj."key"}→ 语法错误,应写${obj["key"]}或${obj.key} - 写多层逻辑时漏括号:
${a ? b : c + d}建议加括号明确优先级:${(a ? b : c) + d}
换行和缩进会原样保留,注意空格污染
模板字面量天然支持多行,但缩进空格也会进入最终字符串,容易导致 HTML 渲染错位或 JSON 格式异常。
立即学习“Java免费学习笔记(深入)”;
``Hello ${name}
上面这段会产生带缩进的字符串,如果用于生成 HTML 片段, 前的两个空格会变成文本节点。解决方法:
- 用
.trim()或.replace(/\s+/g, ' ')清理空白 - 把换行写在插值外,用
\`拼接多行(不推荐,失去可读性) - 用
String.raw避免转义干扰(如路径、正则):String.raw`C:\Users\name`
性能与兼容性:现代环境放心用,但 IE 完全不支持
模板字面量 是 ES2015(ES6)特性,所有现代浏览器和 Node.js ≥ 4 都支持。但 IE 所有版本都不支持——如果你的项目还需兼容 IE,必须用 Babel 转译,或退回到 + 拼接。
- Node.js 环境:确认
process.version≥v4.0.0 - 浏览器环境:查
typeof `x` === 'string'是否为true(简单检测) - 不要在
eval()或Function()构造器里动态拼接模板字面量,容易引发注入风险
真正要注意的不是“怎么写”,而是“在哪写”——比如服务端渲染中模板字面量生成的 HTML 如果含未转义用户输入,就可能触发 XSS;又比如在正则字面量里混用模板字面量,得手动处理 / 和 $ 的转义。这些细节比语法本身更常出问题。










