浅谈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 相关文章推荐
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
Prototype RegExp对象 学习
Jul 19 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
微信小程序云开发之使用云函数
May 17 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
深入了解query和params的使用区别
Jun 24 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 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
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
List Installed Software Features
2007/06/11 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
js获取input标签的输入值实现代码
2013/08/05 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
JSON Web Tokens的实现原理
2017/04/02 Python
Python logging模块用法示例
2018/08/28 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
求职者简历中的自我评价
2013/10/20 职场文书
中专自我鉴定
2014/02/05 职场文书
英文请假条
2014/04/11 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
婚礼秀策划方案
2014/05/19 职场文书
捐书倡议书
2014/08/29 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书