模板字符串是什么_如何在JavaScript中使用【教程】

模板字符串是es6引入的原生多行字符串方案，用反引号`包裹，支持换行、变量插值${}、表达式求值且保留空格缩进；${}内需避免语句和未定义值，推荐显式转换；标签函数是其高阶用法。

模板字符串不是语法糖，是 javaScript 中真正支持多行、嵌入表达式和字符串拼接的原生方案，从 ES6（ES2015）开始可用，所有现代浏览器和 node.js 12+ 均原生支持。

什么是 ` `（反引号）包裹的字符串

用反引号 ` 包裹的内容就是模板字符串，它和单引号 ' '、双引号 " " 字符串本质不同：支持换行、变量插值、表达式求值，且不会自动转义反斜杠（除非是 ${} 或 ` 本身）。

常见错误现象：let str = "line1nline2" 需要手动写 n；而 `line1nline2` 中的换行直接可视、可缩进，更接近真实文本结构。

• 空格、缩进、换行全部保留（包括行首空格）
• ` 内部的 ${...} 会立即执行并转为字符串，支持任意表达式，比如 ${a + b}、${arr.map(x => x * 2)}
• 不能嵌套相同反引号，如 `abc`def` 会报错；需用 `abc${'`'}def` 或转义 `abc``def`

${} 插值表达式怎么写才不出错

${} 是模板字符串中唯一允许执行代码的位置，但它的行为和 console.log() 不同——不自动调用 .toString()，遇到 undefined、NULL、symbol 会直接报错（TypeError: Cannot convert a Symbol value to a string）。

立即学习“Java免费学习笔记（深入）”；

• 推荐显式转换：${String(sym)}、${val ?? ''}、${Array.isArray(arr) ? arr.join(',') : ''}
• 函数调用没问题：${getName()}，但注意副作用（每次模板求值都会执行）
• 对象默认转成 [Object Object]，如需 jsON 格式，写 ${json.stringify(obj)}
• 不要在 ${} 里写语句（如 if、for），只放表达式；复杂逻辑请提前计算好变量

模板字符串 vs String.prototype.concat() / + 拼接

性能上，在现代 V8 引擎中，简单拼接（如 a + b + c）比模板字符串略快；但一旦涉及换行、条件分支或大量变量，模板字符串可读性和维护性碾压加号拼接，且引擎对其做了专门优化（如字符串烘焙、懒编译）。

• 构建 html 片段时，`
  ${content}

  ` 比 '

  ' + content + '

  ' 更安全（避免引号冲突）、更清晰

• 多行日志或 sql 查询建议用模板字符串，但注意：SQL 拼接仍有注入风险，${userInput} 绝对不可信，必须参数化
• 如果需要复用同一组变量生成不同格式字符串（如 xml / JSON / CLI 输出），考虑封装成函数，而非重复写多个模板

最容易被忽略的是标签函数（tagged templates）——比如 html`${x}` 中的 html 是个普通函数，接收字符串数组和插值结果作为参数，这是实现模板安全、国际化、静态分析的基础能力，但日常开发中多数人只用了基础语法就停住了。