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

模板字符串不是语法糖,是 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)。
动态WEB网站中的PHP和MySQL详细反映实际程序的需求,仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法,让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能,对常用的、强大的包
立即学习“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 是个普通函数,接收字符串数组和插值结果作为参数,这是实现模板安全、国际化、静态分析的基础能力,但日常开发中多数人只用了基础语法就停住了。









