17370845950

模板字符串是解决变量拼接、换行和表达式嵌入问题的ES6+工具，用反引号包裹、${}插入表达式，不支持IE，禁用语句与HTML自动转义。

JavaScript 模板字符串（template literal）不是“更好”的字符串，而是**解决特定问题的工具**：当你需要拼接变量、换行、嵌入表达式时，它比 '' 或 "" 更直接、更安全、更可读。

模板字符串怎么写？基本语法和常见误用

用反引号 ` 包裹，内部可用 ${...} 插入任意表达式。注意：不是单引号或双引号，也不是所有浏览器都默认支持旧版 IE —— template literal 是 ES6+ 特性，IE 完全不支持。

常见误用包括：

• 把 ` 写成中文全角符号（如 `｀`），导致语法错误 Uncaught SyntaxError: Invalid or unexpected token
• 在 ${} 里写语句（如 if、for），实际只允许表达式（a + b、obj?.name、func() 等）
• 以为能自动 HTML 转义——它不会，`${userInput}` 仍可能引发 XSS

为什么不用 + 拼接？性能和可维护性差异

拼接本身没有明显性能瓶颈，但可读性和维护成本差别很大。尤其当字段变多、逻辑嵌套加深时，+ 容易漏空格、漏引号、括号错位。

比如这个真实场景：生成带条件 class 的 HTML 片段

`${title}`

换成加号写法：

'' + title + ''

一眼看不出结构，修改 class 名或顺序容易出错。模板字符串天然保留缩进与换行，也更容易提取为函数：

const renderCard = (item) => `${item.title}`;

${} 里能写什么？表达式边界在哪？

${} 中只能放表达式，不能是声明、语句、标签模板调用本身（除非嵌套）。

可以写的例子：

• ${name.toUpperCase()}
• ${items.length > 0 ? items.join(', ') : '—'}
• ${`prefix-${id}`}（支持嵌套模板字符串）
• ${obj?.prop ?? 'default'}（可选链 + 空值合并）

不能写的例子：

• ${let x = 1}（let 是声明，非法）
• ${function() {}}（函数声明不行；箭头函数 ${() => 42} 可以，但通常没必要）
• ${if (x) 'yes'}（if 是语句，必须包在三元或 IIFE 里）

换行和缩进是原生支持的，但要注意空白字符

模板字符串会**完全保留你写的空白符**，包括换行、制表符、空格。这对生成 HTML 或 SQL 很方便，但也容易引入意外空格。

比如：

`

  
First
  
Second
`

开头换行和缩进都会变成字符串的一部分。如果用于 DOM innerHTML，浏览器会忽略首尾空白，但中间缩进可能影响 preformatted 文本或 CSS white-space: pre 渲染。

解决方法：

• 用 .trim() 去首尾空白：`\n hello\n`.trim() → "hello"
• 用 String.raw 避免转义干扰（比如路径或正则）：String.raw`C:\temp\file.txt`
• 多行内容需控制缩进时，可用 .replace(/^ {2}/gm, '') 手动去前导空格

真正难处理的不是语法，而是团队协作中对缩进风格、换行意图、空白语义的一致理解——没人会在 + 拼接里纠结这个，但模板字符串让格式成了接口契约的一部分。