摘要：字符串模板引擎中的字符串缺乏多行字符串字符串格式化轉義等特性。字符串中嵌入變量模板字面量看上去僅僅是普通字符串的升級版，但二者之間真正的區別在于模板字面量的變量占位符。黑子在上面的代碼中，就是模板標簽。

字符串模板引擎

ES5中的字符串缺乏多行字符串、字符串格式化、HTML轉義等特性。

而ES6通過模板字面量的方式進行了填補，模板字面量試著跳出JS已有的字符串體系，通過一些全新的方法來

解決問題。

1.基本用法
　
ES5字符串寫法：

let message = "我的寵物狗叫黑子，今年16歲了"

將其轉化成ES6寫法，其實非常簡單：

只需把最外圍的雙引號（"）或者單引號（"） 轉化成反引號（`）即可。

let message = `我的寵物狗叫黑子，今年16歲了`

如果想在字符串內部使用反引號，只需使用反斜杠（ ）轉義即可

let message = `我的寵物狗叫`黑子`，今年16歲了`;
console.log(message); // "我的寵物狗叫`黑子`，今年16歲了"

2.多行字符串

傳統的JavaScript語言，輸出模板通常是這樣寫的：

var name = "黑子";
var age = 8;
$("#result").append(
  "我的寵物狗叫 " + name + "
" +
      "今年
" +
      "" + age+ "歲，
"+
  "十分可愛!"
);

但是在ES6中，要獲得同樣效果的多行字符串，只需使用如下代碼：

let name = "黑子";
let age = 8;
$("#result").append(
  `我的寵物狗叫 ${name}
      今年 
      ${age}歲，
  十分可愛!`
);

對比兩段拼接的代碼，模板字符串使得我們不再需要反復使用雙引號（或者單引號）了；而是改用反引號標識符

（`），插入變量的時候也不需要再使用加號（+）了，而是把變量放入${ }即可。

也不用再通過寫 n 進行換行了，ES6 的模板字面量使多行字符串更易創建，因為它不需要特殊的語法，只需在想

要的位置直接換行即可，此處的換行會同步出現在結果中。簡單、清晰、明了。

注意：如果使用模板字符串表示多行字符串，所有的空格和縮進都會被保留在輸出之中。因此需要特別留意縮進。

console.log(`我的寵物狗叫黑子
                             今年16歲了`);
結果：                             
//我的寵物狗叫黑子
//                             今年16歲了

以上代碼中，模板字面量第二行前面的所有空白符都被視為字符串自身的一部分。

如果一定要通過適當的縮進來對齊文本，可以考慮在多行模板字面量的第一行空置并在后面的幾行縮進

let html = `

    
Title
`.trim();

以上代碼中，模板字面量的第一行沒有任何文本，第二行才有內容。 HTML標簽的縮進增強了可讀性，之后再

調用trim()方法移除了起始的空行。

3.字符串中嵌入變量

模板字面量看上去僅僅是普通JS字符串的升級版，但二者之間真正的區別在于模板字面量的變量占位符。

ES5寫法：

const age = 8;
const message  = "我的寵物狗叫黑子，今年" + age*2 + "歲了" ;
//我的寵物狗叫黑子，今年16歲了

ES6寫法：

const age = 8;
const message  = `我的寵物狗叫黑子，今年 ${age*2} 歲了` ;
//我的寵物狗叫黑子，今年16歲了

變量占位符允許將任何有效的JS表達式嵌入到模板字面量中，并將其結果輸出為字符串的一部分。

如上面的例子，占位符 ${age} 會訪問變量 age，并將其值插入到 message 字符串中。

既然占位符是JS表達式，還可以輕易嵌入運算符、函數調用等。

const age = 8;
const message = `我的寵物狗叫黑子，今年 ${(age*2).toFixed(2)} 歲了`;
//"我的寵物狗叫黑子，今年 16.00 歲了"

function fn() {
  return "小黃";
}
`我朋友家的寵物叫${fn()}`
//"我朋友家的寵物叫小黃"

4.帶標簽的模板字符串

要用 ES6 模板實現復雜一點的字符串處理邏輯，要依賴寫函數來實現。

幸運的是，除了在模板的插值表達式里想辦法調用各種字符串轉換的函數之外，ES6 還提供了更加優雅且更

容易復用的方案——帶標簽的模板字面量（tagged template literals，以下簡稱標簽模板）

標簽模板的語法很簡單，就是在模板字符串的起始反撇號前加上一個標簽。

let message = tag`黑子`;

在上面的代碼中，tag就是模板標簽。tag其實是一個函數，這個函數會被調用來處理這個模板字符串。

4.1 定義標簽

let  name = "黑子",
     age = 8,
     message = tag`我的寵物狗叫${name}，今年${age}歲了`;

function tag(stringArr, value1, value2) {
    console.log(stringArr);  //["我的寵物狗叫", "，今年", "歲了", raw: Array(3)]
                             //該數組有一個raw屬性，保存的是轉義后的原字符串
    console.log(value1);     // 黑子
    console.log(value2);     // 8
    return;
}

標簽函數通常使用不定參數特性來定義占位符，從而簡化數據處理的過程

function tag(stringArr, ...values) {
     console.log(values); // ?["黑子", 8]
}

4.2 實際應用

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

var message =  filterHTML`
${sender} 你好啊
`;
function filterHTML(templateData) {
  var s = templateData[0];
  for (var i = 1; i < arguments.length; i++) {
    var arg = String(arguments[i]);
    // 轉義占位符中的特殊字符。
    s += arg.replace(/&/g, "&")
            .replace(//g, ">");
    // 不轉義模板中的特殊字符。
    s += templateData[i];
  }
  return s;
}

上面代碼中，sender變量往往是用戶提供的，經過filterHTML函數處理，里面的特殊字符都會被轉義。

var sender = ""; // 惡意代碼
var message = filterHTML`
${sender} 你好啊
`;

console.log(message);
// 
  你好啊

即使一個惡意命名的用戶，例如黑客向其他用戶發送一條騷擾信息，無論如何這條信息都會被轉義為普通字符串，

其他用戶不會受到潛在攻擊的威脅。

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

let name = "ES6專欄 ";  let  number = 666;  
let chinese = ["歡迎訪問","您是第","位訪問者"];

i18n`Welcome to ${name}, you are the ${number}  visitor`;  

function i18n(stringArr, ...values){
    let str="";  
    stringArr.map((item,index)=>{
        str += (chinese[index] +  (values[index] ? values[index] : "" ))   
    });
    console.log(str) 
}
//歡迎訂閱ES6專欄 您是第666位訪問者

5.新增的字符串方法

5.1 查找字符串

在以前在字符串中查找字符串的時候，都是使用indexOf方法。

ES6新增了三個方法來查找字符串 :

includes 方法會在給定文本存在于字符串中的任意位置時返回 true，否則返回 false 。

startsWith 方法會在給定文本出現在字符串開頭時返回 true，否則返回 false 。

endsWith 方法會在給定文本出現在字符串末尾時返回 true，否則返回 false 。

var msg = "Hello world!";

console.log(msg.startsWith("Hello"));       // true
console.log(msg.endsWith("!"));             // true
console.log(msg.includes("d"));             // true

console.log(msg.startsWith("d"));           // false
console.log(msg.endsWith("world!"));        // true
console.log(msg.includes("x"));             // false

每個方法都接收兩個參數：需要搜索的文本和可選的起始索引值。

若第二個參數未提供，includes 和 startsWith 會從字符串的起始中開始檢索，endsWith 則是從字符串的末尾。

實際上，第二個參數減少了需要檢索的字符串的總量。

當提供第二個參數后，includes 和 startsWith 會以該索引為起始點進行匹配

console.log(msg.includes("d", 8));          // true
console.log(msg.includes("d", 11));         // false
console.log(msg.startsWith("d", 10));       // true
console.log(msg.startsWith("d", 9));        // false

endsWith 將字符串的長度與參數值相減并將得到的值作為檢索的起始點

console.log(msg.endsWith("d", 11));         // true ( 長度13 - 參數值11 = 起始點2 )
console.log(msg.endsWith("d", 8));          // false ( 長度13 - 參數值8 = 起始點5 )

應用場景：

（1）利用includes檢查用戶使用的瀏覽器

if (navigator.userAgent.includes("Chrome")) {
     console.log("是谷歌瀏覽器");
} else {
      console.log("不是谷歌瀏覽器");
}

（2）利用startsWith檢查路徑

let urlstr = "http://www.baidu.com";
let urlstr1 = "file:///C:/Users/xxx.html";
console.log(urlstr.startsWith("https://"));    //false
console.log(urlstr1.startsWith("file://"))     //true

（3）利用startsWith檢查文件格式

let path = "111.jpg";
console.log(path.endsWith(".png"));   //false

5.2 字符串重復 -- repeat方法

接受一個數字參數作為字符串的重復次數。該方法返回一個重復包含初始字符串的新字符串，重復次數等于參數。

例如：

console.log("abc".repeat(4));       // "abcabcabcabc"
let str = "小樣兒";
console.log(str.repeat(10));     //小樣兒小樣兒小樣兒小樣兒小樣兒小樣兒小樣兒小樣兒小樣兒小樣兒

5.3 填充字符串

string.padStart 往字符串前面填充（在字符串前面插入字符串）

string.padEnd 往字符串后面填充（在字符串后面插入字符串）

let str = "Iphone";
let leftStr = "我的";
console.log(str.padStart(str.length + leftStr.length, leftStr));//我的Iphone

let iphone = "Iphone";    
let rightStr = "10";    
console.log(iphone.padEnd(iphone.length + rightStr.length, rightStr));    //Iphone10

6.總結

ES6給字符串帶來了很多實用性的擴展：

模板字符串、標簽模板、repeat函數、includes函數、startsWith函數、endsWith函數、padStart函數、padEnd

函數。

字符串模版的出現讓我們再也不用拼接變量了，而且支持在模板里有簡單計算操作。

希望大家能動手練習一下，并把這些新特性應用到工作中，很快就掌握了，用起來能讓大家的工作更輕松，愉悅。