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

模板字符串是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!!!"複製代碼

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

• 任何以\u開頭的內容都將被視爲Unicode轉義
• 以\x開頭的任何內容都將被視爲十六進制轉義
• 任何以\開頭而後跟着一個數字將被視爲八進制轉義

小節

今天的內容就介紹到這裏，模板字符串讓咱們處理字符串更加容易，尤爲是咱們在渲染前端界面展現數據時，大大減小了代碼量，增強了易讀性。

【ES6基礎】let和做用域

【ES6基礎】const介紹

【ES6基礎】默認參數值

【ES6基礎】展開語法(Spread syntax)

【ES6基礎】解構賦值（destructuring assignment）

【ES6基礎】箭頭函數（Arrow functions）

更多精彩內容，請微信關注」前端達人」公衆號！