模板字符串是我这些年做 JavaScript 技术面试时几乎必问的基础点也是很多工作两三年的同学最容易“以为自己会了”的语法糖。很多人知道反引号可以拼接字符串但问到${}里到底能放什么、带标签的模板字符串有什么用、模板字符串里输出反引号该怎么处理能答清楚的人其实不多。这篇文章就把模板字符串从语法、原理到实战里的坑一次讲透后面还附了我这些年写代码沉淀下来的排查经验。不论你是刚入门前端的新手还是想系统梳理基础的老手都值得认真看一遍。1. 模板字符串到底解决了什么传统拼接的三大痛点1.1 传统字符串拼接的三座大山先回忆一下没有模板字符串的日子是怎么写代码的。最典型的是拼 HTML 片段变量一多单引号双引号就开始打架var name 张三; var age 28; var html div classuser-card h2 name /h2 p年龄 age /p /div;这段代码光是引号嵌套就让人头大。如果 HTML 属性里还要用双引号或者文本里本身就有引号转义符号\和\能把人绕晕。更麻烦的是多行文本。传统写法里想要输出换行要么手动拼\n要么用\续行但\续行会把换行符本身吃掉输出结果里根本没有真正的换行还得另想办法。再一个痛点是可读性。变量多的时候整个字符串像串珠子一样一段文字里混着无数个和引号逻辑稍微复杂一点人眼根本没法快速看出最终输出长什么样。String 的concat()方法能解决一部分拼接问题但并没有从根本上解决“变量和文本混在一起”的可读性难题。这三座大山——转义地狱、多行困难、拼接混乱就是我们最初需要模板字符串的原因。1.2 反引号与 ${} 插值5分钟就能上手的写法ES6 引入的模板字符串用的不是单引号也不是双引号而是反引号键盘左上角的那个键一般在 Esc 下面数字 1 左边。基本语法非常简单const name 张三; const age 28; const html div classuser-card h2${name}/h2 p年龄${age}/p /div ;这里面有三个关键变化。第一字符串被反引号包裹内部不再需要为了区分引号而疯狂转义。第二变量用${}包起来直接嵌在文本里顺序和结构一目了然。第三换行是真实存在的模板字符串里的换行会被原样保留输出一个多行字符串从苦差事变成了顺理成章的事。我再强调一遍${}里放的不仅仅是变量名它可以是任意 JavaScript 表达式。比如直接写${age 1}、写三元判断${age 18 ? 成年 : 未成年}、甚至调用函数${formatDate(date)}完全没有问题。这一点是很多人刚开始用模板字符串时会忽略的但它恰恰是模板字符串最强大的地方之一。2. 模板字符串的进阶玩法从简单替换到动态逻辑2.1 ${} 里到底能写什么表达式与语句的分界线新手最容易踩的第一个坑就是在${}里写 JavaScript 语句比如if、for、const这类结果直接报错。这是因为模板字符串的插值语法只接受表达式expression不接受语句statement。表达式是“有值的东西”比如1 2、getName()、a b ? a : b语句是“做事情的动作”比如if分支、for循环、const声明它们本身没有值所以不能放进插值里。那如果确实需要条件判断怎么办最常用的方案是用三元表达式取代if// 不行 const str 判断结果${if (a b) { return a大; }}; // 可以 const str 判断结果${a b ? a大 : b大};如果需要更复杂的逻辑推荐两种做法。第一种是把逻辑提到模板字符串外面先用普通 JavaScript 算出结果再放进${}里。第二种是用 IIFE立即调用函数表达式在插值内部执行一段逻辑const result ${(() { if (a b) return a大; if (a b) return b大; return 相等; })()};这两种方式在我实际写代码时都很常用。第一种更好读第二种适合逻辑不长又确实想写在模板里的场景。记住这个核心区别模板字符串是“求值”的容器不是“执行语句”的地方。2.2 嵌套模板${} 里再套一层反引号嵌套是模板字符串里非常实用但也容易写乱的技巧。它的场景很典型在生成动态列表的时候外层是循环生成的多个列表项内层列表项里还要再拼动态文本。我以前写过类似这样的代码const users [ { name: 张三, age: 28 }, { name: 李四, age: 24 } ]; const list ul ${users.map(user li span姓名${user.name}/span span年龄${user.age}/span /li ).join()} /ul ;这段代码里外层模板字符串的插值区域放入了一个map调用而map的回调函数里又返回了一个新的模板字符串。模板字符串里再套模板字符串这就是嵌套。它能让你在生成结构化文本比如 HTML、SQL、配置文件时保持非常清晰的层级关系。嵌套时最容易出问题的点是周围的反引号太多容易混淆哪个反引号和哪个反引号配对。我个人的经验是如果嵌套超过两层就把它拆成函数。比如把生成单个列表项的逻辑单独抽一个函数然后在map里调用这个函数比直接写深层嵌套模板要清爽得多。可维护性和可读性永远优先于炫技。2.3 多行字符串的缩进与空白陷阱模板字符串支持多行听起来很爽但有一个隐蔽的坑字符串里会原样保留行首的缩进和行尾的换行。比如我前面写的那个 HTML 模板如果用console.log(list)打印出来你会在输出里看到大量和代码缩进一致的空格。这在拼接 HTML 时问题不大因为浏览器会忽略 HTML 里的多余空白但如果你想用它生成 JSON、日志或者 SQL这些多余的空格和换行就会成为捣乱的元凶。处理方式通常有两种。第一种是调用trim()方法把首尾的多余换行和空格去掉const config { name: test, port: 8080 } .trim();第二种是在写模板的时候故意把首尾标签和反引号放在同一行的边缘位置用代码缩进换行然后统一用.trim()清理。我自己的习惯是先保证代码结构清晰一个模板字符串该缩进就缩进反正最后用工具函数统一清理空白。项目里如果有大量这类模板可以封装一个dedent函数来处理。这种“代码整洁优先运行时再清理”的思路比一边写一边担心空白要省心得多。3. 带标签的模板字符串一个容易被忽略的大杀器3.1 标签函数是如何工作的strings 数组与 values 数组大部分教程讲到嵌套模板和String.raw就停了但真正拉开水平差距的知识点是带标签的模板字符串Tagged Templates。它的语法看起来很奇怪在模板字符串前面放一个函数名函数会被自动调用并且收到拆好的参数。function myTag(strings, ...values) { console.log(strings); // [Hello , !] console.log(values); // [world] } const name world; myTagHello ${name}!;这里的关键是理解参数结构strings是一个字符串数组它把模板字符串里的文本部分按插值位置拆成了多段values是插值表达式的计算结果数组。如果模板字符串里没有任何插值那么strings数组就只有一个元素values是空数组。如果有 n 个插值strings数组的长度一定是 n 1values的长度是 n。为什么要关注这个特性因为它给了你拦截和处理模板字符串内容的能力。普通模板字符串只会机械地做“文本 值”的拼接但标签函数可以在拼接前、拼接后、甚至完全不拼接对内容做任意变换。这就是标签模板能够实现很多高级封装的根本原因。3.2 用标签模板做安全过滤与风格化输出标签模板最经典的实战场景之一是内容安全过滤。假设你渲染一段用户输入的内容直接插入 HTML 很容易被注入恶意脚本。标签模板可以在这个环节做一个转义拦截把危险字符转成安全实体function escapeHtml(strings, ...values) { const escape (str) String(str) .replace(//g, amp;) .replace(//g, lt;) .replace(//g, gt;) .replace(//g, quot;) .replace(//g, #39;); return strings.reduce((result, str, i) { return result str (i values.length ? escape(values[i]) : ); }, ); } const userInput scriptalert(xss)/script; const html escapeHtmldiv${userInput}/div; // 输出divlt;scriptgt;alert(xss)lt;/scriptgt;/div另一个常见场景是风格化输出。比如在终端或者日志系统里用标签模板自动给数字加颜色、给负数加括号、给时间戳加格式。你只需要在标签函数里对values做针对性的处理文本部分保持原样返回即可。这样封装出来的 API 非常自然调用方看起来就是在写普通的模板字符串但产出是处理过的效果。我曾经用标签模板做过一个小型 SQL 参数化工具大致思路是识别${}里的值自动替换成占位符并把值收集到数组里交给底层的数据库驱动处理。核心代码不超过 30 行但调用体验非常好既保留了 SQL 的可读性又避免了字符串拼接注入风险。4. 实战案例模板字符串在真实项目里的高频用法4.1 构建 HTML 片段从手拼字符串到组件化函数前端开发者最常遇到的就是拼 HTML。早年必须用号拼接现在有了模板字符串写起来舒服太多了。但舒服归舒服我用下来最大的感悟是模板字符串适合“一次性生成静态结构”如果同一个结构要反复渲染就应该封装成函数。const renderUserCard (user) div classcard img src${user.avatar} alt${user.name} / h3${user.name}/h3 p${user.bio || 这个人很懒什么都没写}/p /div ; const users [userA, userB, userC]; const list users.map(renderUserCard).join();用map加join()处理数组渲染是模板字符串时代的标准姿势。有人会问为什么不用map直接返回数组然后让框架自动处理因为纯 JavaScript 环境下数组不会自动变成字符串join()的参数必须是空的否则数组项之间会多出逗号渲染出多余的文本。4.2 拼接 URL 与查询参数别忘了 encodeURIComponent模板字符串用来拼 URL 看起来很直观但有个特别容易出的 bug。假设要拼一个搜索地址const keyword 前端开发; const url https://example.com/search?q${keyword};表面上没问题可一旦关键字里出现、#、?、空格这些字符生成的 URL 就可能是错的甚至会造成参数注入。正确做法是先把参数用encodeURIComponent处理再放进模板字符串const url https://example.com/search?q${encodeURIComponent(keyword)};这条经验可以说是我做项目时踩过的比较典型的坑。别迷信模板字符串能解决一切动态拼串问题它只是一个字符串生成工具数据本身的合法性和安全性仍然需要你自己把关。凡是拼 URL、拼 SQL、拼 HTML 这类的输出都要养成“先处理数据再交给模板”的习惯。4.3 日志与错误信息格式化的标准姿势模板字符串也非常适合做日志输出。以前我见过很多人用console.log(用户 name 登录时间 time)这种方式写日志信息一多根本分不清哪个值对应哪个字段。用模板字符串可以写成console.log([${new Date().toISOString()}] 用户登录成功 用户ID${userId} 用户名${userName} 耗时${elapsed}ms);带标签模板在这里还能加强。我希望每条日志都自动加时间戳和级别于是写了一个log函数配合带标签模板使用之后调用方只需要写log用户 ${name} 执行了操作 ${action};输出的日志自动带了时间戳并且会统一格式。这种方式比写一堆console.log前缀要优雅得多核心逻辑也只有一个函数后续调整格式只需要改这一个函数。4.4 模板字符串在框架模板语法中的影子你可能没有意识到很多现代前端框架的模板语法核心思路都和模板字符串有关联。比如 Vue 的插值语法{{ }}、小程序里的{{ }}它们在编译阶段做的事情本质上就是把数据填充进模板文本。理解模板字符串的“模板 数据”模式会让你在学习框架时更快抓住本质。当然框架模板比原生模板字符串复杂得多有响应式、指令、虚拟 DOM 等机制。但如果基础扎实遇到问题你能知道框架在背后做了什么就不会一头雾水。这也是我反复强调要把原生 JavaScript 基础打牢的原因框架会换语言基础永远在那里。5. 高频踩坑与排查技巧模板字符串避坑指南5.1 反引号和 ${} 的转义与嵌套陷阱模板字符串里输出反引号需要转义用\ 表示。如果模板里包含${但不想让它被识别成插值需要写成${。这两个是最基础但最高频的转义点。我见过有人想在模板里输出一段带有${...}的代码示例文本结果被 JS 引擎当成了真实插值导致页面上出现大大的undefined。解决办法我一般推荐两种。第一种是转义明确告诉引擎这里是普通文本const code 我是普通文本\${name};第二种是如果转义字符太多可以把模板拆开先定义变量再拼接。比如想要输出的是${name}这样的格式可以直接写成const prefix ${; const output ${prefix}name};嵌套模板的时候反引号配对问题也很常见。代码一多很多人数不清到底哪两个反引号是一对。我的经验是任何超过两层的嵌套模板一律抽成函数或变量。代码的可读性永远比少写几行重要。5.2 多行字符串输出多出空行、缩进怎么快速处理用模板字符串生成 JSON 或 SQL 时最容易出现的问题就是输出结果里有一堆空行和空格。排查思路分两步先打印原始模板字符串看看换行和缩进具体长什么样再决定是彻底改写法还是用工具函数统一清理。一个比较实用的技巧是配合数组的map和join来生成分段文本替代无脑的大段多行模板。比如你想输出一个多行 SQL每一行是独立的、经过计算的片段那就用数组收集每一行最后join(\n)。这样既不会有多余缩进又能保留清晰的代码结构。5.3 模板字符串的性能和内存真的有问题吗很久以前网上有说法认为字符串拼接比模板字符串性能更好这个说法到现在已经基本不成立了。现代 JavaScript 引擎对模板字符串做了大量优化频繁创建字符串的时候模板字符串的性能表现并不差。我在项目里做过简单的基准测试数据量小的场景两者几乎没有差别数据量大到百万级时差异也和日常业务无关。真正值得关注的是不要在一个大循环里用模板字符串拼接几千条数据然后一次性插入 DOM更合理的做法是分批渲染或用文档碎片。这是渲染层面的性能优化不是模板字符串本身的问题。我建议你在项目里放心用模板字符串但要注意整体渲染设计比如用DocumentFragment、虚拟滚动之类的手段来解决大规模渲染问题。5.4 运行时动态生成模板结构时要特别注意什么有人会想当然地认为模板字符串是不是可以像后端模板引擎一样在运行时接收一个模板字符串变量然后动态编译执行比如const template 用户${name}; const name 张三; const result eval( template );这种做法非常危险eval执行任意代码带来的安全风险远大于便利。如果你真的需要“运行时模板”正确姿势是使用函数把模板逻辑写在函数内部需要什么参数就传什么参数使用带标签模板让标签函数管理数据到文本的转换使用现成的模板引擎比如Handlebars、EJS、lodash.template它们都有安全机制和缓存策略。我在实际项目中就见过有人用eval拼接模板结果线上环境被注入了一段恶意表达式导致页面崩溃。后来我把所有动态模板都改成了函数形式逻辑清晰了安全隐患也没了。如果你想走得更远可以去研究一下如何自己实现一个二十行代码的迷你模板引擎核心思路就是“解析模板语法 生成函数”理解了那个过程你才算是真正驾驭了模板字符串。最后再说一个我自己的体会模板字符串这张语法糖看起来简单但真正要用好靠的是对表达式、标签函数、转义规则还有运行时数据的理解。反引号不等于安全模板字符串也不等于可以偷懒。不管怎么拼字符串先把数据处理好把转义写对把逻辑抽清楚这三件事做到位你在实际项目中基本就不会再因为字符串拼接翻车。如果这篇文章讲到的某个点正好解决了你心里的疑问那才说明你是在认真学这个东西。
