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<literals.length){
        result += literals[i++]; literals這個數組包括的是模板字符串中那些沒有變量替換的部分，也就是The total is,(,with tax).
        if(i<arguments.length){
            result+=arguments[i]; //arguments這個數組包括的是全部的參數，因為執行到這里的時候，i已經加1，所以result連接的是模板字符串各個變量被替換后的值。也就是這里的30,31.5
        }
    }
    return result;
}
msg //"The total is 30 (31.5 with tax)"
//上面這個例子展示了如何將各個參數按照原來的位置拼回去
//passthru函數采用rest參數的寫法如下
function passthru(literals,...values){
    var output ="";
    for(var index = 0;index<values.length;index++){
        output = literals[index]+values[index];
    }
    output+=literals[index];
    return output;
}

標簽模板的一個重要應用，就是過濾HTML字符串，防止用戶輸入惡意內容

function SaferHTML(templateData){
    var s = templateData[0];
    var i;
    for(i = 1;i<arguments.length;i++){
        var arg = String(arguments[i]);

        //sender里面可能有特殊字符，進行轉義
        s += arg.replace(/&/g,"&amp;")
                .replace(/</g,"&lt;")
                .replace(/>/g,"&gt;");
        s += templateData[i];
    }
    console.log(i);//2，表示這個循環只執行了一次，因為templateData[0]="<p>",arguments這個數組只有${sender}這個元素，后面一長串字符都是templateData[2];
    return s;
}
var sender = '<script>alert("abc")</script>';
var message = SaferHTML`<p>${sender} has sent you a message.</p>`;
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<literals.length){
        console.log(arguments[i]);
        // console.log(literals[i++]);
        result += literals[i++];
        if(i<arguments.length){
            result+=arguments[i];
            // console.log(arguments[i]);
        }
    }
    return result;
}
console.log(msg);

標簽模板的另一個應用是多語言轉換（國際化處理）

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<templateData.length){
        s += templateData[i++];
        if(i<arguments.length){
            s += arguments[i];
        }
    }
    return s;
}
var libraryHtml = hashTemplate`
    <ul>
        #for book in ${myBooks}
            <li><i>${book.title}</i> by ${book.author}</li>
        #end
    </ul>
`;
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<values.length;index++){
        output += strings.raw[index]+values[index];
    }

    output += strings.raw[index];
    return output;
}

String.raw方法可以作為處理模板字符串的基本方法，它會將所有變量替換，並對反斜線進行轉義，方便下一步作為字符串使用
String.raw方法也可以作為正常的函數使用，這時，其第一個參數應該是一個具有raw屬性的對象，且raw屬性的值應該是一個數組。

String.raw({raw:'test'},0,1,2);
//"t0e1s2t"

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