ES6—字符串模板引擎（4）

時間 2019-11-07

原文原文鏈接

字符串模板引擎html

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

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

解決問題。app

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

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

將其轉化成ES6寫法，其實很是簡單：函數

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

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

若是想在字符串內部使用反引號，只需使用反斜槓（）轉義便可spa

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

2.多行字符串3d

傳統的JavaScript語言，輸出模板一般是這樣寫的：code

var name = '黑子';
var age = 8;
$('#result').append(
  '個人寵物狗叫 <b>' + name + '</b>\n' +
      '今年\n' +
      '<em>' + age+ '</em>歲，\n'+
  '十分可愛!'
);

可是在ES6中，要得到一樣效果的多行字符串，只需使用以下代碼：

let name = '黑子';
let age = 8;
$('#result').append(
  `個人寵物狗叫 <b>${name}</b>
      今年 
      <em>${age}</em>歲，
  十分可愛!`
);

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

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

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

要的位置直接換行便可，此處的換行會同步出如今結果中。簡單、清晰、明瞭。

注意：若是使用模板字符串表示多行字符串，全部的空格和縮進都會被保留在輸出之中。所以須要特別留意縮進。

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

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

若是必定要經過適當的縮進來對齊文本，能夠考慮在多行模板字面量的第一行空置並在後面的幾行縮進

let html = `
<div>
    <h1>Title</h1>
</div>`.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`<p>${sender} 你好啊</p>`;
function filterHTML(templateData) {
  var s = templateData[0];
  for (var i = 1; i < arguments.length; i++) {
    var arg = String(arguments[i]);
    // 轉義佔位符中的特殊字符。
    s += arg.replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;");
    // 不轉義模板中的特殊字符。
    s += templateData[i];
  }
  return s;
}

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

var sender = '<script>alert("買了個包")</script>'; // 惡意代碼
var message = filterHTML`<p>${sender} 你好啊</p>`;

console.log(message);
// <p>&lt;script&gt;alert("買了個包")&lt;/script&gt;  你好啊</p>

即便一個惡意命名的用戶，例如黑客向其餘用戶發送一條騷擾信息，不管如何這條信息都會被轉義爲普通字符串，

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

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

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

函數。

字符串模版的出現讓咱們不再用拼接變量了，並且支持在模板裏有簡單計算操做。

但願你們能動手練習一下，並把這些新特性應用到工做中，很快就掌握了，用起來能讓你們的工做更輕鬆，愉悅。