ES6模板字符串用反引号包裹，支持多行文本和${}变量插值，可嵌入变量、属性、表达式及函数调用，但需注意反引号不可替换、null/undefined会转为字符串、高频拼接性能较低且不防XSS。
ES6 模板字符串用反引号（`）包裹，天然支持多行文本和变量插值，比传统加号拼接更直观、安全、易维护。
基础写法：用反引号包裹，${}嵌入变量或表达式
必须使用反引号，单引号或双引号内写${}不会生效。变量、属性、运算结果均可直接放入${}中，JS 自动求值并转为字符串：
const name = "小明"; const age = 25; console.log(`姓名：${name}，年龄：${age}`);const user = { id: 1001, city: "杭州" }; console.log(`用户 ${user.id} 来自 ${user.city}`);console.log(`2 + 3 = ${2 + 3}`); // 输出：2 + 3 = 5
轻松实现多行文本，无需\n或+连接
换行符会原样保留在输出中，适合写 HTML 片段、SQL 查询、说明文案等：
const html = `<div class="card"> <h3>${title}</h3> <p>${content}</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill12540" title="javascript-typescript-typescript-scaffold"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="javascript-typescript-typescript-scaffold" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill12540" title="javascript-typescript-typescript-scaffold">javascript-typescript-typescript-scaffold</a> <p>你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型</p> </div> <a href="/xiazai/skill12540" title="javascript-typescript-typescript-scaffold" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <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>`;const sql = `SELECT id, name FROM users WHERE status = 'active' AND created_at > '${startDate}'`;- 注意：缩进空格也会被保留，如需整洁格式可配合字符串 trim 或工具函数处理
在多行中嵌入逻辑与动态内容
模板字符串内部可直接使用三元运算、函数调用、数组方法等，避免提前拼接中间变量：
console.log(`状态：${isActive ? "上线" : "下线"}，已运行 ${days} 天`);const items = ["苹果", "香蕉"]; console.log(`共 ${items.length} 项：${items.join("、")}`);const formatTime = t => new Date(t).toLocaleTimeString(); console.log(`更新时间：${formatTime(Date.now())}`);
注意事项与常见坑点
用得顺手，但几个细节容易忽略：
- 反引号是必须的，误用单/双引号会导致
${}变成普通文本 -
${undefined}或${null}会转成字符串"undefined"或"null"，建议提前判断或用空值合并操作符：${user?.name || "匿名"} - 高频循环拼接（如渲染上千条列表）时，模板字符串每次都会生成新字符串，性能不如先 push 到数组再
.join("") - 拼接 HTML 时，若变量来自用户输入，需自行转义防 XSS，不能依赖模板字符串做安全过滤
