以前拼字符串像"拿胶带一段段粘"——"你好 " + name + " 今年" + age，还老漏空格。模板字符串用反引号 ` 包起来，${ } 像"插槽"直接把变量塞进去，能换行、能写表达式、还能套娃。
以前用 + 把变量一段段粘进去，现在用 ${ } 直接在字符串里挖个洞放变量。
// 以前：+ 号一个接一个，还容易漏空格
let name = "大喇叭"; // 一个变量
let s = "hello " + name + "!"; // 用 + 把变量粘进去
// 现在：反引号包起来，${} 直接插变量
let s = `hello ${name}!`; // 反引号里挖个 ${} 洞
// ^^^^^^^^
// 挖个洞把 name 塞进去
console.log(s); // 打印拼好的字符串
// hello 大喇叭!
${ } 里不仅能放变量，还能放表达式：`a + b = ${a + b}`、`结果: ${sum(1, 2)}` 都合法——会先算出结果再插进字符串。
以前写 HTML 得每一行末尾加 \n 和 +，像打地鼠；反引号里直接换行，长什么样就长什么样。
// 以前：\n + 号拼到崩溃 let html = "<ul>\n" + // 每行末尾手动加 \n 和 + " <li>大哥</li>\n" + " <li>二哥</li>\n" + "</ul>"; // 现在：反引号里直接换行，所见即所得 let html = ` // 反引号里怎么写就怎么存 <ul> <li>大哥</li> <li>二哥</li> </ul>`;
模板字符串里的换行和缩进会原样保留，渲染到页面上可能多出空行和空格——所以一般末尾配合 .trim 去一下首尾空白。
function sum(a, b) { return a + b; } // 一个求和函数
let s = `结果是: ${sum(1, 2)}`; // ${} 里直接调函数
// ^^^^^^^^^^ 直接调函数，把返回值插进去
console.log(s); // 打印拼好的
// 结果是: 3
渲染列表时，外层模板包整个 <ul>，${ } 里面再用 .map 给每一项生成一个 <li>——模板套模板。
let goods = ["手机", "电脑", "耳机"]; // 一组商品
let html = ` // 外层大模板
<ul>
${goods.map(g => `<li>${g}</li>`).join("")} // map 出每个 li 再拼起来
// ^^^^ 外层 ${} 里再写一个反引号模板，map 出每个 <li>
</ul>`;
${ } 里再写一个反引号，就是嵌套模板。渲染列表、表格行时就是这个套路：外层大模板 + 内层 .map 小模板。
① 可能在什么地方用：拼 HTML 片段、拼提示文案、拼接口 URL 参数、动态生成列表项、日志信息打印。
② 常见的问题：还在用 + 拼字符串导致漏空格；${ } 里忘记写 $ 或花括号；多行模板带进来多余缩进导致前端排版错乱。
③ 解决思路：只要有变量就用反引号 + ${ }；多行模板末尾 .trim；拼列表用 .map(...).join("") 去掉默认逗号。