ES6特性之：模闆字元串

模闆字元串為構造多行字元串和字元串拼接帶來了更加友善的方式。

多行字元串

之前，我們如果要構造一個多行，我們需要在字元串中自己加入換行符\n，就像這樣:

var lines = "text line one\ntext line two"；
//"text line one
//text line two"
           

上面的看起來有點亂，讓我們寫的再好看直覺一點：

var lines2 = "text line one\n" 
           + "text line two";
           

可以再怎麼寫，總是覺得不是很優雅美觀，尤其是文本内容比較多的時候。模闆字元串的出現，極大的改善了這一痛點：

var lines = `
text line one
text line two
`
           

是不是幹淨整潔多了？

字元串拼接

模闆字元串隻是以叫“模闆”，當然是因為它支援内嵌表達式，借助這一特性，我們可以很容易的實作字元串拼接：

var name = "Kevin";
var age = 18;

//老的做法：
var message = "Name: " + name + ", Age: " + age;
// Name: Kevin, Age: 18

//模闆字元串的做法：
var message2 = `Name: ${name}, Age: ${age}`;
           

也可以做一些簡單的計算：

var num1 = 10;
var num2 = 20;

var result = `${num1} + ${num2} = ${num1 + num2}`;
// 10 + 20 = 30
           

标簽化模闆

标簽化模闆(Tagged Template Literals)是一個進階特性，同一個模闆字元串可以通過使用不同的标簽，對模闆進行進一步處理，輸出不同的結果。

var name = "Kevin";

morning`Hello,${name}`;  // Good morning, Kevin
evening`Hello,${name}`;  // Good evening, Kevin
           

等一下！上面的程式是怎麼回事？morning,evening做了什麼？

其實，這裡的morning,evening就是所謂的标簽(Tag)了，它們其實就是一個函數：

function morning(strings, ...values) {
  return "Good morning, " + values[0];
}

function evening(strings, ...values) {
  return "Good evening, " + values[0];
}
           

• 标簽函數的第一個參數是一個數組，它包含的值是模闆字元串中除去表達式的那些部分：

var name = "Kevin";
var age = 18;

//比如我們有如下模闆字元串
var template = `Name: ${name}, Age: ${age}`;

//則在标簽函數中的第一個參數strings就為：
//strings為 ["Name: ", ", Age: ", ""]
           

• 标簽函數的第二個參數是個可變參數，它包含了填充模闆字元串的那些表達式的值，就按上面的代碼例子，那我們的values參數值就為：

// values為 ["Kevin", 18]