JavaScript模板字符串是ES6用反引号`定义的字符串语法，支持多行文本和${...}嵌入表达式；仅反引号启用该特性，${}内须为表达式而非语句，保留空白字符需谨慎处理。
什么是 JavaScript 模板字符串
模板字符串（Template Literal）是 ES6 引入的字符串字面量语法，用反引号 ` 包裹，支持多行文本和嵌入表达式。它不是“增强版字符串拼接工具”，而是替代 + 和 String.prototype.concat() 的更安全、更可读的字符串构造方式。
怎么在模板字符串里插入变量和表达式
用 ${...} 语法插入任意 JavaScript 表达式，包括变量、函数调用、三元运算、甚至对象属性访问——只要能求值，就能放进去。
常见写法示例：
`Hello, ${name}`
`Sum: ${a + b}`
`Status: ${isActive ? 'online' : 'offline'}`
注意：${} 内部不能直接写语句（如 if、for），只能是表达式；若需复杂逻辑，应先赋值给变量再插入。
立即学习“Java免费学习笔记（深入）”；
为什么不能把模板字符串当普通字符串用单引号或双引号
因为只有反引号 ` 才启用模板字符串特性。用 '${x}' 或 "${x}" 是字面量字符串，$ 和 {} 不会被解析，原样输出。
容易踩的坑：
- 复制粘贴时误把中文全角反引号
｀当成英文反引号`，导致语法错误 - 在不支持 ES6 的旧环境（如 IE）中运行，会直接报
SyntaxError: Unexpected token ` - 误以为
${obj?.prop}在所有环境都安全——可选链操作符需单独兼容性检查，不是模板字符串自带能力
模板字符串里的换行和空格怎么处理
反引号内保留所有空白字符，包括换行、缩进、制表符。这既是优势（方便写 HTML 片段），也是隐患（可能意外引入多余空格）。
实用建议：
- 写多行 HTML 时，用
.trim()清除首尾空白：`
`.trim()${text}
- 避免在
${}前后加多余空格，否则会出现在最终字符串里 - 若需动态控制缩进，不要依赖模板字符串内的空格，改用
String.prototype.repeat()或显式拼接
真正难处理的从来不是语法，而是团队协作时对空白字符的预期不一致——有人删了换行，有人留着缩进，结果渲染出意料之外的空白节点。
