浅谈ES6 模板字符串的具体使用方法


Posted in Javascript onNovember 07, 2017

写在前面

关于 ES6, 也终于在 2015 年的 7 月 18 号尘埃落定了。虽然说各大浏览器还没有全面的支持,不过这并不妨碍我们一颗想要撸一把的心。在后端,可以使用 Node.js(0.12+)或 io.js, 前端的话,也可以使用Babel 或Traceur 进行语法预转义成 ES5使用 。

关于该系列(不知道能不能成为一个系列,总是各种懒),会没有规律的挑选一些内容来学习。欢迎大家积极纠错,留言探讨。

模板字符串(template strings)

用法

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
not legal.`

// 字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`  // Hello Bob, how are you today?

ES6 中引进的一种新型的字符串字面量语法 - 模板字符串。书面上来解释,模板字符串是一种能在字符串文本中内嵌表示式的字符串字面量。简单来讲,就是增加了变量功能的字符串。

先来看一下以前我们对字符串的使用:

/**
 * Before ES6 字符串拼接
 */
var name = '丁香医生';
var desc = '丁香医生是面向大众的科普性健康类网站';
var html = function(name, desc){
  var tpl = '公司名:' + name + '\n'+
      '简介:'+ desc;
  return tpl;
}

而现在:

var html = `公司名:${name}
  简介:${desc}`;

很简洁吧。

引一段 MDN 对于模板字符串的定义:

模板字符串使用反引号 () 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法(${expression})的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数,该函数负责将所有的部分连接起来。

而占位符${},可以是任意的 js 表达式(函数或者运算),甚至是另一个模板字符串,会将其计算的结果作为字符串输出。如果模板中需要使用$,{等字符串,则需要进行转义。

看个例子就明白了。

var x = 1;
var y = 2;
`${ x } + ${ y } = ${ x + y}` // "1 + 2 = 3"

不同于普通字符串,模板字符串还可以多行书写,模板字符串中所有的空格,新行,缩进都会原样的输出在生成的字符串中。

而单纯的模板字符串还存在着很多的局限性。如:

  1. 不能自动转义特殊的字符串。(这样很容易引起注入攻击)
  2. 不能很好的和国际化库配合(即不会格式化特定语言的数字,日期,文字等)
  3. 没有内建循环语法,(甚至连条件语句都不支持, 只可以使用模板套构的方法)

标签模板(tagged template)

为此,引出了标签模板的概念。标签模板则是在反引号前面引入一个标签(tag)。该标签是一个函数,用于处于定制化模板字符串后返回值。就拿上面对特殊字符串举例。

/**
 * HTML 标签转义
 * @param {Array.<DOMString>} templateData 字符串类型的tokens
 * @param {...} ..vals 表达式占位符的运算结果tokens
 * 
 */
function SaferHTML(templateData) {
 var s = templateData[0];
 for (var i = 1; i < arguments.length; i++) {
  var arg = String(arguments[i]);
  // Escape special characters in the substitution.
  s += arg.replace(/&/g, "&")
      .replace(/</g, "<")
      .replace(/>/g, ">");
  // Don't escape special characters in the template.
  s += templateData[i];
 }
 return s;
}
// 调用
var html = SaferHTML`<p>这是关于字符串模板的介绍</p>`;

标签函数会接收多个参数。

  1. 第一个参数是包含了字符串字面量(即那些没有变量替换的值)的数组
  2. 后面的参数是已经替换后的变量值

改一下例子1

var name = '丁香医生';
var desc = '丁香医生是面向大众的科普性健康类网站';
tag`公司名:${name}简介:${desc}`

tag 的参数则分别为 ['公司名:','简介:'], '丁香医生', '丁香医生是面向大众的科普性健康类网站'。

有了此类方法,就大大的增加了控制的权利。如上面说的国际化库甚至循环语句。

浏览器兼容性

  1. 服务器端, io.js 支持
  2. 浏览器端, FF34+ , chrome 41+
  3. 移动端 IOS 8, Android 4.4
  4. IE Tech Preview

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
详解Node.js模块间共享数据库连接的方法
May 24 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
微信小程序上传图片到服务器实例代码
Nov 07 #Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 #Javascript
vue组件间通信子与父详解(二)
Nov 07 #Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 #Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 #Javascript
vue组件父与子通信详解(一)
Nov 07 #Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 #Javascript
You might like
PHP个人网站架设连环讲(二)
2006/10/09 PHP
PHP连接access数据库
2008/03/27 PHP
php中的观察者模式简单实例
2015/01/20 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
django celery redis使用具体实践
2019/04/08 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
Python实现分数序列求和
2020/02/25 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
淘宝网店营销策划书
2014/01/11 职场文书
质检员岗位职责
2015/02/03 职场文书
Pytorch可视化的几种实现方法
2021/06/10 Python
新手入门Mysql--sql执行过程
2021/06/20 MySQL