浅谈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 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
JS 显示当前日期与时间的代码
Mar 24 Javascript
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
两个数组去重的JS代码
Dec 04 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
jquery获取多个checkbox的值异步提交给php
Jul 07 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 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流量统计功能的实现代码
2012/09/29 PHP
解析php扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
php事件驱动化设计详解
2016/11/10 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
python中判断文件结束符的具体方法
2020/08/04 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
实习自我鉴定
2013/12/15 职场文书
《哪吒闹海》教学反思
2014/02/28 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
九不准学习心得体会
2016/01/23 职场文书