位置: 编程技术 - 正文

详解JavaScript ES6中的模板字符串

编辑:rootadmin

推荐整理分享详解JavaScript ES6中的模板字符串,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

在 ES6 中引入了一种新的字符串字面量 — 模板字符串,除了使用反引号 (`) 表示,它们看上去和普通的字符串没有什么区别。在最简单的情况下,他们就是普通的字符串:

之所以被称为模板字符串,是因为模板字符串为 JS 引入了简单的字符串插值特性,也就是说,可以方便优雅地将 JS 的值插入到字符串中。

很多地方可以用到模板字符串,看下面这个不起眼的错误提示消息:

上面代码中,${user.name} 和 ${action} 被称为模板占位符,JavaScript 将把 user.name和 action 的值分别插到对应的位置上,然后生成像这样 “User jorendorff is not authorized to do hockey.” 的字符串。

现在,我们看到了一个比 + 运算符更优雅的语法,下面是一些你期待的特性:

模板占位符可以是任何 JavaScript 表达式,所以函数调用和四则运算等都是合法的。(甚至你还可以在一个模板字符串中嵌套另一个模板字符串。) 如果一个值不是字符串,它将被转换为字符串。例如,如果 action 是一个对象,那么该对象的 .toString() 将被调用,来将其转换为字符串。 如果你想在模板字符串中使用反引号,你需要使用反斜杠 将其转义。 同样地,如果想在模板字符串中输出 ${,也需要使用反斜杠将其转义:${ 或 ${。 模板字符串可以跨越多行:

模板字符串中所有的空格、换行和缩进,都将被原样输出到结果字符串中。

下面我们来看看模板字符串做不到的事情:

不会自动转义特殊字符,为了避免跨站脚本漏洞,你还是需要小心对待不可信的数据,这一点上与普通字符串一样。 不能与国际化库配合使用,不处理特殊语言格式的数字、日期等。 不是模板引擎(比如 Mustache 或 Nunjucks)的替代品。模板字符串没有处理循环的语法 — 不能通过一个数组构建出一个表格(table)。

为了解决这些限制,ES6 为开发者和库设计者提供了另一种模板字符串 — 标签模板。

标签模板的语法很简单,只需要在开始的反引号前引入一个标签。看第一个例子:SaferHTML,我们要使用这个标签模板来解决上述的第一个限制:自动转义特殊字符。

需要注意的是,SaferHTML 方法并不是 ES6 标准库提供的,我们需要自己来实现:

这里的 SaferHTML 标签是单个标识符,标签也可以是属性,比如 SaferHTML.escape,甚至还可以是方法调用:SaferHTML.escape({unicodeControlCharacters: false})。准确地说,任何 ES6 的成员表达式或调用表达式都可以作为标签。

详解JavaScript ES6中的模板字符串

可以看出,模板字符串仅仅是字符串连接的语法糖,而标签模板确是一个完全不同的东西:函数调用。

所以,上面代码等价于:

其中 templateData 是一个不可变的字符串数组,由 JS 引擎基于源模板字符串生成,这里的数组含有两个元素,因为模板字符串被占位符分隔后含有两个字符串,因此,templateData 将是这样: Object.freeze(["<p>", " has sent you a bonk.</p>"]

(事实上,templateData 上还有另一个属性:templateData.raw,本文并深入不讨论该属性。该属性的值也是一个数组,包含了标签模板中所有的字符串部分,但字符串中包含了转义序列,看上去更像源代码中的字符串,比如 n。ES6 的内置标签 String.raw 将使用这些字符串。)

这就使得 SaferHTML 方法可以随意解析这两个字符串,存在 N 中替换方式。

在继续阅读钱,你可能在苦苦思索如何实现 SaferHTML 方法。

下面是一种实现(gist):

有了上面的方法,即使使用一个恶意的用户名,用户也是安全的。

一个简单的例子并不足以说明标签模板的灵活性,让我们重温一下上面列举的模板字符串的限制,看看我们还可以做些什么。

模板字符串不会自动转义特殊字符,但是我们可以通过标签模板来解决这个问题,事实上我们还可以将 SaferHTML 这个方法写的更好。从安全角度来看,这个 SaferHTML 非常脆弱。在 HTML 中,不同的地方需要用不同的方式去转义,SaferHTML 并没有做到。稍加思考,我们就可以实现一个更加灵活的 SaferHTML方法,能够将 templateData 中的任何一个 HTML 转义,知道哪个占位符是纯 HTML;哪个是元素的属性,从而需要对 ' 和 " 转义;哪个是 URL 的 query 字符串,从而需要用 URL 的 escaping 方法,而不是 HTML 的 escaping;等等。这似乎有些牵强,因为 HTML 转义效率比较低。辛运是的,标签模板的字符串是保持不变的,SaferHTML 可以缓存已经转义过的字符串,从而提高效率。 模板字符串并没有内置的国际化特性,但通过标签模板,我们可以添加该特性。Jack Hsu 的文章详细介绍了实现过程,看下面例子:

上面例子中的 name 和 amount 很好理解,将被 JS 引擎替换为对应的字符串,但是还有一个没有见过的占位符::c(CAD),这将被 in 标签处理,从 in 的文档可知::c(CAD)表示 amount 是加拿大美元货币值。

模板字符串不能替代 Mustache 和 Nunjucks 这类模板引擎,部分原因在于模板字符串不支持循环和条件语句。我们可以编写一个标签来实现这类功能:

灵活性还不止于此,需要注意的是,标签函数的参数不会自动转换为字符串,参数可以是任何类型,返回值也一样。标签模板甚至可以不需要字符串,你可以使用自定义标签来创建正则表达式、DOM 树、图片、代表整个异步进程的 Promise、JS 数据结构、GL 着色器…

标签模板允许库设计者创建强大的领域特定语言。这些语言可能看上去并不像 JS,但他们可以无缝嵌入到 JS 中,并且可以与语言的其余部分进行交互。顺便说一下,我还没有在其他语言中见过类似的特性,我不知道这个特性讲给我们带来些什么,但各种可能性还是非常令人兴奋的。

详解JavaScript ES6中的Generator 今天讨论的新特性让我非常兴奋,因为这个特性是ES6中最神奇的特性。这里的神奇意味着什么呢?对于初学者来说,该特性与以往的JS完全不同,甚至有

深入了解JavaScript中的Symbol的使用方法 Symbol是什么?Symbols不是图标,也不是指在代码中可以使用小图片:也不是指代其他一些东西的语法。那么,Symbol到究竟是什么呢?七种数据类型JavaScript

深入理解JavaScript中的箭头函数 从一开始箭头就是JavaScript的一部分,在第一个JavaScript中就建议将内联的脚本代码包裹在HTML的注释中,这可以防止那些不支持JavaScript的浏览器错误滴将

标签: 详解JavaScript ES6中的模板字符串

本文链接地址:https://www.jiuchutong.com/biancheng/377569.html 转载请保留说明!

上一篇:深入学习JavaScript中的Rest参数和参数默认值(深入学习习总书记系列讲话精神)

下一篇:详解JavaScript ES6中的Generator

  • 什么是明细分类账簿
  • 企业所得税的成本是含税还是不含税
  • 社保计入主营业务成本
  • 进项税额转出结平分录怎么写
  • 快递费未支付应该寄走了吗
  • 企业亏损法定盈亏是什么
  • 不得抵扣的进项税额转出会计分录
  • 股权出让需要交税吗
  • 结转本月收入类账户到本年利润会计分录
  • 预告登记与备案的区别
  • 货币资金核算的调查报告
  • 无形资产特许权使用费怎么做账
  • 固定资产退回账务处理规定
  • 公司股权转移怎么办理
  • 制作费计入什么会计科目
  • 国家税务总局关于取消增值税扣税凭证
  • 可以选择用简易计算办法计税的是哪些
  • 原始凭证分割单可以税前扣除吗
  • 递延所得税资产怎么计算
  • 怎么查询公司有没有开社保户
  • 零申报资产总额填注册资本怎么办呢
  • 租赁机器的支出怎么算
  • 华为折叠手机mateXs
  • 危险废物处置是冶金行业吗
  • 税负率的计算方法公式
  • 债权债务重组公司
  • 外贸出口企业退税计算
  • 税收保全措施的期限一般不超过几个月
  • ds file是干什么的
  • 短期借款转长期借款利息
  • Escarpment Trail in Porcupine Mountains Wilderness State Park, Michigan (© Pat & Chuck Blackley/Alamy)
  • yolov5 workers
  • auto learn
  • php怎么将数据库中的数据显示出来
  • yolov5训练中途停止了怎么办
  • 保姆级教程什么意思
  • hostnamectl命令可以永久修改主机名
  • 补缴企业所得税的计算公式
  • 应收账款周转率多少合适
  • 基本生产成本和辅助生产成本区别
  • 个人所得税汇算清缴时间
  • 织梦如何添加浮动广告
  • 对公账户分类及区别
  • 核销坏账递延资产怎么算
  • 银行开出的发票可以进行税抵扣吗?
  • 结转销售成本的凭证需要附件吗
  • 豆制品属于农副产品吗为什么
  • 营改增行业销售额的确定
  • 注销公司复杂吗?
  • 计提社保个人部分会计分录
  • 个税公司少申报一个月会对个人有什么影响
  • 中标单位支付代理费
  • 利润表中管理费用根据什么填
  • 提交印花税会计分录
  • 购入固定资产一次性扣除政策
  • 次年发放的奖金怎么入账
  • 财务控制的方法和措施
  • 个人独资企业要报税吗
  • 工业企业预提费用怎么算
  • mysql的表文件在哪
  • sql语句相似度计算
  • xp如何查看系统位数
  • 苹果电脑安装win7系统教程
  • linux使用方式有哪些方面
  • win7电脑dpi怎么设置800
  • win8怎么系统重装系统
  • 如何保留windows.old
  • win8系统打不开exe
  • javascript创建对象
  • nodejs模拟点击
  • 如何使用maven
  • dos删除文件夹下所有文件 不删除父目录
  • android studio入门项目
  • js日期操作
  • shell 单引号中引用变量
  • python获取数据代码
  • python怎么写函数
  • javascript密码框
  • 满五唯一是指省内还是本市
  • 福建省网上税务办事大厅
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设