模板字符串是解决变量拼接、换行和表达式嵌入问题的es6+工具，用反引号包裹、${}插入表达式，不支持ie，禁用语句与html自动转义。
JavaScript 模板字符串（template literal）不是“更好”的字符串，而是**解决特定问题的工具**：当你需要拼接变量、换行、嵌入表达式时，它比 '' 或 "" 更直接、更安全、更可读。
模板字符串怎么写？基本语法和常见误用
用反引号 ` 包裹，内部可用 ${...} 插入任意表达式。注意：不是单引号或双引号，也不是所有浏览器都默认支持旧版 IE —— template literal 是 ES6+ 特性，IE 完全不支持。
常见误用包括：
- 把
`写成中文全角符号（如 `｀`），导致语法错误Uncaught SyntaxError: Invalid or unexpected token - 在
${}里写语句（如if、for），实际只允许表达式（a + b、obj?.name、func()等） - 以为能自动 HTML 转义——它不会，
`<div>${userInput}</div>`仍可能引发 XSS
为什么不用 + 拼接？性能和可维护性差异
拼接本身没有明显性能瓶颈，但可读性和维护成本差别很大。尤其当字段变多、逻辑嵌套加深时，+ 容易漏空格、漏引号、括号错位。
立即学习“Java免费学习笔记（深入）”；
比如这个真实场景：生成带条件 class 的 HTML 片段
`<div class="card ${isActive ? 'active' : ''} ${isPinned ? 'pinned' : ''}">${title}</div>`
换成加号写法：
'<div class="card ' + (isActive ? 'active' : '') + ' ' + (isPinned ? 'pinned' : '') + '">' + title + '</div>'
一眼看不出结构，修改 class 名或顺序容易出错。模板字符串天然保留缩进与换行，也更容易提取为函数：
const renderCard = (item) => `<div class="card ${item.active ? 'active' : ''}">${item.title}</div>`;
${} 里能写什么？表达式边界在哪？
${} 中只能放表达式，不能是声明、语句、标签模板调用本身（除非嵌套）。
可以写的例子：
${name.toUpperCase()}${items.length > 0 ? items.join(', ') : '—'}-
${`prefix-${id}`}（支持嵌套模板字符串） -
${obj?.prop ?? 'default'}（可选链 + 空值合并）
不能写的例子：
-
${let x = 1}（let是声明，非法） -
${function() {}}（函数声明不行；箭头函数${() => 42}可以，但通常没必要） -
${if (x) 'yes'}（if是语句，必须包在三元或 IIFE 里）
换行和缩进是原生支持的，但要注意空白字符
模板字符串会**完全保留你写的空白符**，包括换行、制表符、空格。这对生成 HTML 或 SQL 很方便，但也容易引入意外空格。
比如：
`<ul> <li>First</li> <li>Second</li> </ul>`
开头换行和缩进都会变成字符串的一部分。如果用于 DOM innerHTML，浏览器会忽略首尾空白，但中间缩进可能影响 preformatted 文本或 CSS white-space: pre 渲染。
解决方法：
- 用
.trim()去首尾空白：`\n hello\n`.trim()→"hello" - 用
String.raw避免转义干扰（比如路径或正则）：String.raw`C:\temp\file.txt` - 多行内容需控制缩进时，可用
.replace(/^ {2}/gm, '')手动去前导空格
真正难处理的不是语法，而是团队协作中对缩进风格、换行意图、空白语义的一致理解——没人会在 + 拼接里纠结这个，但模板字符串让格式成了接口契约的一部分。
