模板字符串用反引号包裹，支持多行和${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 = ` `;
- 更干净的做法是把
`放在行首，用.trim()清理首尾空白：const html = ``.trim();Hello
立即学习“Java免费学习笔记（深入）”；
- 或者用带标签的模板字符串（如
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 更稳。
