JavaScript模板字面量必须用反引号包裹,支持变量插值、多行字符串及表达式计算,可配合标签函数实现XSS过滤等高级功能,但需注意缩进空格保留和引号误用问题。

JavaScript 模板字面量(template literals)不是“要不要用”的问题,而是“不用就容易写错、难维护”的现实需求——尤其在拼接多行字符串、嵌入变量或动态表达式时。
模板字面量的基本写法和反引号作用
模板字面量用反引号 ` 包裹,不是单引号或双引号。这是硬性前提,写成 '${name}' 或 "${name}" 都不会触发插值。
常见错误现象:变量没渲染出来,输出就是字面的 ${name} ——八成是用了错的引号。
- 正确:
`Hello ${name}` - 错误:
"Hello ${name}"(纯字符串,不解析) - 错误:
`Hello ${name}` + '!'(混合引号易漏空格或换行)
在模板中嵌入变量和表达式
${...} 里支持任意 JavaScript 表达式,不只是变量名。这比 + 拼接灵活得多,也更安全(自动转字符串,不报 undefined 或 null 错误)。
立即学习“Java免费学习笔记(深入)”;
使用场景:生成 HTML 片段、日志消息、SQL 查询片段(注意防注入)、路径拼接等。
1、对ASP内核代码进行DLL封装,从而大大提高了用户的访问速度和安全性;2、采用后台生成HTML网页的格式,使程序访问速度得到进一步的提升;3、用户可发展下级会员并在下级购买商品时获得差额利润;4、全新模板选择功能;5、后台增加磁盘绑定功能;6、后台增加库存查询功能;7、后台增加财务统计功能;8、后台面值类型批量设定;9、后台财务曲线报表显示;10、完善订单功能;11、对所有传输的字符串进行安全
- 变量:
`User: ${user.name}` - 方法调用:
`Length: ${text.length}` - 三元判断:
`Status: ${isActive ? 'online' : 'offline'}` - 对象属性链(注意空值):
`Email: ${user?.email || 'N/A'}`
多行字符串与缩进处理
反引号天然支持换行,但换行符和缩进空格会原样保留在字符串中——这点常被忽略,导致生成的 HTML 或 JSON 格式错乱。
性能影响小,但可读性和调试成本高:你看到的缩进,就是最终字符串里的空格。
- 直接换行会带空格:
`div class="card" ${title}










