模板字符串是什么？JS中怎么用

模板字符串是ES6（ES2015）引入的革命性原生特性，以反引号（`）包裹，彻底改变了JavaScript中字符串的编写方式——它天然支持多行文本、保留空格缩进、无缝嵌入变量与任意表达式（如${a + b}或${JSON.stringify(obj)}），且无需手动转义换行符或拼接引号；它不是简单的语法糖，而是具备真实语义能力的字符串原生方案，现代浏览器和Node.js 12+均已全面支持；尽管简单拼接在极端场景下略快，但其在可读性、安全性（避免引号冲突）、维护性和高阶应用（如标签函数实现HTML安全渲染、国际化或静态分析）上的优势无可替代，掌握它不仅是写出更干净代码的关键，更是迈向现代JS开发的必经一步。

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

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

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

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

• 空格、缩进、换行全部保留（包括行首空格）
• \` 内部的 \${...} 会立即执行并转为字符串，支持任意表达式，比如 \${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）。

• 推荐显式转换：\${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 是个普通函数，接收字符串数组和插值结果作为参数，这是实现模板安全、国际化、静态分析的基础能力，但日常开发中多数人只用了基础语法就停住了。

好了，本文到此结束，带大家了解了《模板字符串是什么？JS中怎么用》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！