模板字符串用反引号 ` 包裹,因为只有反引号才能触发模板字符串解析机制,支持${...}插值、多行保留及表达式求值;单双引号仅创建普通字符串,不支持这些特性。

JavaScript 的模板字符串不是语法糖,而是真正支持多行、变量嵌入和表达式求值的字符串类型——它用反引号 ` 定义,不是单引号或双引号。
模板字符串用什么符号包裹?为什么不能用单/双引号
必须用反引号 `,比如 `hello`。单引号 '' 和双引号 "" 创建的是普通字符串,不支持 ${...} 插值,也不保留换行(除非手动加 \n)。
- 反引号是唯一能触发模板字符串解析的分隔符
- 混用会报错:比如
`hello ${name}'少了一个反引号,直接 SyntaxError - 反引号在英文键盘通常位于 Tab 键上方,别按成单引号
如何在模板字符串里插入变量和表达式
用 ${...} 语法,大括号内可以是变量名、函数调用、三元运算、甚至对象属性访问——只要结果能转为字符串即可。
-
const name = "Alice"; console.log(`Hi, ${name}`);→"Hi, Alice" -
const items = [1, 2]; console.log(`Count: ${items.length}`);→"Count: 2" -
console.log(`Price: ${price > 100 ? "expensive" : "ok"}`);→ 动态计算后插入 - 注意:
${undefined}会变成字符串"undefined",不是报错,但可能掩盖逻辑问题
模板字符串里的换行和空格怎么处理
反引号内的换行、缩进、空格都会原样保留在最终字符串中——这是和 + 拼接或 join() 的关键区别。
立即学习“Java免费学习笔记(深入)”;
- 适合写 HTML 片段:
`可跨行写,结构清晰${text}` - 但也要小心:如果代码缩进深,生成的字符串开头会有大量空格,影响 DOM 渲染或 API 请求格式
- 可借助 tagged template(如
String.raw或自定义 tag 函数)做预处理,但日常多数情况直接 trim 或换行前加\续行更轻量
最常被忽略的是嵌套模板字符串时的引号冲突——比如你想在 ${...} 里再用反引号,必须确保外层已闭合;另外,模板字符串本身不会自动做 HTML 转义,${userInput} 直接插入 DOM 有 XSS 风险,这点和 innerHTML 行为一致,得自己处理。











