聊聊 ES6 中的模版字面量

《深入理解ES6》閱讀隨筆

在 ES5 中字符串是放在單雙引號中使用的。而在 ES6 中還可以把字符串放在兩個反撇號（`）之間使用，也就是所謂的模版字面量方式。模版字面量支持創建領域專用語言（DSL），該方式更加安全。模版字面量主要用於應對下面三種情況：
1. 處理多行字符串：在 ES5 中，如果想要在編碼時輸入多行字符串，可以利用一個通用的引擎 bug，如下所示：

var readme = 'I am \
bug'
console.log(readme) // 輸出 I am bug

但是在輸出結果時，並沒有換行。如果想要輸出換行，那麼需要通過在字符串中加入 \n 的方式來實現。在 ES6 中，該現象得到了合理處理，我們終於可以快樂的通過模版字面量的方式來在字符串中自由換行了（原來 \n 的方式依然成立），如下所示：

const readme = `I am 
bug`
console.log(readme)  // 輸出 I am 
                     //  bug

2. 字符串內嵌變量：在 ES5 中，如果想要在字符串中內嵌變量，需要通過拼接的方式，如下所示：

var name = 'bug'
var result = 'I am ' + name
console.log(result)  // 輸出： I am bug

使用這種方式雖然也能實現字符串內嵌變量，但是書寫起來並不方便，而且存在安全隱患。在 ES6 中，該也現象得到了合理解決，我們可以將 Javascript 表達式存放在佔位符 ${ 和 } 結尾之間，來完成字符串內嵌變量的功能。使用起來既方便，也比原來的寫法更安全。實現過程如下所示：

const name = 'bug'
const result = `I am ${name}` 
console.log(result)  // 輸出： I am bug

3. HTML 轉義能力：該功能纔是 ES6 模版字面量的核心功能。下面是一個 HTML 轉義中關於模版標籤的應用：

const name = "bug";
function readme(list, ...args) {
  let str = "";
  for (let i = 0; i < list.length-1; i++) {
    str += list[i];
    if (args[i] === "bug") {
      args[i] = "new bug";
    }
    str += args[i];
  }
  return str;
}
const result = readme`I am ${name}`;
console.log(result); // 輸出： I am new bug