17370845950

模板字符串用反引号包裹，支持变量插值、多行文本、空白符保留及标签函数处理，解决普通字符串无法动态执行逻辑和结构化表达的问题。

JavaScript 模板字符串不是“更强”，而是解决了一类普通字符串根本做不到的事——比如嵌入变量、换行、多行文本拼接。它用 `（反引号）包裹，不是语法糖，是语言级支持的结构化字符串能力。

模板字符串能直接嵌入变量和表达式

普通字符串用 + 拼接，易错且难读；模板字符串用 ${...} 插值，表达式实时求值：

`Hello ${name}, you have ${items.length} items.`

注意：${...} 里可以是任意 JavaScript 表达式，包括函数调用、三元运算、甚至对象属性访问（如 ${user?.profile?.name || 'Anonymous'}）。普通字符串做不到这点，+' '+ 拼接无法动态执行逻辑。

它天然支持多行和保留空白符

普通字符串中换行必须用 \n，且缩进空格全丢失；模板字符串直接回车换行，所有空白（包括缩进、制表符、空行）原样保留：

立即学习“Java免费学习笔记（深入）”；

`Item List:
  • ${itemA}
  • ${itemB}
  • ${itemC}`

这在生成 HTML 片段、SQL 查询、CLI 提示文案等场景非常实用。但要注意：如果模板字符串首尾有换行或缩进，它们也会进入最终字符串——调试时用 console.log(JSON.stringify(str)) 能看清真实内容。

标签函数让模板具备运行时处理能力

模板字符串可配合标签函数（如 String.raw、html、自定义函数），在插值前对原始字符串和值分别处理：

• html`${content}` 可自动转义 HTML 字符防止 XSS
• String.raw`C:\temp\notes.txt` 忽略反斜杠转义，输出字面量路径
• 自定义标签可做国际化、SQL 参数绑定、样式内联等

普通字符串没有这种扩展机制——它只是静态值，无法被“拦截”或“增强”。标签函数的参数顺序固定：strings（静态片段数组）、后续每个 ${...} 对应一个动态值。

容易忽略的细节：空格、换行、性能与兼容性

模板字符串不是万能的。以下几点常被忽视：

• 反引号 ` 不支持 IE，哪怕最简单的 `hello` 在 IE 中会直接报 SyntaxError
• 插值表达式若抛错（如 ${obj.prop.method()} 中 obj.prop 是 undefined），整个模板字符串构造失败
• 过度嵌套插值（如 ${${x}}）语法非法，必须是单层 ${...}
• 纯静态字符串（无插值、无换行）用双引号或单引号更轻量，V8 等引擎对其有额外优化

真正该用模板字符串的时候，是当你需要“带逻辑的字符串”或“带结构的字符串”——而不是仅仅为了写得“看起来新潮”。