模板字符串用反引号包裹，支持多行和${expression}插值，可嵌入变量、运算、函数调用；需注意空格污染、语法错误及高频拼接性能问题。
JavaScript 模板字符串不是“更高级的引号”，而是专为多行和变量插值设计的语法结构，用反引号 ` 包裹，内部用 ${expression} 嵌入任意表达式——不只是变量。
模板字符串的基本写法和变量嵌入
必须用反引号 `，单引号或双引号都不行；${...} 中可以是变量、函数调用、甚至简单运算，只要返回值能转成字符串即可。
-
const name = "Alice"; console.log(`Hello, ${name}!`);→"Hello, Alice!" -
const x = 2; console.log(`Result: ${x * 3}`);→"Result: 6" -
console.log(`Time: ${new Date().toLocaleTimeString()}`);→ 实时时间字符串
换行和缩进会原样保留，但要注意空格污染
模板字符串天然支持多行，换行符和缩进空格都会成为最终字符串的一部分。这在生成 HTML 或配置文本时很方便，但也容易因误加空格导致意外空白。
- 这样写会多出两行和大量空格：
const html = ` <div><p>Hello</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></a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/766" title="Dora"><img src="https://img.php.cn/upload/ai_manual/000/000/000/175679962280150.png" alt="Dora" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/766" title="Dora">Dora</a> <p>创建令人惊叹的3D动画网站，无需编写一行代码。</p> </div> <a href="/ai/766" title="Dora" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></div> `; - 更干净的做法是把
`放在行首，用.trim()清理首尾空白：const html = `<div> <p>Hello</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>`.trim(); - 或者用带标签的模板字符串（如
String.raw）控制转义，但普通场景不推荐过度复杂化
常见错误：${} 里写错东西或漏掉反引号
最常踩的坑是把模板字符串当普通字符串用，或者在 ${} 里放了未定义变量、异步操作（如 await）却没配合 async 函数。
- ❌
"Hello ${name}"—— 双引号，插值无效，输出字面量"Hello ${name}" - ❌
`${user.name.toUpperCase}`—— 少了括号，返回的是函数本身，不是调用结果 - ❌
`${await fetch(...)}`—— 在非 async 函数中直接写会报语法错误 - ✅ 正确姿势：
async function f() { return `${(await fetch('/api')).status}`; }
真正难的不是语法，是判断什么时候该用模板字符串、什么时候该用 + 或 String.concat()：简单拼接两个变量用模板字符串没问题；高频循环中拼接大量字符串，反而可能因隐式类型转换拖慢性能——这时候老老实实用数组 push + join 更稳。
