模板字符串更安全简洁，支持直接嵌入表达式、多行文本、标签函数扩展；${variable}避免隐式类型转换问题，反引号天然保留换行缩进，且IDE高亮支持更好。
模板字符串比传统字符串拼接更安全、更简洁，尤其适合动态内容插入和结构化文本生成。
为什么 `${variable}` 比 + 拼接更可靠
直接嵌入表达式，无需手动类型转换或担心 undefined / null 被转成字符串字面量：
-
undefined在+拼接中会变成"undefined"，而模板字符串里照常求值，不会隐式污染语义 - 支持任意表达式：
${items.length > 0 ? '有数据' : '空'}，不用提前计算再拼 - 避免深层嵌套引号问题，比如
"<div class='\"item\"'>" + name + "</div>"容易漏转义，而`<div class="item">${name}</div>`无此困扰
多行字符串不需要 + 或 \n 拼接
反引号（`）天然保留换行与空白，适合写 HTML 片段、SQL 查询或带缩进的提示文本：
const sql = `SELECT u.name, COUNT(o.id) FROM users u LEFT JOIN orders o ON u.id = o.user_id GROUP BY u.id`; // 换行、缩进全部保留
- 注意：首尾换行会被包含在字符串中，如需去除，可用
.trim() - 不能用普通单/双引号换行，否则语法错误；也不能混用引号类型嵌套（如
"${`inner`}"合法，但"${"inner"}"报错） - IDE 通常对反引号内插值有高亮支持，可快速识别变量作用域
标签函数让模板字符串可扩展
在模板字符串前加函数名（如 html`<div>${x}</div>`），就能拦截原始字符串和插值参数，实现转义、国际化、静态分析等逻辑：
立即学习“Java免费学习笔记（深入）”；
function safeHTML(strings, ...values) {
return strings.reduce((acc, str, i) => {
const val = values[i] ?? '';
return acc + str + String(val).replace(/&/g, '&').replace(/</g, '<');
}, '');
}
const name = '<script>alert(1)</script>';
console.log(safeHTML`<p>Hello ${name}!</p>`); // <script> 被转义
- 第一个参数
strings是只读的原始字符串数组（含换行、空格），不是最终拼好的字符串 - 后续参数是每个插值表达式的运行结果，顺序与
${}出现位置严格对应 - 常见标签函数：Node.js 的
sql（防 SQL 注入）、前端的css（样式作用域隔离）、html（XSS 防御）
真正难的不是写对 ${}，而是理解标签函数里 strings 和 values 的分离机制——它让模板从“单纯占位”变成可编程的文本处理入口，这点容易被忽略。
