ES6 标签模板（Tagged templates）

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!"

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