17370845950

模板字符串用反引号包裹，支持嵌入变量（${...}）、多行文本及原始字符串处理（String.raw），解决普通字符串无法实现的动态拼接、格式保留与转义控制问题。

模板字符串不是“更强”，而是解决普通字符串做不到的事——比如嵌入变量、换行、多行拼接。它用 `（反引号）包裹，不是语法糖，是语言层面的新能力。

怎么写模板字符串？注意反引号和插值语法

必须用 ` 开头和结尾；变量或表达式用 ${...} 插入，里面可以是任意 JavaScript 表达式，不限于变量名。

• ${name} 是最常见用法，但 ${name.toUpperCase()}、${items.length > 0 ? 'has' : 'no'} 同样合法
• 不能混用：不能用 "${name}" 或 '${name}'，那只是字面量字符串，$ 和 {} 不会被解析
• 空模板 `` 是合法的，结果是空字符串 ""

`Hello ${user.name}, you have ${count || 0} new message${count === 1 ? '' : 's'}.`

为什么不能用 + 拼接代替？多行和缩进问题

普通字符串用 + 或 concat() 拼接时，换行需显式加 \n，且缩进空格会原样出现在结果里；模板字符串保留所有换行和空白字符，这对生成 HTML、SQL 或配置文本很关键。

• 下面这段代码中，str1 的换行和缩进全是字面量，str2 的换行由模板字符串自然保留
• 想让多行模板不带多余缩进？得手动删掉每行前的空格，或用 .trim() / 正则清理

const str1 = 'SELECT * FROM users\nWHERE active = true;';
const str2 = SELECT * FROM users WHERE active = true;;

String.raw 是干啥的？处理反斜杠不转义的场景

模板字符串默认会解析 \n、\t 等转义序列；如果要原样输出反斜杠（比如 Windows 路径、正则模式、JSON 字符串），就得用 String.raw 标签函数。

• `C:\Users\name` 实际得到的是 "C:Usersname"（因为 \U 和 \n 被转义）
• String.raw`C:\Users\name` 才得到真正的 "C:\\Users\\name"
• String.raw 只影响字面量部分，${...} 内的表达式照常执行

console.log(`\n`);           // 换行
console.log(String.raw`\n`); // \n 两个字符

真正容易被忽略的是嵌套模板和标签函数的组合能力——比如 styled.div`color: ${p => p.theme.color};` 这类用法，底层依赖模板字符串的“原始字符串 + 参数数组”结构。普通字符串完全无法支撑这种设计。