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 相关文章推荐
javascript this用法小结
Dec 19 Javascript
JS 实现点击a标签的时候让其背景更换
Oct 15 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
vue 子组件修改data或调用操作
Aug 07 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
Terran兵种介绍
2020/03/14 星际争霸
PHP print类函数使用总结
2010/06/25 PHP
PHP include_path设置技巧分享
2011/07/03 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
php字符串分割函数用法实例
2015/03/17 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
jQuery $.each的用法说明
2010/03/22 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
AngularJs 常用的过滤器
2017/05/15 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
python如何实现反向迭代
2018/03/20 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
python读写csv文件实例代码
2019/07/05 Python
Python列表元素常见操作简单示例
2019/10/25 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
什么是测试驱动开发(TDD)
2012/02/15 面试题
医学毕业生自我鉴定
2013/10/30 职场文书
人资专员岗位职责
2014/04/04 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
党员转正申请报告
2015/05/15 职场文书
值班管理制度范本
2015/08/06 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang