掌握JavaScript模板字面量，轻松上手教程

JavaScript模板字面量远不止是“带插值的字符串”，它是语言中唯一原生支持多行文本、运行时表达式求值、标签函数拦截和原始字符串解析的全能字符串构造机制；用错引号（如误用单/双引号）会导致插值完全失效，而正确使用反引号不仅能优雅嵌入任意表达式（包括函数调用、可选链与默认值）、实现HTML转义或SQL防注入等安全操作，还能通过String.raw精准控制转义行为——掌握它，就掌握了现代JavaScript字符串处理的核心能力。

模板字面量不是“更高级的字符串拼接语法糖”，它是 JavaScript 中唯一能天然支持多行、表达式嵌入、标签函数和原始字符串解析的字符串构造机制。

模板字面量必须用反引号 `，不能用单引号或双引号

这是最常踩的坑：把 `Hello ${name}` 写成 'Hello ${name}' 或 "Hello ${name}" —— 后两者完全不会解析 ${...}，只会原样输出文字。反引号是硬性要求，没有例外。

• 合法：`line1\nline2`（换行会被保留）
• 非法："line1\nline2"（虽然也能换行，但无法嵌入表达式）
• 注意：\` 是转义反引号，\${ 会阻止插值（变成字面量 ${）

${...} 里可以放任意表达式，不只是变量

它不是“变量占位符”，而是运行时求值的表达式容器。括号内写什么，就执行什么。

• 支持函数调用：`Sum: ${add(2, 3)}`
• 支持对象属性访问：`Name: ${user?.name ?? 'Anonymous'}`
• 支持模板嵌套：`Outer: ${`Inner: ${42}`}`
• 注意：若表达式抛错（如 undefined.name），整个模板求值失败，报 TypeError

标签函数让模板字面量脱离“拼字符串”用途

在反引号前加一个函数名（如 html`${text}`），就触发标签函数机制：JavaScript 会把模板拆成静态字符串数组和动态表达式值，交由你自定义处理。

• 函数接收的第一个参数是字符串数组（strings），后续是每个 ${...} 的值
• 常见用途：HTML 转义（safeHtml）、国际化（msg`Hello ${name}`）、SQL 参数化（防注入）
• 关键点：标签函数不改变模板字面量本身，只是拦截并重定义它的解释方式

真正容易被忽略的是原始字符串访问能力：String.raw`\\n` 返回 "\\n" 而非换行符；而直接用 `\\n` 仍会转义。这在正则、路径、SQL 字符串中至关重要——不是所有场景都需要运行时插值，有些只需要结构化字面量本身。

终于介绍完啦！小伙伴们，这篇关于《掌握JavaScript模板字面量，轻松上手教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！