模板字符串是es6为多行文本、变量插值和表达式嵌入设计的语法补充，须用反引号包裹，支持换行、空格及${}内任意javascript表达式，但不支持变量声明或if语句；兼容ie需转译，注意隐形空白问题。
JavaScript 模板字符串不是“更好”的字符串，而是为特定场景设计的语法补充：它解决的是多行文本、变量插值和表达式嵌入的硬需求，普通字符串在这些地方要么写法冗长，要么根本做不到。
模板字符串怎么写？` 反引号是关键
必须用反引号 ` 包裹，不是单引号或双引号。里面可以自由换行、写空格，也能直接嵌入变量和表达式。
常见错误是复制粘贴时混入中文符号，或者误用成 ' 或 " —— 这样就只是普通字符串，${...} 会被当字面量输出，不会执行。
示例：
立即学习“Java免费学习笔记（深入）”；
const name = 'Alice';
const age = 28;
const msg = `Hello, ${name}.
You are ${age} years old.
Result: ${age > 18 ? 'adult' : 'minor'}`;上面会正确换行并计算条件表达式；换成双引号就会报错或显示原始 ${...} 文本。
${...} 里能放什么？不只是变量名
花括号内是 JavaScript 表达式，不是模板语法专属功能，而是直接运行在当前作用域的代码片段。
- 可以是变量：
${count} - 可以是函数调用：
${getDate()} - 可以是对象属性访问：
${user.profile.name} - 可以是数组索引：
${list[0]} - 甚至可以是带副作用的语句（不推荐）：
${console.log('side effect')}
注意：不能在里面声明变量（如 ${let x = 1}）、不能写 if 语句（但可用三元运算符替代），也不能用 return。
为什么不用 + 拼接或 String.prototype.concat()？
拼接在简单场景下没问题，但一旦涉及多层嵌套、条件分支或换行，可读性和维护性断崖式下降。
比如动态生成 HTML 片段：
// 拼接写法（难读、易错、难调试）
const html = '<div class="' + cls + '">' +
'<h3>' + title + '</h3>' +
'<p>' + (desc || 'No description') + '</p>' +
'</div>';
<p>// 模板字符串（结构清晰，逻辑一目了然）
const html = `<div class="${cls}"></p><h3>${title}</h3><p>${desc || 'No description'}</p></div>`;另外，模板字符串支持“标签函数”（tagged templates），这是拼接完全无法实现的能力——比如做 SQL 转义、国际化、静态分析等，html`<div>${x}</div>` 中的 html 是个函数，能拦截原始字符串和插值参数分别处理。
兼容性和性能要注意什么？
模板字符串是 ES6（ES2015）特性，IE 完全不支持，Node.js 4+ 开始支持。如果项目需兼容老环境，得靠 Babel 转译，但转译后会失去原生多行能力（变成带 \n 的单行字符串）。
性能上，现代引擎对模板字符串优化得很好，和拼接差距极小；但过度嵌套复杂表达式（如深层循环、大量正则匹配）会影响首屏渲染速度，这点常被忽略。
真正容易出问题的是“隐形换行”：模板字符串保留所有空白符，包括缩进空格和回车。如果写成：
const sql = `SELECT *
FROM users
WHERE id = ${id}`;那生成的 SQL 会包含前导空格，某些数据库驱动或 ORM 会报语法错误。解决方案是手动 trim，或用标签函数剥离缩进。
