ECMAScript6官方文檔學習筆記（三）----字符串的擴展

字符的遍歷器接口

ES6 爲字符串添加了遍歷器接口（詳見《Iterator》一章），使得字符串可以被for…of循環遍歷。

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

模板字符串

模板字符串（template string）是增強版的字符串，用反引號（`）標識。它可以當作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入變量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

上面代碼中的模板字符串，都是用反引號表示。如果在模板字符串中需要使用反引號，則前面要用反斜槓轉義。

let greeting = `\`Yo\` World!`;

如果使用模板字符串表示多行字符串，所有的空格和縮進都會被保留在輸出之中。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);

上面代碼中，所有模板字符串的空格和換行，都是被保留的，比如

標籤前面會有一個換行。如果你不想要這個換行，可以使用trim方法消除它。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());

大括號內部可以放入任意的 JavaScript 表達式，可以進行運算，以及引用對象屬性。

let x = 1;
let y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"

模板字符串之中還能調用函數。

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar

如果需要引用模板字符串本身，在需要時執行，可以寫成函數。

let func = (name) => `Hello ${name}!`;
func('Jack') // "Hello Jack!"

標籤模板

模板字符串的功能，不僅僅是上面這些。它可以緊跟在一個函數名後面，該函數將被調用來處理這個模板字符串。這被稱爲“標籤模板”功能（tagged template）。

alert`123`
// 等同於
alert(123)

字符串的新增方法

String.fromCodePoint():
ES5 提供String.fromCharCode()方法，用於從 Unicode 碼點返回對應字符，但是這個方法不能識別碼點大於0xFFFF的字符。

String.raw():
ES6 還爲原生的 String 對象，提供了一個raw()方法。該方法返回一個斜槓都被轉義（即斜槓前面再加一個斜槓）的字符串，往往用於模板字符串的處理方法。

String.raw`Hi\n${2+3}!`
// 實際返回 "Hi\\n5!"，顯示的是轉義後的結果 "Hi\n5!"

String.raw`Hi\u000A!`;
// 實際返回 "Hi\\u000A!"，顯示的是轉義後的結果 "Hi\u000A!"

codePointAt():
JavaScript 內部，字符以 UTF-16 的格式儲存，每個字符固定爲2個字節。對於那些需要4個字節儲存的字符（Unicode 碼點大於0xFFFF的字符），JavaScript 會認爲它們是兩個字符。
ES6 提供了codePointAt()方法，能夠正確處理 4 個字節儲存的字符，返回一個字符的碼點。

includes()：返回布爾值，表示是否找到了參數字符串。
startsWith()：返回布爾值，表示參數字符串是否在原字符串的頭部。
endsWith()：返回布爾值，表示參數字符串是否在原字符串的尾部。
repeat():返回一個新字符串，表示將原字符串重複n次

ES2017 引入了字符串補全長度的功能。如果某個字符串不夠指定長度，會在頭部或尾部補全。**padStart()**用於頭部補全，**padEnd()**用於尾部補全。

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

ES2019 對字符串實例新增了**trimStart()和trimEnd()**這兩個方法。它們的行爲與trim()一致，**trimStart()**消除字符串頭部的空格，**trimEnd()**消除尾部的空格。它們返回的都是新字符串，不會修改原始字符串。

matchAll():返回一個正則表達式在當前字符串的所有匹配