ES6關於Unicode的相關擴展


前面的話

  JS中的字符串類型是由引號括起來的一組由16位Unicode字符組成的字符序列。在過去,16位足以包含任何字符,直到Unicode引入了擴展字符集,編碼規則不得不進行變更。本文將詳細介紹ES6關於Unicode的相關擴展

 

概述

  Unicode的目標是為世界上每一個字符提供唯一標識符,唯一標識符稱為碼位或碼點(code point)。而這些碼位是用於表示字符的,又稱為字符編碼(character encode) 

  在ES6之前, JS 的字符串以 16 位字符編碼(UTF-16)為基礎。每個 16 位序列(相當於2個字節)是一個編碼單元(code unit),可簡稱為碼元,用於表示一個字符。字符串所有的屬性與方法(如length屬性與charAt() 方法等)都是基於16位序列

【BMP】

  最常用的Unicode字符使用16位序列編碼字符,屬於“基本多語種平面”(Basic Multilingual Plane BMP),也稱為“零斷面”(plan 0), 是Unicode中的一個編碼區段,編碼介於U+0000——U+FFFF之間。超過這個范圍的碼位則要歸屬於某個輔助平面或稱為擴展平面(supplementary plane),其中的碼位僅用16位就無法表示了

  為此,UTF-16引入了代理對(surrogate pairs),規定用兩個16位編碼來表示一個碼位。這意味着,字符串里的字符有兩種:一種由一個碼元(共 16 位)來表示BMP字符,另一種用兩個碼元(共 32 位)來表示輔助平面字符

 

大括號表示

  JavaScript 允許采用\uxxxx形式表示一個字符,其中xxxx表示字符的 Unicode 碼位

// "a"
console.log("\u0061");

  但是,這種表示法只限於碼位在\u0000~\uFFFF之間的字符。超出這個范圍的字符,必須用兩個雙字節的形式表示

// "𠮷"
console.log("\uD842\uDFB7");

// "₻7"
console.log("\u20BB7");

  上面代碼表示,如果直接在\u后面跟上超過0xFFFF的數值(比如\u20BB7),JavaScript會理解成\u20BB+7。所以會顯示一個特殊字符,后面跟着一個7

  ES6 對這一點做出了改進,只要將碼位放入大括號,就能正確解讀該字符

// "𠮷"
console.log("\u{20BB7}");

// "ABC"
console.log("\u{41}\u{42}\u{43}");

let hello = 123;
// 123
console.log(hell\u{6F}); 

// true
console.log('\u{1F680}' === '\uD83D\uDE80');

  上面代碼中,最后一個例子表明,大括號表示法與四字節的 UTF-16 編碼是等價的。

  有了這種表示法之后,JavaScript 共有6種方法可以表示一個字符

'\z' === 'z'  // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true

 

字符編解碼

【codePointAt()】

  ES6新增了完全支持UTF-16的方法codePointAt(),該方法接受編碼單元的位置而非字符位置作為參數,返回與字符串中給定位置對應的碼位,即一個整數值

var text = "𠮷a" ;

console.log(text.charCodeAt(0)); // 55362
console.log(text.charCodeAt(1)); // 57271
console.log(text.charCodeAt(2)); // 97

console.log(text.codePointAt(0)); // 134071
console.log(text.codePointAt(1)); // 57271
console.log(text.codePointAt(2)); // 97

  對於BMP字符,codePointAt()方法的返回值與 charCodeAt() 相同,如'a',都返回97

  對於輔助平面的32位字符,如'𠮷',charCodeAt()和codePointAt()方法都分為兩部分返回

  charCodeAt(0)和chatCodeAt(1)分別返回前16位和后16位的編碼;而codePointAt(0)和codePointAt(1)分別返回32位編碼及后16位的編碼 

  判斷一個字符是否是BMP,對該字符調用 codePointAt() 方法就是最簡單的方法

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

  16位字符的上邊界用十六進制表示就是FFFF ,因此任何大於該數字的碼位必須用兩個碼元(共32位)表示

【String.fromCodePoint()】

  ES5提供的String.fromCharCode方法,用於從碼位返回對應字符,但是這個方法不能識別32位的UTF-16字符

  ECMAScript通常會提供正反兩種方法。可以使用codePointAt() 來提取字符串內中某個字符的碼位,也可以借助String.fromCodePoint()根據給定的碼位來生成一個字符

console.log(String.fromCharCode(0x20bb7)); // "ஷ"
console.log(String.fromCodePoint(0x20bb7)); // "𠮷"
console.log(String.fromCharCode(0x0bb7)); // "ஷ"

  上面代碼中,String.fromCharCode不能識別大於0xFFFF的碼位,所以0x20BB7就發生了溢出,最高位2被舍棄了,最后返回碼位U+0BB7對應的字符,而不是碼位U+20BB7對應的字符

  如果String.fromCodePoint()方法有多個參數,則它們會被合並成一個字符串返回

// true
String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'

  可以將 String.fromCodePoint() 視為 String.fromCharCode() 的完善版本。兩者處理 BMP 字符時會返回相同結果,只有處理 BMP 范圍之外的字符時才會有差異

 

for...of

  對於32位的輔助平面字符來說,使用for或for in循環,可能得不到正確的結果

var s = '𠮷a';
for (let ch in s) {
  console.log(s[ch]);
}
//
//
//a

  而for...of循環可以正確的識別32位的UTF-16字符

var s = '𠮷a';
for (let ch of s) {
  console.log(ch);
}
//𠮷
//a

 

normalize()

  許多歐洲語言有語調符號和重音符號。為了表示它們,Unicode提供了兩種方法。一種是直接提供帶重音符號的字符,比如Ǒ(\u01D1)。另一種是提供合成符號(combining character),即原字符與重音符號的合成,兩個字符合成一個字符,比如O(\u004F)和ˇ(\u030C)合成Ǒ(\u004F\u030C)

  這兩種表示方法,在視覺和語義上都等價,但是JavaScript不能識別

console.log('\u01D1'==='\u004F\u030C'); //false

console.log('\u01D1'.length); // 1
console.log('\u004F\u030C'.length); // 2

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

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

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

  normalize方法可以接受一個參數來指定normalize的方式,參數的四個可選值如下

  1、NFC,默認參數,表示“標准等價合成”(Normalization Form Canonical Composition),返回多個簡單字符的合成字符。所謂“標准等價”指的是視覺和語義上的等價

console.log('\u01D1'==='\u01D1'.normalize("NFC")); //true
console.log('\u01D1'=== '\u004F\u030C'.normalize("NFC")); //true

  2、NFD,表示“標准等價分解”(Normalization Form Canonical Decomposition),即在標准等價的前提下,返回合成字符分解的多個簡單字符

console.log('\u004F\u030C'==='\u01D1'.normalize("NFD")); //true
console.log('\u004F\u030C'=== '\u004F\u030C'.normalize("NFD")); //true

  3、NFKC,表示“兼容等價合成”(Normalization Form Compatibility Composition),返回合成字符。所謂“兼容等價”指的是語義上存在等價,但視覺上不等價,比如“囍”和“喜喜”。(這只是用來舉例,normalize方法不能識別中文。)

  4、NFKD,表示“兼容等價分解”(Normalization Form Compatibility Decomposition),即在兼容等價的前提下,返回合成字符分解的多個簡單字符

  在開發國際化應用時,normalize() 方法非常有用。但normalize()方法目前不能識別三個或三個以上字符的合成。這種情況下,還是只能使用正則表達式,通過Unicode編號區間判斷

 

U修飾符

  正則表達式可以完成簡單的字符串操作,但默認將字符串中的每一個字符按照16位編碼處理。為了解決這個問題, ES6 對正則表達式添加了u修飾符,含義為“Unicode模式”,用來正確處理大於\uFFFF的 Unicode 字符。也就是說,會正確處理四個字節的 UTF-16 編碼

/^\uD83D/u.test('\uD83D\uDC2A') // false
/^\uD83D/.test('\uD83D\uDC2A') // true

  一旦為正則表達式設置了 u 修飾符,正則表達式將會識別32位的輔助平面字符為1個字符,而不是兩個

【點號】

  點(.)字符在正則表達式中,含義是除了換行符以外的任意單個字符。對於碼位大於0xFFFF的 Unicode 字符,點字符不能識別,必須加上u修飾符

var text = "𠮷" ;
console.log(text.length); // 2
console.log(/^.$/.test(text));//false
console.log(/^.$/u.test(text)); //true

【大括號】

  ES6 新增了使用大括號表示 Unicode 字符,這種表示法在正則表達式中必須加上u修飾符,才能識別當中的大括號,否則會被解讀為量詞

/\u{61}/.test('a') // false
/\u{61}/u.test('a') // true
/\u{20BB7}/u.test('𠮷') // true

【量詞】

  使用u修飾符后,所有量詞都會正確識別碼點大於0xFFFF的 Unicode 字符

/a{2}/.test('aa') // true
/a{2}/u.test('aa') // true
/𠮷{2}/.test('𠮷𠮷') // false
/𠮷{2}/u.test('𠮷𠮷') // true

【預定義模式】

  u修飾符也影響到預定義模式,能否正確識別碼點大於0xFFFF的 Unicode 字符

/^\S$/.test('𠮷') // false
/^\S$/u.test('𠮷') // true

【字符串長度】

  上面代碼的\S是預定義模式,匹配所有不是空格的字符。只有加了u修飾符,它才能正確匹配碼點大於0xFFFF的 Unicode 字符

  雖然ES6不支持字符串碼位數量的檢測,length屬性仍然返回字符串編碼單元的數量。利用[\s\S],再加上u修飾符,就可以寫出一個正確返回字符串長度的函數

function codePointLength(text) {
  var result = text.match(/[\s\S]/gu);
  return result ? result.length : 0;
}

var s = '𠮷𠮷';

console.log(s.length); // 4
console.log(codePointLength(s)); // 2

【檢測支持】

  u修飾符是語法層面的變更,嘗試在不兼容 ES6 的 JS 引擎中使用它會拋出語法錯誤。如果要檢測當前引擎是否支持u修飾符,最安全的方式是通過以下函數來判斷

function hasRegExpU() {
    try {
        var pattern = new RegExp(".", "u");
        return true;
    } catch (ex) {
        return false;
    }
}

  這個函數使用了RegExp構造函數並傳入字符串'u'作為參數,該語法即使在舊版 JS 引擎中也是有效的。但是,如果當前引擎不支持u修飾符則會拋出錯誤

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM