模板字符串是ES6引入的原生方案，用反引号（`）定义，支持多行、嵌入任意JavaScript表达式及标签函数；常见错误包括误用单/双引号、混入全角符号、缩进空格污染内容。
模板字符串不是“新写法的字符串教程”，而是 JavaScript 中解决字符串拼接、多行、嵌入表达式等实际问题的原生方案。它从 ES6 开始可用，现在所有主流环境都支持，无需 polyfill。
模板字符串用 \` 而不是 ' 或 "
这是最基础但最容易忽略的识别点：必须用反引号（\`），单引号或双引号写的都不是模板字符串，哪怕内容一模一样。
常见错误现象：
- 写了
"Hello ${name}"—— 这是普通字符串，${name}不会被解析，原样输出 - 复制了别人代码却把
\`粘贴成中文全角符号（如 `｀`）—— 浏览器直接报SyntaxError: Invalid or unexpected token
正确写法示例：
立即学习“Java免费学习笔记（深入）”；
const name = 'Alice';
const msg = `Hello ${name}`; // ✅ 输出 "Hello Alice"
${} 里能放任意 JavaScript 表达式，不只是变量
模板字符串的插值部分 ${...} 是表达式求值区，不是“变量占位符”。这意味着你可以直接写函数调用、三元运算、甚至简单对象属性访问。
使用场景举例：
-
`Price: $${(price * 1.1).toFixed(2)}`—— 计算+格式化一步到位 -
`Status: ${isActive ? 'online' : 'offline'}`—— 内联条件判断 -
`User: ${user?.name || 'Anonymous'}`—— 可选链 + 默认值
注意：${} 中不能有未声明变量或语法错误，否则整个模板字符串会抛 ReferenceError 或 SyntaxError，和普通脚本执行规则一致。
换行和缩进会原样保留，但要注意空格语义
模板字符串天然支持多行，不需要 + 或 \n 拼接。但缩进空格也会被当作字符串内容的一部分。
常见错误现象：
- 这样写：
const html = `
<div>
<p>${text}</p>
</div>
`;
// 实际结果开头和每行都有多余空格，可能破坏 HTML 结构或 CSS 排版
解决方案：
- 把
\`放在行首，用\n显式控制换行 - 用
.trim()去首尾空白（但不处理中间缩进） - 更稳妥的做法是避免在模板中混入缩进，或用
String.raw+ 后续处理
例如：
const html = `<div><p>${text}</p></div>`.trim(); // ✅ 清除首尾换行和空格
标签函数（tagged templates）是进阶但实用的能力
模板字符串前面加一个函数名，就变成“带标签的模板字符串”，该函数会接收插值前的字符串数组和所有表达式结果作为参数。
典型用途：
-
html`<div>${name}</div>`—— 防 XSS 的模板函数（需自行实现或用库如lit-html） -
sql`SELECT * FROM users WHERE id = ${id}`—— 参数化查询，避免 SQL 注入 -
styled.div`color: ${color}; font-size: ${size}px;`—— CSS-in-JS 库的核心机制
函数签名固定为：function tag(strings, ...values) { }，其中 strings 是静态片段数组（含空字符串），values 是各插值表达式的计算结果。
容易被忽略的一点：如果模板字符串没有插值（即无 ${}），values 就是空数组，strings 是长度为 1 的数组 —— 这个边界情况常被误判导致逻辑出错。
