前端字符編碼小結(jié)

gitmilk 發(fā)布于2019-08-22 14:54 / 2134人閱讀

摘要：導(dǎo)語本文源于微信游戲春節(jié)王者搖心愿活動(dòng)英雄語音祝福自定義輸入模塊開發(fā)過程，對(duì)踩過的前端字符編碼的坑進(jìn)行記錄總結(jié)。只規(guī)定了字符編碼，而并沒有規(guī)定具體的編碼方式。

導(dǎo)語

本文源于微信游戲春節(jié)王者搖心愿活動(dòng)英雄語音祝福自定義輸入模塊開發(fā)過程，對(duì)踩過的前端字符編碼的坑進(jìn)行記錄總結(jié)。

Unicode 字符

Unicode（中文：萬國碼、國際碼、統(tǒng)一碼、單一碼）是計(jì)算機(jī)科學(xué)領(lǐng)域里的一項(xiàng)業(yè)界標(biāo)準(zhǔn)。它對(duì)世界上大部分的文字系統(tǒng)進(jìn)行了整理、編碼，使得電腦可以用更為簡(jiǎn)單的方式來呈現(xiàn)和處理文字。

簡(jiǎn)單地來說，Unicode 是一種字符編碼，它規(guī)定用一個(gè)碼點(diǎn)表示一個(gè)字符，其范圍為 U+0000~ U+10FFFF , 可以表示超過100萬個(gè)符號(hào)。Unicode 分成17個(gè)平面，其中第1個(gè)平面稱謂基本平面（也稱 BMP），其范圍為 U+0000~ U+FFFF,另外16個(gè)平面稱之為輔助平面，每個(gè)輔助平面擁有65536（即 2^16）個(gè)字符。

Unicode 只規(guī)定了字符編碼，而并沒有規(guī)定具體的編碼方式。因此就產(chǎn)生了不同的編碼方式，包括 UTF-8、UTF-16、UTF-32 等等。

UTF-16

本文主要介紹 UTF-16 編碼，不涉及 UTF-8、UTF-32 等其他編碼方式，需要擴(kuò)展閱讀請(qǐng)自行查閱。
UTF-16 是一種變長的編碼方式，可以用2個(gè)字節(jié)或者4個(gè)字節(jié)來編碼 Unicode 字符。UTF-16 使用兩個(gè)字節(jié)編碼 Unicode 字符中的基本平面的字符，使用 4 個(gè)字節(jié)編碼 Unicode 字符中的輔助平面的字符。

UTF-16 使用變長字節(jié)的編碼方式，那么如何判斷一個(gè)字符是基本平面字符還是輔助平面字符？
UTF-16 規(guī)定了BMP中，從 U+D800 到 U+DFFF 之間BMP的區(qū)段是永久保留不映射到字符，可以利用這段區(qū)間來編碼輔助平面的字符。
簡(jiǎn)單來說，從左到右掃描，發(fā)現(xiàn)前兩個(gè)字節(jié)不在 U+D800 到 U+DFFF 之UTF間，則可認(rèn)定這兩個(gè)字節(jié)組成了一個(gè)基本平面的字符，發(fā)現(xiàn)前兩個(gè)字節(jié)處于 U+D800 到 U+DFFF 之間，則需要讀取下兩個(gè)字節(jié)，拼湊成四個(gè)字節(jié)組成一個(gè)輔助平面的字符。

前面提到輔助平面有16（即 2^4）個(gè)，每個(gè)輔助平面擁有65536（即 2^16）個(gè)字符，因此輔助平面共有 2^20個(gè)字符，也就是說需要 20 位二進(jìn)制位來對(duì)應(yīng)這些字符。

16 * 65536 = 2^4 * 2^16 = 2^20

從 U+D800 到 U+DFFF 之間剛好有 2^11 個(gè)碼元，因此 UTF-16 使用 U+D800 到 U+DBFF 之間（共有2^10個(gè)）碼元作為高位， U+DC00 到 U+DFFF 之間（共有 2^10 個(gè)）作為低位，這樣子高低位 4 個(gè)字節(jié)組成的編碼方式（代理對(duì)）就可以表示一個(gè)輔助平面的字符了。

其中，輔助平面字符 Unicode 到 UTF-16 代理對(duì)的轉(zhuǎn)換規(guī)則如下（ c 表示 Unicode 的碼元，H 表示代理對(duì)的高位字節(jié)，L 表示代理對(duì)的低位字節(jié)）：

H = Math.floor((c - 0x10000) / 0x400) + 0xD800 
L = (c - 0x10000) % 0x400 + 0xDC00

以上面的音樂字符為例，其 Unicode 字符的碼元為 U+1F3B6,可以通過 https://codepoints.net/ 查詢到對(duì)應(yīng)字符信息

> H = Math.floor((0x1F3B6 - 0x10000) / 0x400) + 0xD800 
0xd83c

> L = (0x1F3B6 - 0x10000) % 0x400 + 0xDC00
0xdfb6

通過上面的轉(zhuǎn)換規(guī)則可以算出其代理對(duì)為 ud83cudfb6

UCS-2

UCS-2 是 UTF-16 未出世之前的一種編碼方式，可以簡(jiǎn)單理解為 UTF-16的子集。它采用定長2字節(jié)編碼，因此只能表示基本平面的字符，對(duì)于輔助平面字符，它只能理解為這是 “兩個(gè)基本平面字符” ，無法正常表示。

javascript的編碼方式

好了，進(jìn)入正題了。前面講了 UTF-16 和 UCS-2，那么 javascript 到底是采用什么編碼的呢？
這個(gè)要分情況來講，javascript 引擎采用 UTF-16 編碼，而 javascript 語言本身的設(shè)計(jì)是采用 UCS-2 編碼方式。
因此，當(dāng)我們使用 UCS-2 編碼方式設(shè)計(jì)的 javascript 接口來處理 UTF-16 編碼的字符，就會(huì)出現(xiàn)很多問題。
比如：

那么如何解決這兩者編碼方式不一致造成的問題呢，有兩種方式：

ES6

新版本的ECMA Script提供了新的API來正確處理字符

正則

利用正則表達(dá)式對(duì)其修正（項(xiàng)目也是采用這種方式）

var regexAstralSymbols = /[uD800-uDBFF][uDC00-uDFFF]/g
// 獲取字符的長度
function countSymbols(string) {
    return string
        // 把代理對(duì)改為一個(gè)BMP的字符.
        .replace(regexAstralSymbols, "_")
        // …這時(shí)候取長度就妥妥的啦.
        .length;
}

// 獲取前6個(gè)字符
function sliceSymbols(str, limit) {
    var output = [];
    var index = 0;
    var oldStr = str;
    str = str.replace(regexAstralSymbols, function(input, offset, match) {
        if( offset > index ) {
            output = output.concat(match.slice(index, offset).split(""));
        }
        index = offset + input.length;
        output.push(input)
        return "";
    });

    if( index < oldStr.length  ) {
        output = output.concat(oldStr.slice(index, oldStr.length).split(""));
    }
    return output.slice(0, limit).join("");
}

實(shí)現(xiàn)效果如下:

上面的解決方法基本可以解決大部分的字符問題，但是在遇到某些emoji表情依然會(huì)有些問題。

emoji

emoji表情符號(hào)是一種象形文字（圖片符號(hào)），通常以豐富多彩的形式呈現(xiàn)并在文本中以內(nèi)聯(lián)形式使用，起源于日本。Unicode 對(duì) emoji 表情做了劃分范圍，大部分屬于輔助平面字符，目前 Unicode 中收錄的 emoji 表情達(dá)到了 2700多個(gè)。因此，在大部分情況下，使用UTF-16的代理對(duì)來處理emoji 表情是沒有問題。但在 emoji 表情中，還存在著一些字符（Emoji Sequences），它們沒有顯示的樣式，主要起著連接、控制等作用。目前有下面幾種：

控制符和

, 作用是讓基礎(chǔ)Emoji 變成更接近文本樣式( text-style )。
, 作用則是讓基礎(chǔ)Emoji 變成更接近Emoji樣式( emoji-style )。

零寬連接符

emoji 除了單個(gè) emoji 符號(hào)，還可以通過零寬連接符將多個(gè) emoji 連接成一個(gè) emoji。比如 ud83dudc68是表示一個(gè) man，ud83cudf93表示一個(gè)學(xué)士帽，這兩個(gè)通過零寬連接符連接起來 ud83dudc68u200dud83cudf93就表示一個(gè)男學(xué)生了。

因此，為了解決emoji這些Emoji Sequences，將正則進(jìn)行擴(kuò)展：

var regexAstralSymbols = /[uD800-uDBFF][uDC00-uDFFF][u200D|uFE0F|uFE0E]|[uD800-uDBFF][uDC00-uDFFF]/g;

除了以上兩種比較常見的 Emoji Sequences，其實(shí)還有 Keycap Sequence, Flag Sequence, Tag Sequence, Modifier Sequence等字符，可以參考這里。

參考鏈接

https://mathiasbynens.be/note...
https://mathiasbynens.be/note...
https://codepoints.net/
http://www.alloyteam.com/2016...
http://unicode.org/emoji/
https://unicode.org/emoji/cha...
http://unicode.org/emoji/char...