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 相关文章推荐
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
js实现新年倒计时效果
Dec 10 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 Javascript
js微信分享实现代码
Oct 11 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
JS内部事件机制之单线程原理
Jul 02 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 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
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
this和执行上下文实现代码
2010/07/01 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
Angularjs 基础入门
2014/12/26 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
Python连接phoenix的方法示例
2017/09/29 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
Django对models里的objects的使用详解
2019/08/17 Python
pandas 空数据处理方法详解
2019/11/02 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
python求前n个阶乘的和实例
2020/04/02 Python
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
什么是唯一索引
2015/07/05 面试题
入党自我评价优缺点
2014/01/25 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书