挨T砖家技术教程 2020-02-27

ES6模板字符串在字符串中拼接变量的利器！

最近在折腾的时候发现ES6中的模板字符串，非常实用~

从下图代码可见，非常方便！

按照以往的方法要拼接字符，那是一个复杂，各种双引号和+号真的太麻烦了

模板字符串用反引号 ` 标识，它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

这种语法是能够允许嵌入表达式的字符串字面量模板字符串使用反引号 (` `) 来代替普通字符串中的用双引号和单引号。

模板字符串可以包含特定语法（${expression}）的占位符，占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来。

如果一个模板字符串由表达式开头，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你都可以通过该函数来对模板字符串进行操作处理。在模版字符串内使用反引号（`）时，需要在它前面加转义符（\）。

多行字符串：

            //原始
            console.log("string text line 1\n\string text line 2");
            // "string text line 1
            // string text line 2"    
            //模板字符串
            console.log(`string text line 1 
string text line 2`);
            // "string text line 1
            // string text line 2"

表达式插补：

let a = 5,b = 1; 
console.log(`a的值为${a}, b的值为${b}, a+b的值为${a+b}`) 
// 对应的打印出来的结果为：a的值为5, b的值为1, a+b的值为6

带标签的模板字符串：

            var a = 5;
            var b = 10;

            function tag(strings, ...values) {
                console.log(strings[0]); // "Hello "
                console.log(strings[1]); // " world "
                console.log(values[0]); // 15
                console.log(values[1]); // 50
                return "Bazinga!";
            }
            console.log(tag `Hello ${ a + b } world ${ a * b}`);
            // "Bazinga!"

在标签函数的第一个参数中，存在一个特殊的属性raw ，可以通过它来访问模板字符串的原始字符串：

            function tag(strings, ...values) {
                console.log(strings.raw[0]);
                // "string text line 1 \n string text line 2"
            }
            tag `string text line 1 \n string text line 2`;