ES6+ 模版字符串

1. 前言

ES6 對(duì)字符串進(jìn)行了擴(kuò)展，使之更具有表達(dá)力，在 ES5 中字符串的功能是很單一，只能定義變量，不能在字符串中進(jìn)行邏輯運(yùn)算，只能使用 + 通過(guò)拼接的方式實(shí)現(xiàn)。另外，字符串的拼接和換行都需要借助 + 和 \n 才能實(shí)現(xiàn)，很麻煩更容易出錯(cuò)。這無(wú)疑限制了我們對(duì)字符串的操作。ES6 對(duì) ES5 中存在的問(wèn)題進(jìn)行了修復(fù)和擴(kuò)充，本節(jié)我們來(lái)學(xué)習(xí) ES6 中的模版字符串語(yǔ)法，在本節(jié)你可以了解一下內(nèi)容：

• 字符串換行；
• 字符串拼接；
• 字符串中包含邏輯運(yùn)算；
• 帶標(biāo)簽的模版字符串。

下面我們先來(lái)看看在 ES5 中字符串都是哪些使用場(chǎng)景，從而更好地對(duì)比 ES6 所提供的模版字符串到底有什么好處，解決了那些問(wèn)題。

2. ES5 中的字符串

我們知道在 ES5 中定義一個(gè)字符串時(shí)會(huì)把字符串放入引號(hào)里，使用 ''（單引號(hào)）或 ""（雙引號(hào)）來(lái)包裹字符串。而對(duì)于多個(gè)字符串的拼接則需要使用 +（加號(hào)運(yùn)算符） 來(lái)實(shí)現(xiàn)多個(gè)字符串的連接。

var a = 'imooc';
var b = 7;
console.log('a的值是:' + a + 'b的值是:' + b);
// a的值是:1b的值是:2

可以看到在 ES5 中字符串的拼接是比較麻煩的，在 ES5 中字符串還有一種拼接場(chǎng)景 —— 多行拼接，需要使用換行符 \n 和 + 組合實(shí)現(xiàn)。看下面的例子：

var str = '第一行內(nèi)容\n' +
'第二行內(nèi)容\n' + 
'第三行內(nèi)容\n';
console.log(str);
/**
第一行內(nèi)容
第二行內(nèi)容 
第三行內(nèi)容
*/

上面的代碼拼接了多行文本字符串，可以看出來(lái)如果是很多行的話，很容易出錯(cuò)，而在 web 開(kāi)發(fā)的早期沒(méi)有模版概念的時(shí)候， 數(shù)據(jù)，然后組裝成 DOM 結(jié)構(gòu)插入到頁(yè)面中，其中還涉及到傳遞變量的問(wèn)題，下面看一個(gè)插入 DOM 的示例：

<div id="imooc"></div>
<script type="text/javascript">
    let lang = 'ES6';
    document.getElementById('imooc').innerHTML = '<h1>慕課網(wǎng)' + lang + ' Wiki</h1>' +
      '<p>這里是慕課網(wǎng)Wiki，未經(jīng)許可不能轉(zhuǎn)載</p>' +
      '<div>Wiki主要內(nèi)容內(nèi)容</div>';
</script>

上面的代碼就是在早期 web 開(kāi)發(fā)中經(jīng)常使用的場(chǎng)景，可以看出在拼接時(shí)稍有不慎就會(huì)出現(xiàn)拼接錯(cuò)誤，這也造成了問(wèn)題排查的難度。

ES6 為了解決以上問(wèn)題提出了模版字符串的概念，那么下面我們看看模版字符串是怎么解決這些問(wèn)題的。

3. 模版字符串的使用

有了模版字符串后就不需要使用加號(hào)了，通過(guò)使用 ````（反引號(hào)）中直接定義多行字符串和變量的拼接。如果是變量就包裹在 ${} 的大括號(hào)中。另外，在模版字符串中還可以使用表達(dá)式和使用函數(shù)標(biāo)簽的方式來(lái)增加字符串復(fù)雜的功能，擴(kuò)展了字符串的功能。下面我們來(lái)看一下模版字符串都有哪些使用場(chǎng)景。

3.1 字符串拼接

在 ES6 中可以使用反引號(hào)來(lái)聲明一個(gè)字符變量的值。

let name = `imooc`;

上面例子中我們知道在 ES5 中拼接字符串需要用 + 運(yùn)算符，但在 ES6 中把字符串寫在 ```` 中，如果字符串中有變量可以使用 ${} 把變量放在大括號(hào)中。如下實(shí)例：

var name = '慕課網(wǎng)';
var lang = 'ES6';
console.log(`這是${name}的${lang}教程！`);
// 這是慕課網(wǎng)的ES6教程！

上面的代碼中把變量寫在 ${} 的大括號(hào)中，在編譯的過(guò)程會(huì)直接替換對(duì)應(yīng)的變量。這種方式很明了地表達(dá)了字符串的完整性，更加直觀地表達(dá)字符串的含義。

3.2 多行字符串

使用 ES6 的模版字符串時(shí)，不需要添加換行符，反引號(hào)里的內(nèi)容就是最后結(jié)果的直觀表達(dá)，下面我們看一下上面插入 DOM 的例子使用 ES6 是如何寫的。

<div id="imooc"></div>
<script type="text/javascript">
    let lang = 'ES6';
    document.getElementById('imooc').innerHTML = `<h1>慕課網(wǎng)${lang}Wiki</h1>
      <p>這里是慕課網(wǎng)Wiki，未經(jīng)許可不能轉(zhuǎn)載</p>
      <div>Wiki主要內(nèi)容</div>`;
</script>

對(duì)上述 DOM 進(jìn)行插入操作，在有變量的地方把變量直接放入 ${} 大括號(hào)中即可。

3.3 邏輯運(yùn)算

有時(shí)候需要對(duì)變量進(jìn)行計(jì)算或是根據(jù)添加進(jìn)行判斷得到不同場(chǎng)景下的字符串，ES5 的做法很笨也是只能通過(guò) + 的方式連接，要么是計(jì)算好了然后再連接，這無(wú)疑都是很麻煩的，下面看一個(gè)求和例子：

var a = 1;
var b = 2;
// ES5
console.log('a + b 的和是: ' + (a + b));   // a + b 的和是: 3
// ES6
console.log(`a + b 的和是: ${a + b}`);     // a + b 的和是: 3
var age = 16;
console.log(`小明是${age > 18 ? '成年人' : '未成年人'}`)
// 小明是未成年人

在上面例子的目標(biāo)字符串中，可以在 ${} 占位符中直接書寫表達(dá)式。

3.4 帶標(biāo)簽的模版字符串

帶標(biāo)簽的模版字符串類似函數(shù)的使用，如果我們想在字符串中做一些復(fù)雜的邏輯判斷，下面先看一下 ES5 的例子：

var age = 7;
var str = ''
if (age > 18) {
  str = age + '歲成年了';
} else {
  str = age + '歲還未成年';
}
console.log('imooc今年' + str); // imooc今年7歲還未成年

上面的代碼是根據(jù)年齡判斷是否成年了，ES5 方式很簡(jiǎn)單，就是一步一步地拼裝數(shù)據(jù)，ES6 提供了帶標(biāo)簽的模板字符串，它的使用方式如下：

function isAdult(strArr, age) {
  var s1 = strArr[0]; // strArr是字符串被變量分割后的數(shù)組
  var str = ''
  if (age > 18) {
    str = age + '歲成年了';
  } else {
    str = age + '歲還未成年';
  }
  return `${s1}${str}`;
}
var test = isAdult`imooc今年${age}`
console.log(test);    // imooc今年7歲還未成年

帶標(biāo)簽的模板字符串可以把模版字符串的內(nèi)容作為參數(shù)傳到函數(shù)中，使用方式和函數(shù)的調(diào)用略有不同 fn${expression} 函數(shù) fn 會(huì)接收后面表達(dá)式作為參數(shù)，第一個(gè)參數(shù)是表達(dá)式中所有字符串組成的數(shù)組，第二個(gè)以后的參數(shù)是表達(dá)式中的變量的值，和變量是一一對(duì)應(yīng)的。

4. 小結(jié)

本節(jié)通過(guò) ES5 的字符串拼接中存在各種問(wèn)題和繁瑣性，引入了為什么 ES6 會(huì)有字符串模版的概念，總結(jié)字符串模版的使用有以下幾點(diǎn)：

1. 可以對(duì)字符串進(jìn)行拼接和多行字符串的處理；
2. 模板字符串中可以包含表達(dá)式，也可以進(jìn)行邏輯運(yùn)算；
3. 帶標(biāo)簽的模板字符串可以把模板字符串的內(nèi)容當(dāng)作參數(shù)傳遞到函數(shù)中，進(jìn)行復(fù)雜的邏輯。