ES6+ 字符串的擴(kuò)展

1. 前言

由于歷史原因，在 JavaScript 創(chuàng)建之初，市面上的編碼方式還是很混亂的，JavaScript 在創(chuàng)建之初，使用的是 1990 年公布的 UCS-2 的編碼方法，使用 2 個(gè)字節(jié)表示 1 個(gè)字符，那時(shí) UTF-8、UTF-16、UTF-32 還沒有完全確定?，F(xiàn)在的 JavaScript 主要使用的是 UTF-16 來存儲的。

但針對于紛繁復(fù)雜的網(wǎng)頁字符是不能完全地覆蓋的，在早期使用瀏覽器時(shí)，經(jīng)常會(huì)在瀏覽器中選擇字符串編碼方式。那么有沒有一種編碼可以涵蓋世界上的所有字符呢？答案是有的 ——Unicode。它是一個(gè)字符集，它的定義很簡單，用一個(gè)碼點(diǎn) (code point) 映射一個(gè)字符。碼點(diǎn)值的范圍是從 U+0000 到 U+10FFFF，可以表示超過 110 萬個(gè)符號。

所以后來的 ECMAScript 一直致力于解決歷史遺留的問題和統(tǒng)一瀏覽器的編碼方式。這時(shí) ES6 出來了，對 Unicode 進(jìn)行了加強(qiáng)，也修復(fù)了 ES5 中的問題。在 模版字符串 的小節(jié)中已經(jīng)學(xué)習(xí)了關(guān)于字符串模板字符串的內(nèi)容，本節(jié)我們繼續(xù)學(xué)習(xí) ES6 中字符串其他的擴(kuò)展。

2. Unicode

Unicode 只是一個(gè)符號集，它只規(guī)定了符號的二進(jìn)制代碼，卻沒有規(guī)定這個(gè)二進(jìn)制代碼應(yīng)該如何存儲。所以出現(xiàn)了 Unicode 的多種存儲方式，不同的實(shí)現(xiàn)導(dǎo)致了 Unicode 在很長一段時(shí)間內(nèi)無法推廣，而且本來英文字母只用一個(gè)字節(jié)存儲就夠了，如果 Unicode 統(tǒng)一規(guī)定，每個(gè)符號用三個(gè)或四個(gè)字節(jié)表示，那么每個(gè)英文字母前都必然有二到三個(gè)字節(jié)是空，這對于存儲來說是極大的浪費(fèi)，文本文件的大小會(huì)因此大出二三倍，這是無法接受的。

首先我們來看下一個(gè)字符是怎么表示的，JavaScript 提供了 charCodeAt() 獲取指定位置的字符的值，返回的值在 0 到 65535 之間的整數(shù)。

var str = '慕課';
console.log(str.charCodeAt(0));	// 24917 轉(zhuǎn)成十六進(jìn)制 0x6155
console.log(str.charCodeAt(1));	// 35838 轉(zhuǎn)成十六進(jìn)制 0x8bfe
console.log(str.charCodeAt(2));	// NaN

看上面代碼打印結(jié)果，并轉(zhuǎn)成十六進(jìn)制了，而 Unicode 表示是把前面的 0x 換成 u，這就是 Unicode 的表示。在 ES5 中還存在一個(gè)問題，實(shí)例如下：

let str = '?';

console.log(str.length)  // 2 ，str 是 Emoji 表情符

console.log(str.charCodeAt(0)) // 55358 轉(zhuǎn)成十六進(jìn)制 0xd83e
console.log(str.charCodeAt(1)) // 56618 轉(zhuǎn)成十六進(jìn)制 0xdd2a

console.log('\ud83e\udd2a' === '?') // true

上面的代碼可以看到 str 是一個(gè) Emoji 的表情符號，使用length 屬性可以得到它的長度是 2，這完全不符合我們對這個(gè)字符串的定義。這就是 JavaScript 的編碼問題。為解決 charCodeAt() 方法獲取字符碼位錯(cuò)誤的問題，新增 codePointAt() 方法。

codePointAt() 方法完全支持 UTF-16，參數(shù)接收的是編碼單元的位置而非字符位置，返回與字符串中給定位置對應(yīng)的碼位，即一個(gè)整數(shù)，如下實(shí)例：

let str = '?';

console.log(str.codePointAt(0)) // 129322 轉(zhuǎn)成十六進(jìn)制 0x1f92a => u1f92a
console.log(str.codePointAt(1)) // 56618 轉(zhuǎn)成十六進(jìn)制 0xdd2a => udd2a

上面的代碼中，第二行打印位置 0 處的編碼單元開始的碼位，此例是從這個(gè)編碼單位開始的兩個(gè)編碼單元組合的字符（四個(gè)字節(jié)），所以會(huì)打印出所有碼位，即四字節(jié)的碼位 129322 即 0x1f92a，大于 0xffff，也證明了是占四個(gè)字節(jié)的存儲空間。

3. 字符串的遍歷器接口

ES6 為字符串添加了可遍歷接口，使得字符串可以被 for...of 進(jìn)行循環(huán)遍歷。如下實(shí)例：

var str = '慕課網(wǎng)?';
for (let item of str) {
  console.log(item);
}
// 慕
// 課
// 網(wǎng)
// ?

上面的代碼中，最后一個(gè)是 emoji 表情字符，存儲時(shí)占 4 個(gè)字節(jié)，但是通過 for...of 可以正確地迭代為一個(gè)字符。在 ES5 中則不行，我們來看個(gè)實(shí)例，把上面的字符串使用 ES5 中的 split 方法把字符串轉(zhuǎn)化成數(shù)組：

var str = '慕課網(wǎng)?';
console.log(str.split(''))
// ["慕", "課", "網(wǎng)", "?", "?"]

從上面的代碼中可以清晰地反映出表情字符是占四個(gè)字節(jié)，但是，ES5 不能把它當(dāng)作一個(gè)字節(jié)來處理所以就會(huì)出現(xiàn)數(shù)組后兩個(gè)元素的樣子。這也是 ES5 存在的主要問題之一，可以通過迭代器對復(fù)雜的字符串進(jìn)行正確的處理。

4. 小結(jié)

ES6 還提供了其他的字符串操作的方法，接下來的幾節(jié)專門講解字符串中新增的方法，更好地解決實(shí)際的開發(fā)問題。另外，ES6 還增加了模版字符串和帶標(biāo)簽的模板字符串，在 模板字符串中進(jìn)行了講解，遺忘的可以去看看。本節(jié)主要講解了，字符串對 Unicode 的增強(qiáng)，還有對字符串增加了遍歷接口，非常實(shí)用。