ES6+ 模版字符串

1. 前言

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

• 字符串換行；
• 字符串拼接；
• 字符串中包含邏輯運算；
• 帶標簽的模版字符串。

下面我們先來看看在 ES5 中字符串都是哪些使用場景，從而更好地對比 ES6 所提供的模版字符串到底有什么好處，解決了那些問題。

2. ES5 中的字符串

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

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

可以看到在 ES5 中字符串的拼接是比較麻煩的，在 ES5 中字符串還有一種拼接場景 —— 多行拼接，需要使用換行符 \n 和 + 組合實現(xiàn)?？聪旅娴睦樱?/p>

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

上面的代碼拼接了多行文本字符串，可以看出來如果是很多行的話，很容易出錯，而在 web 開發(fā)的早期沒有模版概念的時候， 數(shù)據(jù)，然后組裝成 DOM 結構插入到頁面中，其中還涉及到傳遞變量的問題，下面看一個插入 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)許可不能轉載</p>' +
      '<div>Wiki主要內(nèi)容內(nèi)容</div>';
</script>

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

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

3. 模版字符串的使用

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

3.1 字符串拼接

在 ES6 中可以使用反引號來聲明一個字符變量的值。

let name = `imooc`;

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

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

上面的代碼中把變量寫在 ${} 的大括號中，在編譯的過程會直接替換對應的變量。這種方式很明了地表達了字符串的完整性，更加直觀地表達字符串的含義。

3.2 多行字符串

使用 ES6 的模版字符串時，不需要添加換行符，反引號里的內(nèi)容就是最后結果的直觀表達，下面我們看一下上面插入 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)許可不能轉載</p>
      <div>Wiki主要內(nèi)容</div>`;
</script>

對上述 DOM 進行插入操作，在有變量的地方把變量直接放入 ${} 大括號中即可。

3.3 邏輯運算

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

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 ? '成年人' : '未成年人'}`)
// 小明是未成年人

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

3.4 帶標簽的模版字符串

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

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

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

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歲還未成年

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

4. 小結

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

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