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

字符串模板引擎

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

而ES6通過(guò)模板字面量的方式進(jìn)行了填補(bǔ)，模板字面量試著跳出JS已有的字符串體系，通過(guò)一些全新的方法來(lái)

解決問(wèn)題。

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

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

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

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

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

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

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

2.多行字符串

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

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

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

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

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

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

也不用再通過(guò)寫 n 進(jìn)行換行了，ES6 的模板字面量使多行字符串更易創(chuàng)建，因?yàn)樗恍枰厥獾恼Z(yǔ)法，只需在想

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

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

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

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

如果一定要通過(guò)適當(dāng)?shù)目s進(jìn)來(lái)對(duì)齊文本，可以考慮在多行模板字面量的第一行空置并在后面的幾行縮進(jìn)

let html = `

    
Title
`.trim();

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

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

3.字符串中嵌入變量

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

ES5寫法：

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

ES6寫法：

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

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

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

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

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

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

4.帶標(biāo)簽的模板字符串

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

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

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

標(biāo)簽?zāi)０宓恼Z(yǔ)法很簡(jiǎn)單，就是在模板字符串的起始反撇號(hào)前加上一個(gè)標(biāo)簽。

let message = tag`黑子`;

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

4.1 定義標(biāo)簽

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

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

標(biāo)簽函數(shù)通常使用不定參數(shù)特性來(lái)定義占位符，從而簡(jiǎn)化數(shù)據(jù)處理的過(guò)程

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

4.2 實(shí)際應(yīng)用

“標(biāo)簽?zāi)０濉钡囊粋€(gè)重要應(yīng)用，就是過(guò)濾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)過(guò)filterHTML函數(shù)處理，里面的特殊字符都會(huì)被轉(zhuǎn)義。

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

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

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

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

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

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

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位訪問(wèn)者

5.新增的字符串方法

5.1 查找字符串

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

ES6新增了三個(gè)方法來(lái)查找字符串 :

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

startsWith 方法會(huì)在給定文本出現(xiàn)在字符串開(kāi)頭時(shí)返回 true，否則返回 false 。

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

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

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

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

當(dāng)提供第二個(gè)參數(shù)后，includes 和 startsWith 會(huì)以該索引為起始點(diǎn)進(jìn)行匹配

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 將字符串的長(zhǎng)度與參數(shù)值相減并將得到的值作為檢索的起始點(diǎn)

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

應(yīng)用場(chǎ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方法

接受一個(gè)數(shù)字參數(shù)作為字符串的重復(fù)次數(shù)。該方法返回一個(gè)重復(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給字符串帶來(lái)了很多實(shí)用性的擴(kuò)展：

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

函數(shù)。

字符串模版的出現(xiàn)讓我們?cè)僖膊挥闷唇幼兞苛耍抑С衷谀０謇镉泻?jiǎn)單計(jì)算操作。

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