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

JavaScript 的模板字符串不是语法糖,而是真正支持多行、变量嵌入和表达式求值的字符串类型——它用反引号 ` 定义,不是单引号或双引号。
模板字符串用什么符号包裹?为什么不能用单/双引号
必须用反引号 `,比如 `hello`。单引号 '' 和双引号 "" 创建的是普通字符串,不支持 ${...} 插值,也不保留换行(除非手动加 \n)。
- 反引号是唯一能触发模板字符串解析的分隔符
- 混用会报错:比如
`hello ${name}'少了一个反引号,直接 SyntaxError - 反引号在英文键盘通常位于 Tab 键上方,别按成单引号
如何在模板字符串里插入变量和表达式
用 ${...} 语法,大括号内可以是变量名、函数调用、三元运算、甚至对象属性访问——只要结果能转为字符串即可。
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式,或要求按照代码注释规范处理 Java 文件时,使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则,并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括:补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
-
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 片段:
`<div class="item">${text}</div>`可跨行写,结构清晰 - 但也要小心:如果代码缩进深,生成的字符串开头会有大量空格,影响 DOM 渲染或 API 请求格式
- 可借助 tagged template(如
String.raw或自定义 tag 函数)做预处理,但日常多数情况直接 trim 或换行前加\续行更轻量
最常被忽略的是嵌套模板字符串时的引号冲突——比如你想在 ${...} 里再用反引号,必须确保外层已闭合;另外,模板字符串本身不会自动做 HTML 转义,${userInput} 直接插入 DOM 有 XSS 风险,这点和 innerHTML 行为一致,得自己处理。


















