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方法中的形参personExpageExp,就分别对应上面那一句代码中的${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)