0

0

如何理解javascript中的模板字面量?【教程】

夜晨

夜晨

发布时间:2026-02-01 17:47:13

|

649人浏览过

|

来源于php中文网

原创

模板字面量是JavaScript中唯一支持多行、表达式嵌入、标签函数和原始字符串解析的字符串构造机制,必须用反引号定义,支持运行时表达式求值、标签函数拦截及String.raw原始解析。

如何理解javascript中的模板字面量?【教程】

模板字面量不是“更高级的字符串拼接语法糖”,它是 JavaScript 中唯一能天然支持多行、表达式嵌入、标签函数和原始字符串解析的字符串构造机制。

模板字面量必须用反引号 `,不能用单引号或双引号

这是最常踩的坑:把 `Hello ${name}` 写成 'Hello ${name}'"Hello ${name}" —— 后两者完全不会解析 ${...},只会原样输出文字。反引号是硬性要求,没有例外。

  • 合法:`line1\nline2`(换行会被保留)
  • 非法:"line1\nline2"(虽然也能换行,但无法嵌入表达式)
  • 注意:\` 是转义反引号,\${ 会阻止插值(变成字面量 ${

${...} 里可以放任意表达式,不只是变量

它不是“变量占位符”,而是运行时求值的表达式容器。括号内写什么,就执行什么。

  • 支持函数调用:`Sum: ${add(2, 3)}`
  • 支持对象属性访问:`Name: ${user?.name ?? 'Anonymous'}`
  • 支持模板嵌套:`Outer: ${`Inner: ${42}`}`
  • 注意:若表达式抛错(如 undefined.name),整个模板求值失败,报 TypeError

标签函数让模板字面量脱离“拼字符串”用途

在反引号前加一个函数名(如 html`

${text}
`),就触发标签函数机制:JavaScript 会把模板拆成静态字符串数组和动态表达式值,交由你自定义处理。

易通cmseasy免费的企业建站程序2.0 UTF-8 build 201000510 中文版
易通cmseasy免费的企业建站程序2.0 UTF-8 build 201000510 中文版

易通(企业网站管理系统)是一款小巧,高效,人性化的企业建站程序.易通企业网站程序是国内首款免费提供模板的企业网站系统.§ 简约的界面及小巧的体积:后台菜单完全可以修改成自己最需要最高效的形式;大部分操作都集中在下拉列表框中,以节省更多版面来显示更有价值的数据;数据的显示以Javascript数组类型来输出,减少数据的传输量,加快传输速度。 § 灵活的模板标签及模

下载

立即学习Java免费学习笔记(深入)”;

  • 函数接收的第一个参数是字符串数组(strings),后续是每个 ${...} 的值
  • 常见用途:HTML 转义(safeHtml)、国际化(msg`Hello ${name}`)、SQL 参数化(防注入)
  • 关键点:标签函数不改变模板字面量本身,只是拦截并重定义它的解释方式

真正容易被忽略的是原始字符串访问能力:String.raw`\\n` 返回 "\\n" 而非换行符;而直接用 `\\n` 仍会转义。这在正则、路径、SQL 字符串中至关重要——不是所有场景都需要运行时插值,有些只需要结构化字面量本身。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
数据分析工具有哪些
数据分析工具有哪些

数据分析工具有Excel、SQL、Python、R、Tableau、Power BI、SAS、SPSS和MATLAB等。详细介绍:1、Excel,具有强大的计算和数据处理功能;2、SQL,可以进行数据查询、过滤、排序、聚合等操作;3、Python,拥有丰富的数据分析库;4、R,拥有丰富的统计分析库和图形库;5、Tableau,提供了直观易用的用户界面等等。

771

2023.10.12

SQL中distinct的用法
SQL中distinct的用法

SQL中distinct的语法是“SELECT DISTINCT column1, column2,...,FROM table_name;”。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

329

2023.10.27

SQL中months_between使用方法
SQL中months_between使用方法

在SQL中,MONTHS_BETWEEN 是一个常见的函数,用于计算两个日期之间的月份差。想了解更多SQL的相关内容,可以阅读本专题下面的文章。

350

2024.02.23

SQL出现5120错误解决方法
SQL出现5120错误解决方法

SQL Server错误5120是由于没有足够的权限来访问或操作指定的数据库或文件引起的。想了解更多sql错误的相关内容,可以阅读本专题下面的文章。

1324

2024.03.06

sql procedure语法错误解决方法
sql procedure语法错误解决方法

sql procedure语法错误解决办法:1、仔细检查错误消息;2、检查语法规则;3、检查括号和引号;4、检查变量和参数;5、检查关键字和函数;6、逐步调试;7、参考文档和示例。想了解更多语法错误的相关内容,可以阅读本专题下面的文章。

362

2024.03.06

oracle数据库运行sql方法
oracle数据库运行sql方法

运行sql步骤包括:打开sql plus工具并连接到数据库。在提示符下输入sql语句。按enter键运行该语句。查看结果,错误消息或退出sql plus。想了解更多oracle数据库的相关内容,可以阅读本专题下面的文章。

901

2024.04.07

sql中where的含义
sql中where的含义

sql中where子句用于从表中过滤数据,它基于指定条件选择特定的行。想了解更多where的相关内容,可以阅读本专题下面的文章。

581

2024.04.29

sql中删除表的语句是什么
sql中删除表的语句是什么

sql中用于删除表的语句是drop table。语法为drop table table_name;该语句将永久删除指定表的表和数据。想了解更多sql的相关内容,可以阅读本专题下面的文章。

425

2024.04.29

go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

30

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号