Vue進階（五十八）：Es6之字符串處理常用方法

1.字符串的遍歷器接口

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循環會正確識別出這一個字符。

codePointAt方法是測試一個字符由兩個字節還是由四個字節組成的最簡單方法。

function is32Bit(c) {
  return c.codePointAt(0) > 0xFFFF;
}
 
is32Bit("𠮷") // true
is32Bit("a") // false

2.合成字符串比較法 normalize()

'\u01D1'==='\u004F\u030C' //false

'\u01D1'.length // 1
'\u004F\u030C'.length // 2

上面代碼表示，JavaScript 將合成字符視爲兩個字符，導致兩種表示方法不相等。

ES6 提供字符串實例的normalize()方法，用來將字符的不同表示方法統一爲同樣的形式，這稱爲 Unicode 正規化。

'\u01D1'.normalize() === '\u004F\u030C'.normalize()
// true

3.確定一個字符串是否包含在另一個字符串中

let s = 'Hello world!';
 
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

這三個方法都支持第二個參數，表示開始搜索的位置。

let s = 'Hello world!';
 
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

上面代碼表示，使用第二個參數n時，endsWith的行爲與其他兩個方法有所不同。它針對前n個字符，而其他兩個方法針對從第n個位置直到字符串結束。

4.重複字符串

repeat方法返回一個新字符串，表示將原字符串重複n次。

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

5.補全字符串

如果某個字符串不夠指定長度，會在頭部或尾部補全。padStart()用於頭部補全，padEnd()用於尾部補全。

如果用來補全的字符串與原字符串，兩者的長度之和超過了指定的最小長度，則會截去超出位數的補全字符串。

'abc'.padStart(10, '0123456789')
// '0123456abc'

padStart的常見用途是爲數值補全指定位數。下面代碼生成 10 位的數值字符串。

'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"

另一個用途是提示字符串格式。

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"