ES6之模板字符串

作用：

允许嵌入表达式的字符串字面量。主要是避免拼接这种JS的愚蠢操作，让代码更优雅和易读一点。作用：

1.实现多行字符串的功能。  更优雅。

//使用前
console.log('string text line 1\n' +
'string text line 2');

//使用后  更优雅的方式，摒弃了以前字符串拼接
console.log(`string text line 1
string text line 2`);

2.字符串插值   显然要更加易读

//使用前
var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');

//使用后
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);

3.前缀拼接。使用它再前面加一些字符串，然后+ ${ xxx }去拼接，更简洁

//使用前
var classes = 'header'
classes += (isLargeScreen() ?
   '' : item.isCollapsed ?
     ' icon-expander' : ' icon-collapser');

//使用后
const classes = `header ${ isLargeScreen() ? '' :
 `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;

 

4.标签函数。    这里的myTap是一个标签函数，后面接的是模板字符串

第一个参数是模板字符串的普通字符的数组，第二，第三个参数对应的是里面的表达式

var person = 'Mike';
var age = 28;

function myTag(strings, personExp, ageExp) {

  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;

}

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

console.log(output);
// that Mike is a youngster

另外一个标签函数

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

使用标签函数的一个属性 raw 可以访问原始字符串：    可以看到他打印的是转义前的原始字符串

他和使用下面String.raw(xxx)是一样的效果

function tag(strings) {
  console.log(strings.raw[0]);
}

tag`string text line 1 \n string text line 2`;
// logs "string text line 1 \n string text line 2" ,
// including the two characters '\' and 'n'

var str = String.raw`Hi\n${2+3}!`;
// "Hi\n5!"

 

 

参考资料

MDN 对象字面量

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings