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

2024-04-27 16:52:07

写在前面

关于 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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

ES6字符串模板，剩余参数，默认参数功能与用法示例

本文实例讲述了ES6字符串模板,剩余参数,默认参数功能与用法.分享给大家供大家参考,具体如下: 这里介绍一下字符串模板以及剩余参数,默认参数的概念以及使用. 先来说说字符串模板. 字符串模板 ES6中允许使用反引号 ` 来创建字符串,此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${varible}.如果你使用过像C#等后端强类型语言的话,对此功能应该不会陌生. //产生一个随机数 var num=Math.random(); //将这个数字输出到console console.l
详解JavaScript ES6中的模板字符串

在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用反引号 (`) 表示,它们看上去和普通的字符串没有什么区别.在最简单的情况下,他们就是普通的字符串: context.fillText(`Ceci n'est pas une cha?ne.`, x, y); context.fillText(`Ceci n'est pas une cha?ne.`, x, y); 之所以被称为模板字符串,是因为模板字符串为 JS 引入了简单的字符串插值特性,也就是说,可以方便优雅地将 JS 的值
ES6(ECMAScript 6)新特性之模板字符串用法分析

本文实例讲述了ES6(ECMAScript 6)新特性之模板字符串用法.分享给大家供大家参考,具体如下: ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 " 外,它们看起来与普通字符串并无二致.在最简单的情况下,它们与普通字符串的表现一致: context.fillText(`Ceci n'est pas une cha?ne.`, x, y); 但我们不能说:"原来只是被反撇号括起
ES6学习教程之模板字符串详解

模板字符串(template strings) ES6 中引进的一种新型的字符串字面量语法 - 模板字符串.书面上来解释,模板字符串是一种能在字符串文本中内嵌表示式的字符串字面量.简单来讲,就是增加了变量功能的字符串. ES6为我们提供了模板字符串,语法使用反引号`.模板字符串具有以下三个优点: 多行文本字符串中插入变量字符串中插入表达式基本语法模板字符串和 ES5的字符串的声明一样. // ES5 var name = 'xixi'; console.log(name);// xixi
深入浅出es6模板字符串

本文主要介绍了深入浅出es6模板字符串,分享给大家,具体如下作为前端开发者避免不了根据后台数据的返回,组装html,渲染页面.举个栗子 $('#result').append( 'There are <b>' + basket.count + '</b> ' + 'items in your basket, ' + '<em>' + basket.onSale + '</em> are on sale!' ); 有时候还要给标签加一些属性,写起来很不方便,
浅谈ES6 模板字符串的具体使用方法

写在前面关于 ES6, 也终于在 2015 年的 7 月 18 号尘埃落定了.虽然说各大浏览器还没有全面的支持,不过这并不妨碍我们一颗想要撸一把的心.在后端,可以使用 Node.js(0.12+)或 io.js, 前端的话,也可以使用Babel 或Traceur 进行语法预转义成 ES5使用 . 关于该系列(不知道能不能成为一个系列,总是各种懒),会没有规律的挑选一些内容来学习.欢迎大家积极纠错,留言探讨. 模板字符串(template strings) 用法 // 普通字符串 `In Jav
浅谈ES6新增的数组方法和对象

es6新增的遍历数组的方法,后面都会用这个方法来遍历数组,或者对象,还有set,map let arr=[1,2,3,4,3,2,1,2]; 遍历数组最简洁直接的方法 for (let value of arr) { console.log(value);//输出1,2,3,4,3,2,1,2 } 1. 数组.map() 返回一个新的数组,es5要复制一个新的数组我们一般用循环,现在直接用map let arr=[1,2,3,4,3,2,1,2]; let newArr=arr.map((val
浅谈es6语法 (Proxy和Reflect的对比)

如下所示: { //原始对象 let obj={ time:'2017-03-11', name:'net', _r:123 }; //(代理商)第一个参数代理对象,第二个参数真正代理的东西 let monitor=new Proxy(obj,{ // 拦截对象属性的读取 get(target,key){ return target[key].replace('2017','2018') }, // 拦截对象设置属性 set(target,key,value){ if(key==='name')
浅谈jquery拼接字符串效率比较高的方法

实例如下: var roleidArray = new Array(""); for(i = 0; i < rightRows.length; i++) { roleidArray.push(rightRows[i].id); } roleidArray = roleidArray.join(",").substring(1); 代码很简单,我就不做注释了以上这篇浅谈jquery拼接字符串效率比较高的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,
浅谈java中字符串数组、字符串、整形之间的转换

字符串数组转字符串(只能通过for循环): String[] str = {"abc", "bcd", "def"}; StringBuffer sB = new StringBuffer(); for (int i = 0; i < str.length;i++) { sB.append(str[i]); } String s = sB.toString(); 字符数组转字符串可以通过下面的方式: char[] data = {"
浅谈es6中export和export default的作用及区别

作用: export和export default实现的功能相同,即:可用于导出(暴露)常量.函数.文件.模块等,以便其他文件调用. 区别: 1.export导出多个对象,export default只能导出一个对象 2.export导出对象需要用{ },export default不需要{ },如: export {A,B,C}; export default A; 3.在其他文件引用export default导出的对象时不一定使用导出时的名字.因为这种方式实际上是将该导出对象设置为默认导出
ES6模板字符串和标签模板的应用实例分析

本文实例讲述了ES6模板字符串和标签模板的应用.分享给大家供大家参考,具体如下: ES6 中对字符串进行了扩展,而模板字符串就是一个非常实用的方式,可以在html中实现与变量和方法的混编之前我们手动拼接字符串的方式 let hello = 'Hello'; let html = '<div>' + '<span>'+ hello +'</span>' + '</div>'; console.log(html); // <div><span
浅谈Laravel模板实体转义带来的坑

问题最近在Laravel项目中用到了百度编辑器,插入到数据库我保存的是原始的html标签代码,没有进行实体转义.然后在修改的时候,需要读取到数据库中的数据,进行回显,这时候竟然在编辑器里面显示html标签代码<p>123</p>,这让我很尴尬,因为以前在tp框架中也是这样写的,但是没有问题. 搜索之路在知道问题之后,我就开始找百度了,因为一开始的时候我并不知道是框架的原因,我以为是百度编辑器版本的原因,然后收到了许多答案,都是围绕着htmlentities和html_entit
浅谈es6中的元编程

何为元编程? 「编写能改变语言语法特性或者运行时特性的程序」.换言之,一种语言本来做不到的事情,通过你编程来修改它,使得它可以做到了,这就是元编程. meta-programming元编程中的元的概念可以理解为程序本身."元编程能让你拥有可以扩展程序自身能力举个例子: if (a == 1 && a == 2 && a == 3) { console.log("done"); } 怎样才能让这个条件满足,输出done.按照正常的逻辑是

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

相关推荐

随机推荐