模板字符串是解决变量拼接、换行和表达式嵌入问题的ES6+工具，用反引号包裹、${}插入表达式，不支持IE，禁用语句与HTML自动转义。

JavaScript 模板字符串（template literal）不是“更好”的字符串，而是**解决特定问题的工具**：当你需要拼接变量、换行、嵌入表达式时，它比 '' 或 "" 更直接、更安全、更可读。

模板字符串怎么写？基本语法和常见误用

用反引号 ` 包裹，内部可用 ${...} 插入任意表达式。注意：不是单引号或双引号，也不是所有浏览器都默认支持旧版 IE —— template literal 是 ES6+ 特性，IE 完全不支持。

常见误用包括：

• 把 ` 写成中文全角符号（如 `｀`），导致语法错误 Uncaught SyntaxError: Invalid or unexpected token
• 在 ${} 里写语句（如 if、for），实际只允许表达式（a + b、obj?.name、func() 等）
• 以为能自动 HTML 转义——它不会，`${userInput}` 仍可能引发 XSS

为什么不用 + 拼接？性能和可维护性差异

拼接本身没有明显性能瓶颈，但可读性和维护成本差别很大。尤其当字段变多、逻辑嵌套加深时，+ 容易漏空格、漏引号、括号错位。

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

比如这个真实场景：生成带条件 class 的 HTML 片段

`${title}`

换成加号写法：

'' + title + ''

一眼看不出结构，修改 class 名或顺序容易出错。模板字符串天然保留缩进与换行，也更容易提取为函数：

const renderCard = (item) => `${item.title}`;

${} 里能写什么？表达式边界在哪？

${} 中只能放表达式，不能是声明、语句、标签模板调用本身（除非嵌套）。

可以写的例子：

• ${name.toUpperCase()}
• ${items.length > 0 ? items.join(', ') : '—'}
• ${`prefix-${id}`}（支持嵌套模板字符串）
• ${obj?.prop ?? 'default'}（可选链 + 空值合并）

不能写的例子：

• ${let x = 1}（let 是声明，非法）
• ${function() {}}（函数声明不行；箭头函数 ${() => 42} 可以，但通常没必要）
• ${if (x) 'yes'}（if 是语句，必须包在三元或 IIFE 里）

换行和缩进是原生支持的，但要注意空白字符

模板字符串会**完全保留你写的空白符**，包括换行、制表符、空格。这对生成 HTML 或 SQL 很方便，但也容易引入意外空格。

比如：

`

  
First
  
Second
`

开头换行和缩进都会变成字符串的一部分。如果用于 DOM innerHTML，浏览器会忽略首尾空白，但中间缩进可能影响 preformatted 文本或 CSS white-space: pre 渲染。

解决方法：

• 用 .trim() 去首尾空白：`\n hello\n`.trim() → "hello"
• 用 String.raw 避免转义干扰（比如路径或正则）：String.raw`C:\temp\file.txt`
• 多行内容需控制缩进时，可用 .replace(/^ {2}/gm, '') 手动去前导空格

真正难处理的不是语法，而是团队协作中对缩进风格、换行意图、空白语义的一致理解——没人会在 + 拼接里纠结这个，但模板字符串让格式成了接口契约的一部分。

# css  # javascript  # es6  # java  # html  # 浏览器  # 工具  # 解决方法  # 性能瓶颈  # 为什么 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： lovemo网页版地址 lovemo官网手机登录  php嵌入式断网后怎么恢复_php检测网络重连并恢复硬件控制【操作】  Laravel路由Route怎么设置_Laravel基础路由定义与参数传递规则【详解】  Windows驱动无法加载错误解决方法_驱动签名验证失败处理步骤  Win11怎样安装网易有道词典_Win11安装词典教程【步骤】  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  微信小程序 scroll-view组件实现列表页实例代码  浅述节点的创建及常见功能的实现  如何在阿里云虚拟主机上快速搭建个人网站？  Python文件流缓冲机制_IO性能解析【教程】  详解Android中Activity的四大启动模式实验简述  成都品牌网站制作公司,成都营业执照年报网上怎么办理？  如何快速搭建支持数据库操作的智能建站平台？  香港服务器网站测试全流程：性能评估、SEO加载与移动适配优化  详解免费开源的DotNet二维码操作组件ThoughtWorks.QRCode（.NET组件介绍之四）  米侠浏览器网页图片不显示怎么办 米侠图片加载修复  网站制作壁纸教程视频,电脑壁纸网站？  Swift中循环语句中的转移语句 break 和 continue  Laravel怎么发送邮件_Laravel Mail类SMTP配置教程  进行网站优化必须要坚持的四大原则  Laravel如何优化应用性能？（缓存和优化命令）  专业型网站制作公司有哪些,我设计专业的，谁给推荐几个设计师兼职类的网站？  javascript如何操作浏览器历史记录_怎样实现无刷新导航  使用spring连接及操作mongodb3.0实例  教你用AI润色文章，让你的文字表达更专业  如何快速搭建高效WAP手机网站吸引移动用户？  Laravel如何发送系统通知_Laravel Notifications实现多渠道消息通知  如何用PHP快速搭建高效网站？分步指南  HTML5空格和margin有啥区别_空格与外边距的使用场景【说明】  如何快速生成橙子建站落地页链接？  安克发布新款氮化镓充电宝：体积缩小 30%，支持 200W 输出  高性价比服务器租赁——企业级配置与24小时运维服务  html5audio标签播放结束怎么触发事件_onended回调方法【教程】  如何用虚拟主机快速搭建网站？详细步骤解析  Laravel怎么实现前端Toast弹窗提示_Laravel Session闪存数据Flash传递给前端【方法】  微信小程序 五星评分(包括半颗星评分)实例代码  Laravel如何使用Gate和Policy进行权限控制_Laravel权限判定与策略规则配置  儿童网站界面设计图片,中国少年儿童教育网站-怎么去注册？  Laravel怎么配置S3云存储驱动_Laravel集成阿里云OSS或AWS S3存储桶【教程】  HTML透明颜色代码在Angular里怎么设置_Angular透明颜色使用指南【详解】  如何挑选优质建站一级代理提升网站排名？  为什么php本地部署后css不生效_静态资源加载失败修复技巧【技巧】  Android滚轮选择时间控件使用详解  桂林网站制作公司有哪些,桂林马拉松怎么报名？  网站建设整体流程解析，建站其实很容易！  怎样使用JSON进行数据交换_它有什么限制  Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能  高端建站如何打造兼具美学与转化的品牌官网？  如何登录建站主机？访问步骤全解析  Laravel如何使用Laravel Vite编译前端_Laravel10以上版本前端静态资源管理【教程】