JavaScript模板字面量是ES6引入的用反引号包裹的字符串语法，支持变量插值、多行书写、任意表达式嵌入及标签函数高级功能，提升可读性与安全性。
JavaScript模板字面量（Template Literal）是ES6引入的一种用反引号（`）包裹的字符串语法，它让字符串拼接更直观、更灵活，尤其适合嵌入变量和表达式。
支持变量插值，不用加号或concat
传统字符串拼接需要反复用+连接，容易出错且难读。模板字面量直接用${}插入变量或表达式，JS自动求值并转为字符串。
-
旧写法：
"Hello " + name + ", you are " + age + " years old." -
新写法：
`Hello ${name}, you are ${age} years old.`
可跨行书写，无需换行符转义
反引号内的字符串天然支持多行，缩进和换行符都会被保留，适合写HTML片段或长提示文本。
-
旧写法（需手动加
\n和+）："<div>\n <h2>" + title + "</h2>\n <p>" + content + "</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill5703" title="deep-java-review"><img src="https://img.php.cn/upload/skill/000/000/081/179060057413304.jpg" alt="deep-java-review" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill5703" title="deep-java-review">deep-java-review</a> <p>Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...</p> </div> <a href="/xiazai/skill5703" title="deep-java-review" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>\n</div>" -
新写法（清晰自然）：
`<div>\n <h2>${title}</h2>\n <p>${content}</p>\n</div>`
支持嵌入任意表达式，不止是变量
${}里可以放函数调用、三元运算、甚至简单逻辑，不用提前计算再拼接。
`Price: $${(price * (1 - discount)).toFixed(2)}``Status: ${isActive ? 'Online' : 'Offline'}``Length: ${text?.length || 0}`
可配合标签函数实现高级功能
在反引号前加一个函数名（如html`...`），就能拦截模板内容，做转义、国际化、SQL防注入等处理——这是普通字符串做不到的。
-
safeHtml`<div onclick="${userInput}">Click</div>`（自动过滤危险属性） -
css`color: ${primaryColor}; font-size: ${size}px;`（编译为样式对象）
基本上就这些。模板字面量不复杂但容易忽略它的表达力——从拼接字符串开始，它就在帮你少写bug、多写可读代码。
