ES6标签模板（Tagged templates）

一、简介

标签模板允许你用一个方法去解析模板字符串。该方法形参的第一个参数是一个字符串数组，后面的几个参数是你传入的用${}表示的其他变量。该方法可以返回经过你处理过的字符串或者另外一个方法。
这个解析模板字符串的方法的名字是自定义的。

二、代码

1.以下是标签模板的基本使用

var person = 'Mike';
var age = 28;function myTag(strings, personExp, ageExp) {  //这就是解析标签模板字符串的方法，名字是自定义的//strings是一个字符串数组var str0 = strings[0]; // "That "var str1 = strings[1]; // " is a "var ageStr;if (ageExp > 99){ageStr = 'centenarian';} else {ageStr = 'youngster';}//经过处理后的字符串return `${str0}${personExp}${str1}${ageStr}`;
}//这里就是标签模板的调用了
//myTag+`字符串1${变量1}字符串2${变量2}`
var output = myTag`That ${ person } is a ${ age }`;console.log(output);
// That Mike is a youngster

以上代码的myTag方法就是可以解析模板字符串的解析方法，myTag的第一个形参strings是一个字符串数组。strings[0]就是'That '，注意That后面有空格，strings[1]就是' is a '，is a前后都有空格。
strings是怎么传入的呢，看看这一句

var output = myTag`That ${ person } is a ${ age }`;

没错，${para}前后分隔开的都被传入并作为strings数组里面的一个元素了，即使是空串""，也会被保存在strings里面。
再看看myTag方法中的形参personExp和ageExp，就分别对应上面那一句代码中的${person}和${age}，按顺序接收。最后myTag方法返回了一个经过处理的模板字符串

 return `${str0}${personExp}${str1}${ageStr}`;

2.标签模板方法不止能够返回字符串，还可以返回方法

function template(strings, ...keys) {return (function(...values) {   //返回的方法里面的逻辑不用太关注，注意点是可以返回一个方法var dict = values[values.length - 1] || {};var result = [strings[0]];keys.forEach(function(key, i) {var value = Number.isInteger(key) ? values[key] : dict[key];result.push(value, strings[i + 1]);});return result.join('');});
}var t1Closure = template`${0}${1}${0}!`;
t1Closure('Y', 'A');  // "YAY!"
var t2Closure = template`${0} ${'foo'}!`;
t2Closure('Hello', {foo: 'World'});  // "Hello World!"

以上是我对标签模板的理解，请多多指教!

ES6 标签模板（Tagged templates）相关推荐

笔记 --- ES6 标签模板 tagged template
问题要从上次拼接 URL 用到的 npm 包 encodeuricomponent-tag 说起, 它的使用方式是否让你有些迷惑? const uri = require('encodeuricomp ...
ES6 标签模板与模板字符串
模板字符串模板字符串使用反引号 () 来代替普通字符串中的用双引号和单引号.模板字符串可以包含特定语法(${expression})的占位符.占位符中的表达式和周围的文本会一起传递给一个默认函数,该 ...
深入浅出ES6：模板字符串（`和‘）
反撇号(`)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 " 外,它们看起 ...
前端会用标签模板（Tagged Templates）就能当股神
前端会用标签模板(Tagged Templates)就能当股神 - 林一二的文章 - 知乎 https://zhuanlan.zhihu.com/p/36426258 文因互联的问答机器人里有一个小功 ...
ES6（二）——字符串模板、标签模板字符串、函数的默认参数、剩余参数、数组对象的展开语法、数值的表示、Symbol
一.字符串模板基本使用在ES6之前,如果我们想要将字符串和一些动态的变量(标识符)拼接到一起,是非常麻烦和丑陋的(ugly). ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接: 首 ...
ES6知识点整理模板字符串和标签模板的应用
ES6 中对字符串进行了扩展,而模板字符串就是一个非常实用的方式,可以在html中实现与变量和方法的混编之前我们手动拼接字符串的方式 let hello = 'Hello'; let html = ...
es6中 “标签模板”的一个重要应用
"标签模板"的一个重要应用,就是过滤 HTML 字符串,防止用户输入恶意内容. let message =SaferHTML`<p>${sender} has sent ...
es6模板字符串中标签模板作为参数时产生空元素的问题
当模板字符串作为标签模板使用时,标签函数接受到的参数分别为(arr,-values) arr:模板字符串中所有那些没有变量替换的部分 -values:各个变量替换后的值即 let a = 'Oh!' ...
ES6—字符串模板引擎
字符串模板引擎 ES5中的字符串缺乏多行字符串.字符串格式化.HTML转义等特性. 而ES6通过模板字面量的方式进行了填补,模板字面量试着跳出JS已有的字符串体系,通过一些全新的方法来解决问题. 1 ...

ES6 标签模板（Tagged templates）