浅谈ES6 模板字符串的具体使用方法
作者:见见 发布时间:2024-04-18 10:02:01
写在前面
关于 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"
不同于普通字符串,模板字符串还可以多行书写,模板字符串中所有的空格,新行,缩进都会原样的输出在生成的字符串中。
而单纯的模板字符串还存在着很多的局限性。如:
不能自动转义特殊的字符串。(这样很容易引起注入攻击)
不能很好的和国际化库配合(即不会格式化特定语言的数字,日期,文字等)
没有内建循环语法,(甚至连条件语句都不支持, 只可以使用模板套构的方法)
标签模板(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
var name = '丁香医生';
var desc = '丁香医生是面向大众的科普性健康类网站';
tag`公司名:${name}简介:${desc}`
tag 的参数则分别为 ['公司名:','简介:'], '丁香医生', '丁香医生是面向大众的科普性健康类网站'。
有了此类方法,就大大的增加了控制的权利。如上面说的国际化库甚至循环语句。
浏览器兼容性
服务器端, io.js 支持
浏览器端, FF34+ , chrome 41+
移动端 IOS 8, Android 4.4
IE Tech Preview
来源:https://segmentfault.com/a/1190000003092875
猜你喜欢
- PyQt中的线程类 QtCore.QThread ,使用时继承QThread类启动界面的线程暂称为UI线程。界面执行命令时都在自己的UI线程
- 什么是多态?多态(Polymorphism)按字面的意思就是“多种状态”。在面向对象语言中,接口的多种不同的实现方式即为多态。引用Charl
- 概述日志文件是MySQL数据库的重要组成部分。MySQL有几种不同的日志文件,通常包括错误日志文件,二进制日志,通用日志,慢查询日志,等等。
- 引入numpy已经能够帮助我们处理数据,能够结合matplotlib解决我们数据分析的问题,那么pandas学习的目的在什么地方呢? num
- 错误15105,从网上找了一些解决方案,一般都是说文件的权限不足的问题,当然附加的时候必须是有数据库附加权限才可以操作的。解决办法1:给相应
- 本文实例为大家分享了opencv+python实现图像矫正的具体代码,供大家参考,具体内容如下需求:将斜着拍摄的文本图像进行矫正python
- 引言人工智能是计算机科学中一个非常热门的领域,近年来得到了越来越多的关注。它通过模拟人类思考过程和智能行为来实现对复杂任务的自主处理和学习,
- 如下所示:ljust(len,str)字符向左对齐,用str补齐长度rjust(len,str)字符向右对齐,用str补齐长度rjust(l
- 《色彩解答》系列之一 色彩层次《色彩解答》系列之二 色彩比例我们知道在设计中有很多对比,大小的对比,形状的对比,长短的对比,多少的对比,这些
- 前言首先图片格式转换的方法有很多,但是转二进制字节流的,我搜了一下午终于在 stackoverflow上搜到了 说一下为什么要在线转这个图片
- 前言标准的 Bloom Filter 是一种比较简单的数据结构,只支持插入和查找两种操作。在所要表达的集合是静态集合的时候,标准 Bloom
- 阅读上一篇:FrontPage XP设计教程4——Css样式表的应用表单在网站的制作过程中是比较常见的,举个简单的例子,我们在申请免费电子信
- 数据持久化vuex-persistedstate使用vuex是在中大型项目中必不可少的状态管理组件,刷新会重新更新状态,但是有时候我们并不希
- 演示源码展示创建画布<canvas width="300" height="300" styl
- 前面写过一篇关于python多线程的实现的文章, 但是效果不是最佳的,写法也不是很好。通过网上学习,也了解到了semaphore这个东西。百
- 一、运算符 . [] () 属性存取及函数调用 delete new typeof + - ! 一元运算符 * / % 乘法,除法,取模 +
- 这是LeetCode的第1668题:最大重复子字符串最大重复子字符串给你一个字符串 sequence ,如果字符串 wo
- 一、前言 此篇文章安装mysql部分没有截图,适合有一定基础的同学。安装方法是通过mysql官网下载的tar文件,解压后安装rpm文件。因为
- 1.流程控制语 break用于结束整个循环结构,直接退出整个循环例:用两种循环模拟密码输入输入正确就退出循环,输入错误可以重新输入,有三次输
- turtle库是一个很经典的绘图库,其最初来自于1967年创造的logo编程语言,之后被Python编写放到了Python的内置模块中。网络