关于JavaScript标记模板字面量

今天学习的一个知识点，在讲标记模板字面量前需要先了解一下模板字面量（字符串模板）、字符串插值

模板字面量

ECMAScript 6 新增了使用模板字面量定义字符串的能力。与使用单引号或双引号不同，模板字面量保留换行字符，可以跨行定义字符串：例如

 const info = "first line \n second line"
 const infos = `first line 
        second line`
console.log(info)
console.log(infos)

结果：

 

字符串插值

ES6 增加的模板字面值支持字符串插值，就是可以在字符串中使用 JavaScript 表达式。如下：

let value = 5; 
let exponent = 'second'; 
// 以前，字符串插值是这样实现的：
let interpolatedString = 
 value + ' to the ' + exponent + ' power is ' + (value * value); 
// 现在，可以用模板字面量这样实现：
let interpolatedTemplateLiteral = 
 `${ value } to the ${ exponent } power is ${ value * value }`; 
console.log(interpolatedString); // 5 to the second power is 25 
console.log(interpolatedTemplateLiteral); // 5 to the second power is 25 

标记模板字面量

        当在模板字面值前放置值为函数实例的表达式，也就是说在函数表达式中传入我们的模板字符函数会怎样解析呢？

const a = 6;
const b = 9;
    function simpleTag(a, b, c, d,e) {
        console.log(a);
        console.log(b);
        console.log(c);
        console.log(d);
        console.log(e)
        return 'foobar';
      }
 let untaggedResult = `${ a } + ${ b } = ${ a + b }`;
 let taggedResult = simpleTag `${ a } + ${ b } = ${ a + b }`;
    //object Array ["", " + ", " = ", ""] 
    // 6 
    // 9 
    // 15 
  //undefined
console.log(untaggedResult);  // "6 + 9 = 15" 
console.log(taggedResult); // "foobar" 

在我们使用模板字面量时，第一个传入的参数是一个包含字符串的数组，剩余的参数按照我们的表达式的值一次传入。简而言之就是，传入的第一个参数所输出的数组就是把表达式进行一个成分的拆解，之后传入对应插值的值。

所以`${ a } + ${ b } = ${ a + b }`拆解完就是： ["", " + ", " = ", ""] ，6,9,15。