ES6學習記錄3.字符串

  今天看了字符串的擴展，感覺不太懂，簡單地做下總結。

1. 字符的 Unicode 表示法
     用\uxxxx形式表示一個字符，其中xxxx表示字符的 Unicode 碼點。這種表示法只限於碼點在\u0000~\uFFFF之間的字符。超出這個範圍的字符，必須用兩個雙字節的形式表示。

2. 字符串的遍歷器接口
     ES6 爲字符串添加了遍歷器接口，使得字符串可以被for...of循環遍歷。

for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

除了遍歷字符串，這個遍歷器最大的優點是可以識別大於0xFFFF的碼點，傳統的for循環無法識別這樣的碼點。

let text = String.fromCodePoint(0x20BB7);

for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}
// " "
// " "

for (let i of text) {
  console.log(i);
}
// "𠮷"

上面代碼中，字符串text只有一個字符，但是for循環會認爲它包含兩個字符（都不可打印），而for...of循環會正確識別出這一個字符

3. 模板字符串
   傳統的 JavaScript 語言，輸出模板通常是這樣寫的（下面使用了 jQuery 的方法）。

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

這種寫法相當繁瑣不方便，ES6 引入了模板字符串解決這個問題。

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

模板字符串（template string）是增強版的字符串，用反引號（`）標識。它可以當作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。
模板字符串中嵌入變量，需要將變量名寫在 ${} 之中。大括號內部可以放入任意的 JavaScript 表達式，可以進行運算，以及引用對象屬性。模板字符串之中還能調用函數。

4. 標籤模板
   標籤模板其實不是模板，而是函數調用的一種特殊形式。“標籤”指的就是函數，緊跟在後面的模板字符串就是它的參數。

let a = 5;
let b = 10;

tag`Hello ${ a + b } world ${ a * b }`;
// 等同於
tag(['Hello ', ' world ', ''], 15, 50);

上面代碼中，模板字符串前面有一個標識名tag，它是一個函數。整個表達式的返回值，就是tag函數處理模板字符串後的返回值
爲什麼會產生一個空字符串呢？
-----這和用split()分割字符串是一樣的，它是用${}做分割符。分割符的兩邊的內容都會產生一個元素。“Hello ${ a + b } world ${ab}".split(/${.?}/) 分割成"Hello “,” world”," "。
tag函數的第一個參數是一個數組，該數組的成員是模板字符串中那些沒有變量替換的部分，也就是說，變量替換隻發生在數組的第一個成員與第二個成員之間、第二個成員與第三個成員之間，以此類推。
tag函數的其他參數，都是模板字符串各個變量被替換後的值。由於本例中，模板字符串含有兩個變量，因此tag會接受到15和50兩個參數。