[ES6] Template literals(模板字符串)

#

模板字符串允许嵌入表达式，并且支持多行字符串和字符串插补特性。
`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

模板字符串使用反引号 (` `) 来代替普通字符串中的用双引号和单引号。
模板字符串可以包含特定语法(${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"

#表达式插补

            //原始
            var a = 5;
            var b = 10;
            console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
            // "Fifteen is 15 and
            // not 20."
            //模板字符串
            var a = 5;
            var b = 10;
            console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);
            // "Fifteen is 15 and
            // not 20."

#带标签的模板字符串

            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`;

#安全性
由于模板字符串能够访问变量和函数，因此不能由不受信任的用户来构造。

            `${console.warn("this is",this)}`; // "this is" Window
            let a = 10;
            console.warn(`${a+=20}`); // "30"
            console.warn(a); // 30

 

#   

 

转载于:https://www.cnblogs.com/qingmingsang/articles/5513064.html