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

字符串模板引擎

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

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

解決問題。

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

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

將其轉(zhuǎn)化成ES6寫法，其實非常簡單：

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

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

如果想在字符串內(nèi)部使用反引號，只需使用反斜杠（ ）轉(zhuǎn)義即可

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

2.多行字符串

傳統(tǒng)的JavaScript語言，輸出模板通常是這樣寫的：

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

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

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

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

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

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

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

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

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

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

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

let html = `

    
Title
`.trim();

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

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

3.字符串中嵌入變量

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

ES5寫法：

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

ES6寫法：

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

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

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

既然占位符是JS表達式，還可以輕易嵌入運算符、函數(shù)調(diào)用等。

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

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

4.帶標簽的模板字符串

要用 ES6 模板實現(xiàn)復(fù)雜一點的字符串處理邏輯，要依賴寫函數(shù)來實現(xiàn)。

幸運的是，除了在模板的插值表達式里想辦法調(diào)用各種字符串轉(zhuǎn)換的函數(shù)之外，ES6 還提供了更加優(yōu)雅且更

容易復(fù)用的方案——帶標簽的模板字面量（tagged template literals，以下簡稱標簽?zāi)０澹?/p>

標簽?zāi)０宓恼Z法很簡單，就是在模板字符串的起始反撇號前加上一個標簽。

let message = tag`黑子`;

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

4.1 定義標簽

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

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

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

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

4.2 實際應(yīng)用

“標簽?zāi)０濉钡囊粋€重要應(yīng)用，就是過濾HTML字符串，防止用戶輸入惡意內(nèi)容

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

上面代碼中，sender變量往往是用戶提供的，經(jīng)過filterHTML函數(shù)處理，里面的特殊字符都會被轉(zhuǎn)義。

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

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

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

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

標簽?zāi)０宓牧硪粋€應(yīng)用，就是多語言轉(zhuǎn)換（國際化處理）

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 方法會在給定文本出現(xiàn)在字符串開頭時返回 true，否則返回 false 。

endsWith 方法會在給定文本出現(xiàn)在字符串末尾時返回 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

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

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

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

當提供第二個參數(shù)后，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 將字符串的長度與參數(shù)值相減并將得到的值作為檢索的起始點

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

應(yīng)用場景：

（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 字符串重復(fù) -- repeat方法

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

例如：

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.總結(jié)

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

模板字符串、標簽?zāi)０?、repeat函數(shù)、includes函數(shù)、startsWith函數(shù)、endsWith函數(shù)、padStart函數(shù)、padEnd

函數(shù)。

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

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