【ES6基礎】模板字串（Template String）

前端達人發表於2019-04-19

模板字串是ES6中非常重要的一個新特性，這個特性使得我們處理相關業務變得更加容易。比如在處理嵌入表示式、多行字串、字串中插入變數、字串格式化等方面的應用。模板字串使用反鉤號（backticks,`），而不是單引號或雙引號。以下是個簡單的示例：

let str1 = `hello!!!`; //template string
let str2 = "hello!!!";
console.log(str1 === str2); //output "true”複製程式碼

今天的文章將從以下幾個方面進行介紹：

表示式
多行字串
標籤模板字串（Tagged template literals）
原始字串(Raw strings)

本篇文章閱讀時間預計6分鐘

表示式

模板字串的出現，給ES6新增了“表示式”的概念。在ES6之前，我們只能用加號連線變數表示式，程式碼如下：

var a = 20;
var b = 10;
var c = "JavaScript";
var str = "My age is " + (a + b) + " and I love " + c;
console.log(str);複製程式碼

自從模板字串表示式的出現後，我們嵌入表示式的方式更加簡單，即${變數表示式}，變數表示式就相當函式一樣，變數傳值進行替換。如果我們要使用自定義的函式處理字串，我們可以使用標籤模板字串（Tagged template literals），標籤函式進行處理（a tag function）。下一小節將會講到。先讓我們看下如何使用模板字串嵌入表示式，程式碼如下：

const a = 20;
const b = 10;
const c = "JavaScript";
const str = `My age is ${a+b} and I love ${c}`;
console.log(str);
//output “My age is 30 and I love JavaScript"複製程式碼

標籤模板字串

首先我們先建立一個標記的模板字串，使用函式處理模板字串，如下段程式碼所示：

const tag = function(strings, aPLUSb, aSTARb) {
  // strings is: [ 'a+b equals ', ' and a*b equals ', '' ]
  // aPLUSb is: 30
  // aSTARb is: 200
  return 'SURPRISE!';
};
const a = 20;
const b = 10;
let str = tag `a+b equals ${a+b} and a*b equals ${a*b}`;
console.log(str);複製程式碼

編譯器是如何處理這段程式碼的？第一個引數strings包含所有的靜態字串，以表示式變數進行分割成陣列（類似split('$')的效果）；然後逐一解析變數表示式，傳到對應的引數aPLUSb和aSTARb。

如果我們想修改aPLUSb, aSTARb的值，我們可以在函式內部進行修改：

const tag = function(strings, aPLUSb, aSTARb) {
  // strings is: ['a+b equals', 'and a*b equals']
  // aPLUSb is: 30
  // aSTARb is: 200
  aPLUSb = 200;
  aSTARb = 30;
  return `a+b equals ${aPLUSb} and a*b equals ${aSTARb}`;
};

const a = 20;
const b = 10;
let str = tag `a+b equals ${a+b} and a*b equals ${a*b}`;
console.log(str);
//output “a+b equals 200 and a*b equals 30”複製程式碼

使用此方法我們可以建立靈活度更高的模板字串，接收後臺資料渲染我們前端的介面。

多行字串

Es6的模板字串給我們提供了一種建立多行文字字串的新方法。在ES6之前我們只能使用"\n“在字串中進行換行，程式碼如下：

console.log("1\n2\n3");
//output
//1
//2
//3複製程式碼

在es6中，我們可以直接輸入回車進行換行，如下段程式碼所示：

console.log(`1
2
3`);複製程式碼

模板字串的方法會在每一行的最後新增"\n"進行換行。

原始字串(Raw strings)

原始字串是一個普通字串，其中不會解釋轉義字元。我們可以使用模板字串建立原始字串。我們可以使用String.raw來獲取原始字串，程式碼如下：

let s = String.raw `xy\n${ 1 + 1 }z`;
console.log(s); 
//output "xy\n2z"複製程式碼

這裡的\n不被解釋成換行符。相反，它是一個由兩個字元組成的原始字串，及“\”和“\n”，變數S的長度為6。如果我們使用自定義的標籤函式處理模板字串，我們可以使用String.raw方法來獲取，程式碼如下：

let tag = function(strings, ...values) {
  return strings.raw[0]
};
let str = tag `Hello \n World!!!`;
console.log(str);”
//output "Hello \n World!!!"複製程式碼

但是也有例外(進行轉義)：