模板字符串用反引号包裹,支持嵌入变量(${...})、多行文本及原始字符串处理(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;;
立即学习“Java免费学习笔记(深入)”;
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};` 这类用法,底层依赖模板字符串的“原始字符串 + 参数数组”结构。普通字符串完全无法支撑这种设计。











