ES6 模板字符串

Question

在 ES6 引入模板字符串之前，如果大家需要在代码中创建一个包含变量的字符串，那么代码将非常难读，并且也非常容易出错。下面就是一个简单的例子，在例子中我们将输入的 3 个参数拼接在一起，然后返回给调用方。

//在模板字符串出现前的写法，写法冗长而且难于理解
function returnSomthing(param1, param2, param3){
    return "something return based on input("
           + "param1:" + param1.toString() + "---"
           + "param2:" + param2.toString() + "---"
           + "param3:" + param3.toString();
}

//使用模板字符串的写法,
function returnSomthingNew(param1, param2, param3){
    return `something return based on input(
              param1:${param1}---param2:${param2}---param3:${param3}`;
}

通过上面的代码，你可以看出在使用模板字符串之后，代码变得非常简洁，而且也容易阅读。下面是在使用模板字符串时候的一些注意点

• 模板字符串是使用 ` 引用起来的，如果在最终生成的字符串中包含`字符，那么需要使用 \ 字符进行转义
• 模板字符串中对于变量的引用是通过 ${} 来进行的
• 使用模板字符串的时候，${} 中可以放入任意合法的JavaScript表达式。JavaScript 对包含在 ${} 中的内容实际上是通过 eval 表达式来进行的

标签模板

模板字符串可以跟在一个函数名之后，该函数将被调用来处理跟在后面的模板字符串，这个功能被称为标签模板。被调用的函数将接收到下面的参数列表（literals,...values）。其中 literals 是一个数组，内容是模板字符串中不需要进行变量替换的部分，而 values 就是每个替换变量经过 eval 之后的值，下面是一个具体的例子。

var total = 30;
var msg = transform`The total number is ${total}`;
total = 20;
var msg1 = transform`The total number is ${total}`;
//in our sample
//literals = ["The total number is ", ""]
//values = [30]
function transform(literals,...values){
    var output = "";
    for (var index = 0; index < values.length; index++){
        if (parseInt(values[index]) >= 30){
            output += literals[index] + "high value";
        }else{
            output += literals[index] + "low value";
        }
    }
    output += literals[index];
    return output;
}
console.log(msg); //output The total number is high value
console.log(msg1);//output The total number is low value