ES6标签模板介绍

标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的是函数，紧跟在后面的模板字符串就是它的参数。

var a = 5;
var b = 10;
tag `Hello ${a+b} world ${a*b}`;
//这个标识名tag,它是一个函数。整个表达式的返回值，就是tag函数处理模板字符串之后的返回值。函数tag会依次接收到多个参数。

tag函数的第一个参数是一个数组，该数组的成员时模板字符串中那些没有变量替换的部分，也就是说，变量替换只发生在数组的第一个成员和第二个成员之间，以此类推。tag函数的其他参数都是模板字符串各个变量被替换后的值，由于本例中，模板字符串含有两个变量，因此tag会接收到value1和value2两个参数。
tag函数所有参数的实际值如下：
——第一个参数：['Hello ',' world ','']
——第二个参数：15
——第三个参数：50
也就是说tag函数实际上是以下面的形式调用的
tag(['Hello ',' world ',''],15,50);
我们可以按照需要编写tag 函数的代码。

var a = 5;
var b = 10;

function tag(s,v1,v2){
    console.log(s[0]);
    console.log(s[1]);
    console.log(s[2]);
    console.log(v1);
    console.log(v2);
    return "ok";
}
tag`Hello ${a+b} world ${a*b}`;
//"Hello "
//" world "
//""
//15
//50
//"ok"

下面是一个更复杂的例子

var total = 30;
var msg = passthru`The total is ${total} (${total*1.05} with tax)`;
function passthru(literals){
    var result = "";
    var i = 0;

    while (i

标签模板的一个重要应用，就是过滤HTML字符串，防止用户输入恶意内容
function SaferHTML(templateData){
    var s = templateData[0];
    var i;
    for(i = 1;i/g,">");
        s += templateData[i];
    }
    console.log(i);//2，表示这个循环只执行了一次，因为templateData[0]="
",arguments这个数组只有${sender}这个元素，后面一长串字符都是templateData[2];
    return s;
}
var sender = '<script>alert("abc")</script>';
var message = SaferHTML`
${sender} has sent you a message.
`;
console.log(message);

var total = 30;
var msg = passthru`The total is ${total}${total*1.05} with tax)`;
function passthru(literals){
    var result = "";
    var i = 0;
    while (i


标签模板的另一个应用是多语言转换（国际化处理）
var book = {
    title:"shiji",
    author:"simaqian"
};
var book1 = {
    title:"sanguo",
    author:"luo"
};
var myBooks = [book,book1];
function hashTemplate(templateData){
    var s = "";
    var i = 0;
    while(i
        #for book in ${myBooks}
${book.title} by ${book.author}
        #end
    
`;
console.log(libraryHtml);

模板处理函数的第一个参数（模板字符串数组）还有一个raw属性
在谷歌浏览器中，运行出来，还是本身，没有变化。
String.raw()
ES6还为原生的String对象提供了raw方法

String.raw方法往往用来充当模板字符串的处理函数，返回一个反斜线都被转义（即反斜线前面再加一个反斜线）的字符串，对应于替换变量后的模板字符串

String.rawHi\n${2+3}!;

//"Hi\n5!"
String.rawHi\\n

//"Hi\n"
String.raw = function(strings,...values){
    var output = "";
    for(var index = 0;index

String.raw方法可以作为处理模板字符串的基本方法，它会将所有变量替换，并对反斜线进行转义，方便下一步作为字符串使用

String.raw方法也可以作为正常的函数使用，这时，其第一个参数应该是一个具有raw属性的对象，且raw属性的值应该是一个数组。
String.raw({raw:'test'},0,1,2);
//"t0e1s2t"

//等同于
String.raw({raw:['t','e','s','t']},0,1,2);