模板字面量是es2015+标准中用反引号`定义的字符串类型，支持嵌入表达式${...}、多行书写、无需转义换行，提升可读性与维护性；还支持带标签的预处理功能。
模板字面量（Template Literal）就是用反引号 ` 包裹的字符串
它不是语法糖，而是 JavaScript 正式标准（ES2015+）中新增的字符串字面量类型。和单引号 '、双引号 " 字符串不同，` 支持嵌入表达式、多行书写、无需转义换行符——这些特性直接解决传统字符串拼接难读、易出错的问题。
用 ${...} 嵌入变量和表达式，替代 + 拼接
这是最常用也最容易提升可读性的点。尤其在拼接多个变量、带逻辑的值或函数调用结果时，${...} 让结构一目了然。
const name = 'Alice';
const age = 28;
const city = 'Shanghai';
<p>// ❌ 旧写法：括号多、空格难对齐、容易漏加号
const msg1 = 'Hello, ' + name + '! You are ' + age + ' years old and live in ' + city + '.';</p><p>// ✅ 新写法：变量位置即语义位置，表达式可直接写
const msg2 = <code>Hello, ${name}! You are ${age} years old and live in ${city}.</code>;
const msg3 = <code>Next year you'll be ${age + 1}.</code>;
const msg4 = <code>Status: ${age >= 18 ? 'adult' : 'minor'}</code>;注意：${...} 里可以是任意 JavaScript 表达式，包括函数调用、对象属性访问、甚至另一个模板字面量——但别嵌套太深，否则反而降低可读性。
多行字符串天然支持，不用 \n 或 + 换行
反引号内的换行会被保留为字符串中的实际换行符，适合生成 HTML 片段、SQL 查询、CLI 提示等需要格式对齐的场景。
立即学习“Java免费学习笔记（深入）”；
- 写 HTML 时不再需要把所有标签挤在一行或手动加
\n - SQL 查询中字段对齐、WHERE 条件分行更清晰
- 错误消息或日志模板可保留缩进，提高人眼扫描效率
const html = `
<div class="user-card"><h2>${name}</h2><p>Age: ${age}</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/10888" title="佳蓝在线销售系统(创业版) 佳蓝在线销售"><img
src="https://img.php.cn/upload/webcode/000/000/005/176420340220798.jpg" alt="佳蓝在线销售系统(创业版) 佳蓝在线销售" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/10888" title="佳蓝在线销售系统(创业版) 佳蓝在线销售">佳蓝在线销售系统(创业版) 佳蓝在线销售</a>
<p>1、对ASP内核代码进行DLL封装，从而大大提高了用户的访问速度和安全性；2、采用后台生成HTML网页的格式，使程序访问速度得到进一步的提升；3、用户可发展下级会员并在下级购买商品时获得差额利润；4、全新模板选择功能；5、后台增加磁盘绑定功能；6、后台增加库存查询功能；7、后台增加财务统计功能；8、后台面值类型批量设定；9、后台财务曲线报表显示；10、完善订单功能；11、对所有传输的字符串进行安全</p>
</div>
<a href="/xiazai/code/10888" title="佳蓝在线销售系统(创业版) 佳蓝在线销售" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p>City: ${city}</p></div>
`;
<p>const query = <code> SELECT id, name, email FROM users WHERE status = 'active' AND created_at > '${new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]}' </code>; ⚠️ 注意：首行和末行的换行会进入字符串。如果不需要开头空行，把 ` 放在行首；如果不需要结尾换行，把 ` 紧贴最后一行内容。
带标签的模板字面量（Tagged Template Literals）能做字符串预处理
在反引号前加一个函数名（如 html`...`），该函数会收到字符串片段数组和插值表达式值作为参数。这是实现 XSS 过滤、国际化、样式插值等高级功能的基础机制。
function sanitize(strings, ...values) {
return strings.reduce((acc, str, i) => {
const value = values[i] ?? '';
return acc + str + String(value).replace(/</g, '<').replace(/>/g, '>');
}, '');
}
<p>const userInput = '<script>alert(1)</script>';
const safeHtml = sanitize<code><div>${userInput}</div></code>; // "<script>alert(1)</script>"常见标签函数有：String.raw（禁用转义）、css（配合 styled-components）、gql（GraphQL 查询）。自己实现标签函数时，务必理解 strings 是静态片段数组，values 是动态插值数组，长度恒为 strings.length - 1。
反引号不是万能胶——它不能自动防 XSS，也不能替代模板引擎的循环/条件语法。真正容易被忽略的是：模板字面量在运行时才求值，若插值表达式有副作用（比如修改状态、发起请求），每次使用都会触发；而静态字符串不会。
