ES6(ECMAScript 6)新特性之模板字符串用法分析


Posted in Javascript onApril 01, 2017

本文实例讲述了ES6(ECMAScript 6)新特性之模板字符串用法。分享给大家供大家参考,具体如下:

ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings)。除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 " 外,它们看起来与普通字符串并无二致。在最简单的情况下,它们与普通字符串的表现一致:

context.fillText(`Ceci n'est pas une cha?ne.`, x, y);

但我们不能说:“原来只是被反撇号括起来的普通字符串啊”。模板字符串为JavaScript提供了简单的字符串插值功能,从此以后,你可以通过一种更加美观、更加方便的方式向字符串中插值了。这在Java和C#中早已经有了,不用再用 + 符号连接字符串,用起来很方便~

模板字符串的使用方式成千上万,但最让我暖心的是将其应用于毫不起眼的错误消息提示:

function authorize(user, action) {
  if (!user.hasPrivilege(action)) {
    throw new Error(
    `用户 ${user.name} 未被授权执行 ${action} 操作。`);
  }
}

在这个示例中,${user.name}${action} 被称为模板占位符,JavaScript将把user.name和action的值插入到最终生成的字符串中,例如:用户jorendorff未被授权打冰球。(这是真的,我还没有获得冰球许可证。)

到目前为止,我们所了解到的仅仅是比+运算符更优雅的语法,下面是你可能期待的一些特性细节:

模板占位符中的代码可以是任意JavaScript表达式,所以函数调用、算数运算等这些都可以作为占位符使用,你甚至可以在一个模板字符串中嵌套另一个,我称之为模板套构(template inception)。

如果这两个值都不是字符串,可以按照常规将其转换为字符串。例如:如果action是一个对象,将会调用它的.toString()方法将其转换为字符串值。

如果你需要在模板字符串中书写反撇号,你必须使用反斜杠将其转义:`\``等价于"`"。

同样地,如果你需要在模板字符串中引入字符$和{。无论你要实现什么样的目标,你都需要用反斜杠转义每一个字符:`$`和`\{`。

与普通字符串不同的是,模板字符串可以多行书写:

$("#warning").html(`
  <h1>小心!>/h1>
  <p>未经授权打冰球可能受罚
   将近${maxPenalty}分钟。</p>`);

模板字符串中所有的空格、新行、缩进,都会原样输出在生成的字符串中。

希望本文所述对大家ECMAScript程序设计有所帮助。

Javascript 相关文章推荐
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
js封装可使用的构造函数继承用法分析
Jan 28 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
JS 面向对象之继承---多种组合继承详解
Jul 10 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 #Javascript
原生JS实现九宫格抽奖效果
Apr 01 #Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 #Javascript
ES6 Promise对象概念与用法分析
Apr 01 #Javascript
JavaScript中闭包的详解
Apr 01 #Javascript
基于JavaScript实现验证码功能
Apr 01 #Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 #Javascript
You might like
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
javascript web对话框与弹出窗口
2009/02/22 Javascript
传智播客学习之java 反射
2009/11/22 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
探讨jQuery的ajax使用场景(c#)
2013/12/03 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
vue底部加载更多的实例代码
2018/06/29 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
Python中的Numpy入门教程
2014/04/26 Python
Python操作csv文件实例详解
2017/07/31 Python
python 文件操作删除某行的实例
2017/09/04 Python
利用python在excel中画图的实现方法
2020/03/17 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
历史系毕业生自荐信
2013/10/28 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
司法建议书范文
2014/05/13 职场文书
镇创先争优活动总结
2014/08/28 职场文书
会计做账心得体会
2016/01/22 职场文书