JavaScript模板字面量必须用反引号包裹，支持变量插值、多行字符串及表达式计算，可配合标签函数实现XSS过滤等高级功能，但需注意缩进空格保留和引号误用问题。
JavaScript 模板字面量（template literals）不是“要不要用”的问题，而是“不用就容易写错、难维护”的现实需求——尤其在拼接多行字符串、嵌入变量或动态表达式时。
模板字面量的基本写法和反引号作用
模板字面量用反引号 ` 包裹，不是单引号或双引号。这是硬性前提，写成 '${name}' 或 "${name}" 都不会触发插值。
常见错误现象：变量没渲染出来，输出就是字面的 ${name} ——八成是用了错的引号。
- 正确：
`Hello ${name}` - 错误：
"Hello ${name}"（纯字符串，不解析） - 错误：
`Hello ${name}` + '!'（混合引号易漏空格或换行）
在模板中嵌入变量和表达式
${...} 里支持任意 JavaScript 表达式，不只是变量名。这比 + 拼接灵活得多，也更安全（自动转字符串，不报 undefined 或 null 错误）。
使用场景：生成 HTML 片段、日志消息、SQL 查询片段（注意防注入）、路径拼接等。
- 变量：
`User: ${user.name}` - 方法调用：
`Length: ${text.length}` - 三元判断：
`Status: ${isActive ? 'online' : 'offline'}` - 对象属性链（注意空值）：
`Email: ${user?.email || 'N/A'}`
多行字符串与缩进处理
反引号天然支持换行，但换行符和缩进空格会原样保留在字符串中——这点常被忽略，导致生成的 HTML 或 JSON 格式错乱。
性能影响小，但可读性和调试成本高：你看到的缩进，就是最终字符串里的空格。
- 直接换行会带空格：
`div class="card" ${title}` - 用
.replace(/\s+/g, ' ')压缩空白（适合 HTML） - 用
String.raw避免转义干扰（如 Windows 路径：String.raw`C:\Users\name`）
标签函数（tagged templates）的实际用途
模板字面量前面加一个函数名，比如 h，这个 
html 就是标签函数。它接收静态字符串数组和插值结果作为参数，可用于 XSS 过滤、国际化、样式作用域等。
容易踩的坑：标签函数不能省略括号；它不自动执行，只是把参数传进去，逻辑全靠你写。
- 基础签名：
function html(parts, ...values) { /* parts 是 ['', ''], values 是 [content] */ } - 常见库用法：
css`color: ${color};`（Emotion）、sql`SELECT * FROM users WHERE id = ${id}`（SQL 安全绑定） - 不要写成
html `${x}`却没定义html函数，否则报ReferenceError
真正难的不是语法，是意识到哪些地方该用、哪些不该用：简单拼接用 + 更轻量，复杂结构或需复用逻辑时，模板字面量+标签函数才是解法。空格缩进、嵌套层级、表达式副作用，这些细节不试几次根本记不住。
