ES6 模板字符串

---

为了能够让我们更加方便的拼接，操作字符串，ES6出了模板字符串。

---

模板字符串是用`反引号代替常规字符串的'单引号或者"双引号，从而让字符串拥有可以将一部分替换成变量拼接在一起能力，当然，模板字符串不仅仅如此。

基本语法###

先看一个简单的例子

let text = `hello`;
console.log(message);               // "Hello"
console.log(typeof message);        // "string"
console.log(message.length);        // 5

通过上述例子，可以看出，其实模板字符串创建的就是普通的字符串，没有什么特别的地方。当然，如果想创建多行的字符串，以前的方法可能是这样：

var text = "hello\nworld";
console.log(text);              //hello
                                //world

而如果使用模板字符串，就可以直接换行写，或者用\n：

var text =`hello\nworld`;
var text1 =`hello
world`;
console.log(text);              //hello
                                //world
console.log(text1);             //hello
                                //world

使用模板字符串还有值得注意的几点：

1. 空格符（空白符）也会占位置：

var text=`hello
                world`;
console.log(text);           //hello
                                //                world
console.log(text.length)     //27

2. 如果想让\n输出，可以使用转义字符，变为\\\n，或者直接使用String.raw:

var text =String.raw`hello\nworld`;
var text1 =`hello\\nworld`;
console.log(text);              //hello\nworld 
console.log(text1);              //hello\nworld 

进入正题###

之前说介绍的功能只能说是普通字符串的改良版，下面介绍真正的模板字符串强大的地方，可以嵌入变量而且写法超级简单，具体代码如下：

let myName = "moonburn";
let message = `hello,my name is ${myName}`;
console.log(message)           //"hello,my name is moonburn"

当然，模板字符串接受的不仅仅是变量，还可以是函数回调，简单的计算，比如：

let jiao= 0.1,
     message = `${jiao}角等于${jiao*10}分，也等于${(jiao* 0.1).toFixed(3)}元。`
console.log(message)           //"0.1角等于1分，也等于0.010元。"

甚至是模板字符串本身：

let myName = "moonburn";
let message = `hello,${`my name is ${myName}`}`;
console.log(message)           //"hello,my name is moonburn"

不仅如此，ES6还贴心的出了模板标签（Tagged Templates）。

模板标签###

声明一个模板标签：

let text = sayHello`hello`;
function sayHello(){
    //do something
}

正如你所看到的，sayHello就是模板标签，那么这个到底是干什么的呢？
可以看到，下面，我们声明的一个和模板标签同名的函数，这个函数就是模板标签的本体！具体有什么用呢？看下面这个例子：

let text = sayHello`hello`;
function sayHello(array1,...array2){
   console.log(array1);     //["hello"]
   console.log(array2);     //undefined
   return 123;
}
console.log(text)    //123

是不是有点明白了？嗯，那我们继续深一步探讨，其实这个模板标签也就是sayHello把模板字符串hello当做参数（两个参数具体怎么分配，我们下面在探讨），然后经过一系列的计算，最后返回一个字符串return 123，给text,所以最后text的值是123。
下面我们再看一个复杂一点的例子：

let word= "world"
let name = "moonburn"
let text = sayHello`hello ${word},my name is ${name}`;
function sayHello(array1,...array2){
   console.log(array1);     //["hello ",",my name is ",""]
   console.log(array2);     //["world", "moonburn"]
   return 123;
}
console.log(text)    //123

通过这个例子，我们可以明白，函数的第一个参数，就是模板字符串中非变量的部分组成的数组，值得注意的是，模板字符串的最开始和最后一定要是普通字符串，如果是变量开始或者结尾，就像上述例子，那么就会有空字符串也就是""出现，通过这一点，我们就可以保证，第一个参数的长度永远比第二个参数长一个单位，也就是说array1.length === array2.length+1恒为true。第二个参数是什么呢？显而易见了，就是变量。那么我们来看看默认的模板标签是怎么样的呢？

let word= "world"
let name = "moonburn"
let text = sayHello`hello ${word},my name is ${name}`;
function sayHello(array1,...array2){
    let result = "";
    for (let i = 0; i < array2.length; i++) {
        result += array1[i];
        result += array2[i];
    }
    //加上最后一个普通字符串。
    result += array1[array1.length - 1];
    return result;
}
console.log(text)    //"hello world,my name is moonburn"

当然，array2的值不仅仅只是字符串，如果是需要计算的数，或者回调函数，那么计算完毕之后再进行模板标签的函数调用。

let word= "world"
let name = function(){
    console.log("函数调用")
    return "moonburn"
}
let text = sayHello`hello ${word},my name is ${name()}`;
function sayHello(array1,...array2){
    let result = "";
    for (let i = 0; i < array2.length; i++) {
        result += array1[i];
        result += array2[i];
    }
    //加上最后一个普通字符串。
    result += array1[array1.length - 1];
    return result;
}
console.log(text)  
 //函数调用
 //"hello world,my name is moonburn"

总结###

• 不带变量的模板字符串就是普通字符串的加强版，换行之类的操作更加方便，注意空格。
• 带变量的模板字符串可以接受变量计算，函数回调等，最后输出的还是字符串。
• 模板标签可以自己人性化配置模板字符串，接受2个参数，返回值也是自己定义。