模板字符串是javascript唯一原生支持表达式嵌入、多行书写和结构化插值的字符串语法，用反引号定义，核心价值在于解决拼html、sql、防xss、i18n、日志格式化等真实痛点。
模板字符串不是“更高级的字符串”，而是 JavaScript 中唯一原生支持表达式嵌入、多行书写、结构化插值的字符串语法。它用反引号 ` 定义，核心价值不在“看起来酷”，而在解决真实痛点：拼 HTML、写 SQL、防 XSS、做 i18n、格式化日志——这些场景里，传统字符串拼接极易出错、难维护、不安全。
怎么用 ${} 嵌入表达式，而不是只塞变量？
很多人以为 ${name} 只能放变量，其实里面是完整 JavaScript 表达式执行环境。
- 支持三元运算：
${user.isAdmin ? '? 管理员' : '? 普通用户'} - 支持函数调用：
${new Date().toLocaleDateString()} - 支持解构 + 逗号运算符（避免写多行）：
${({ id, title } = post), `${id}: ${title}`} - 支持空值安全访问：
${user?.profile?.avatar ?? '/default.png'}
⚠️ 注意：不要在 ${} 里写副作用代码（如 fetch() 或修改状态），因为每次字符串求值都会触发——这在 React 渲染或循环中容易引发意外请求或性能问题。
标签模板（Tagged Templates）到底用来干什么？
highlight`Hello ${name}` 这种写法不是语法糖，而是一个可编程接口：函数 highlight 会收到两个参数——strings（静态文本数组）和 values（所有插值结果数组）。这才是它真正强大的地方。
立即学习“Java免费学习笔记（深入）”；
- 防 XSS：用
safeHtml`<div>${userInput}</div>`自动转义动态内容 - CSS-in-JS：
styled.div`color: ${props => props.primary ? 'blue' : 'gray'};` - 国际化：把
i18n`欢迎${name}！`映射到不同语言的翻译表 - SQL 参数化（需配合后端）：
sql`SELECT * FROM users WHERE id = ${userId}`，由标签函数做类型校验和占位符替换
⚠️ 常见坑：标签函数第一个参数是 strings 数组，不是单个字符串；它的 .raw 属性可获取未转义原始内容（比如处理路径、正则模式）。
多行字符串怎么写得干净，又不带多余缩进？
模板字符串天然换行，但缩进空格会被原样保留，直接写成这样会导致 HTML 或 JSON 格式错乱：
`<div><p>Hello</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1461" title="VIVA"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680148246307.png" alt="VIVA" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1461" title="VIVA">VIVA</a>
<p>一个免费的AI创意视觉设计平台</p>
</div>
<a href="/ai/1461" title="VIVA" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div></div>`✅ 正确做法是用 .trim() 或 .replace(/^[\s]+/gm, '') 清理，更推荐封装一个 dedent 工具函数：
function dedent(str) {
const lines = str.split('\n');
const minIndent = Math.min(...lines
.filter(l => l.trim())
.map(l => l.match(/^\s*/)[0].length)
);
return lines.map(l => l.slice(minIndent)).join('\n').trim();
}
<p>const html = dedent`</p><div><h2>${title}</h2><p>${content}</p></div>
`;⚠️ 不要用 String.raw 来解决缩进问题——它只禁用转义，不处理空白；String.raw 的典型用途是写正则字面量或 Windows 路径：String.raw`C:\Users\name\file.js`。
为什么有时候 ${} 里写函数返回 undefined？
常见于忘记返回值，或函数本身没 return：
const getName = () => { console.log('called'); }; // ❌ 没 return，插值结果是 undefined
console.log(`Name: ${getName()}`); // "Name: undefined"也可能是异步函数误用：${asyncFn()} 插入的是 Promise 对象，不是 resolved 值——模板字符串是同步求值机制，不等 await。
- 同步逻辑：确保函数有明确
return - 异步场景：必须提前
await，不能塞进模板字符串里 - 调试技巧：在
${}中临时加console.log会破坏返回值，改用浏览器断点或debugger
真正难的不是记住语法，而是判断该不该用模板字符串——比如生成大量重复 DOM 时，用 map + 模板字符串比手写 for 循环更清晰；但若只是拼两个字段，name + ' - ' + age 更轻量、无额外开销。
