Unicode與JavaScript詳解 [很好的文章轉]

上個月,我做了一次分享,詳細介紹了Unicode字符集,以及JavaScript語言對它的支持。下面就是這次分享的講稿。

 一、Unicode是什么?

  Unicode源于一個很簡單的想法:將全世界所有的字符包含在一個集合里,計算機只要支持這一個字符集,就能顯示所有的字符,再也不會有亂碼了。

  它從0開始,為每個符號指定一個編號,這叫做"碼點"(code point)。比如,碼點0的符號就是null(表示所有二進制位都是0)。

U+0000 = null

  上式中,U+表示緊跟在后面的十六進制數是Unicode的碼點。

  目前,Unicode的最新版本是7.0版,一共收入了109449個符號,其中的中日韓文字為74500個。可以近似認為,全世界現有的符號當中,三分之二以上來自東亞文字。比如,中文"好"的碼點是十六進制的597D。

U+597D = 好

  這么多符號,Unicode不是一次性定義的,而是分區定義。每個區可以存放65536個(216)字符,稱為一個平面(plane)。目前,一共有17個(25)平面,也就是說,整個Unicode字符集的大小現在是221。

  最前面的65536個字符位,稱為基本平面(縮寫BMP),它的碼點范圍是從0一直到216-1,寫成16進制就是從U+0000到U+FFFF。所有最常見的字符都放在這個平面,這是Unicode最先定義和公布的一個平面。

  剩下的字符都放在輔助平面(縮寫SMP),碼點范圍從U+010000一直到U+10FFFF。

 二、UTF-32與UTF-8

  Unicode只規定了每個字符的碼點,到底用什么樣的字節序表示這個碼點,就涉及到編碼方法。

  最直觀的編碼方法是,每個碼點使用四個字節表示,字節內容一一對應碼點。這種編碼方法就叫做UTF-32。比如,碼點0就用四個字節的0表示,碼點597D就在前面加兩個字節的0。

U+0000 = 0x0000 0000U+597D = 0x0000 597D

  UTF-32的優點在于,轉換規則簡單直觀,查找效率高。缺點在于浪費空間,同樣內容的英語文本,它會比ASCII編碼大四倍。這個缺點很致命,導致實際上沒有人使用這種編碼方法,HTML 5標準就明文規定,網頁不得編碼成UTF-32。

  人們真正需要的是一種節省空間的編碼方法,這導致了UTF-8的誕生。UTF-8是一種變長的編碼方法,字符長度從1個字節到4個字節不等。越是常用的字符,字節越短,最前面的128個字符,只使用1個字節表示,與ASCII碼完全相同。

編號范圍字節
0x0000 - 0x007F1
0x0080 - 0x07FF2
0x0800 - 0xFFFF3
0x010000 - 0x10FFFF4

  由于UTF-8這種節省空間的特性,導致它成為互聯網上最常見的網頁編碼。不過,它跟今天的主題關系不大,我就不深入了,具體的轉碼方法,可以參考《字符編碼筆記》。

 三、UTF-16簡介

  UTF-16編碼介于UTF-32與UTF-8之間,同時結合了定長和變長兩種編碼方法的特點。

  它的編碼規則很簡單:基本平面的字符占用2個字節,輔助平面的字符占用4個字節。也就是說,UTF-16的編碼長度要么是2個字節(U+0000到U+FFFF),要么是4個字節(U+010000到U+10FFFF)。

  于是就有一個問題,當我們遇到兩個字節,怎么看出它本身是一個字符,還是需要跟其他兩個字節放在一起解讀?

  說來很巧妙,我也不知道是不是故意的設計,在基本平面內,從U+D800到U+DFFF是一個空段,即這些碼點不對應任何字符。因此,這個空段可以用來映射輔助平面的字符。

  具體來說,輔助平面的字符位共有220個,也就是說,對應這些字符至少需要20個二進制位。UTF-16將這20位拆成兩半,前10位映射在U+D800到U+DBFF(空間大小210),稱為高位(H),后10位映射在U+DC00到U+DFFF(空間大小210),稱為低位(L)。這意味著,一個輔助平面的字符,被拆成兩個基本平面的字符表示。

  所以,當我們遇到兩個字節,發現它的碼點在U+D800到U+DBFF之間,就可以斷定,緊跟在后面的兩個字節的碼點,應該在U+DC00到U+DFFF之間,這四個字節必須放在一起解讀。

 四、UTF-16的轉碼公式

  Unicode碼點轉成UTF-16的時候,首先區分這是基本平面字符,還是輔助平面字符。如果是前者,直接將碼點轉為對應的十六進制形式,長度為兩字節。

U+597D = 0x597D

  如果是輔助平面字符,Unicode 3.0版給出了轉碼公式。

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

  以字符為例,它是一個輔助平面字符,碼點為U+1D306,將其轉為UTF-16的計算過程如下。

H = Math.floor((0x1D306-0x10000)/0x400)+0xD800 = 0xD834L = (0x1D306-0x10000) % 0x400+0xDC00 = 0xDF06

  所以,字符的UTF-16編碼就是0xD834 DF06,長度為四個字節。

 五、JavaScript使用哪一種編碼?

  JavaScript語言采用Unicode字符集,但是只支持一種編碼方法。

  這種編碼既不是UTF-16,也不是UTF-8,更不是UTF-32。上面那些編碼方法,JavaScript都不用。

  JavaScript用的是UCS-2!

 六、UCS-2編碼

  怎么突然殺出一個UCS-2?這就需要講一點歷史。

  互聯網還沒出現的年代,曾經有兩個團隊,不約而同想搞統一字符集。一個是1989年成立的Unicode團隊,另一個是更早的、1988年成立的UCS團隊。等到他們發現了對方的存在,很快就達成一致:世界上不需要兩套統一字符集。

  1991年10月,兩個團隊決定合并字符集。也就是說,從今以后只發布一套字符集,就是Unicode,并且修訂此前發布的字符集,UCS的碼點將與Unicode完全一致。

  當時的實際情況是,UCS的開發進度快于Unicode,早在1990年,就公布了第一套編碼方法UCS-2,使用2個字節表示已經有碼點的字符。(那個時候只有一個平面,就是基本平面,所以2個字節就夠用了。)UTF-16編碼遲至1996年7月才公布,明確宣布是UCS-2的超集,即基本平面字符沿用UCS-2編碼,輔助平面字符定義了4個字節的表示方法。

  兩者的關系簡單說,就是UTF-16取代了UCS-2,或者說UCS-2整合進了UTF-16。所以,現在只有UTF-16,沒有UCS-2。

 七、JavaScript的誕生背景

  那么,為什么JavaScript不選擇更高級的UTF-16,而用了已經被淘汰的UCS-2呢?

  答案很簡單:非不想也,是不能也。因為在JavaScript語言出現的時候,還沒有UTF-16編碼。

  1995年5月,Brendan Eich用了10天設計了JavaScript語言;10月,第一個解釋引擎問世;次年11月,Netscape正式向ECMA提交語言標準(整個過程詳見《JavaScript誕生記》)。對比UTF-16的發布時間(1996年7月),就會明白Netscape公司那時沒有其他選擇,只有UCS-2一種編碼方法可用!

 八、JavaScript字符函數的局限

  由于JavaScript只能處理UCS-2編碼,造成所有字符在這門語言中都是2個字節,如果是4個字節的字符,會當作兩個雙字節的字符處理。JavaScript的字符函數都受到這一點的影響,無法返回正確結果。

  還是以字符為例,它的UTF-16編碼是4個字節的0xD834 DF06。問題就來了,4個字節的編碼不屬于UCS-2,JavaScript不認識,只會把它看作單獨的兩個字符U+D834和U+DF06。前面說過,這兩個碼點是空的,所以JavaScript會認為是兩個空字符組成的字符串!

  上面代碼表示,JavaScript認為字符的長度是2,取到的第一個字符是空字符,取到的第一個字符的碼點是0xDB34。這些結果都不正確!

  解決這個問題,必須對碼點做一個判斷,然后手動調整。下面是正確的遍歷字符串的寫法。

while (++index < length) {// ...if (charCode >= 0xD800 && charCode <= 0xDBFF) {output.push(character + string.charAt(++index));} else {output.push(character);}
}

  上面代碼表示,遍歷字符串的時候,必須對碼點做一個判斷,只要落在0xD800到0xDBFF的區間,就要連同后面2個字節一起讀取。

  類似的問題存在于所有的JavaScript字符操作函數。

  • String.prototype.replace()
  • String.prototype.substring()
  • String.prototype.slice()
  • ...

  上面的函數都只對2字節的碼點有效。要正確處理4字節的碼點,就必須逐一部署自己的版本,判斷一下當前字符的碼點范圍。

 九、ECMAScript 6

  JavaScript的下一個版本ECMAScript 6(簡稱ES6),大幅增強了Unicode支持,基本上解決了這個問題。

  (1)正確識別字符

  ES6可以自動識別4字節的碼點。因此,遍歷字符串就簡單多了。

for (let s of string ) {// ...
}

  但是,為了保持兼容,length屬性還是原來的行為方式。為了得到字符串的正確長度,可以用下面的方式。

Array.from(string).length

  (2)碼點表示法

  JavaScript允許直接用碼點表示Unicode字符,寫法是"斜杠+u+碼點"。

'好' === '\u597D' // true

  但是,這種表示法對4字節的碼點無效。ES6修正了這個問題,只要將碼點放在大括號內,就能正確識別。

  (3)字符串處理函數

  ES6新增了幾個專門處理4字節碼點的函數。

  • String.fromCodePoint():從Unicode碼點返回對應字符
  • String.prototype.codePointAt():從字符返回對應的碼點
  • String.prototype.at():返回字符串給定位置的字符

  (4)正則表達式

  ES6提供了u修飾符,對正則表達式添加4字節碼點的支持。

  (5)Unicode正規化

  有些字符除了字母以外,還有附加符號。比如,漢語拼音的ǒ,字母上面的聲調就是附加符號。對于許多歐洲語言來說,聲調符號是非常重要的。

  Unicode提供了兩種表示方法。一種是帶附加符號的單個字符,即一個碼點表示一個字符,比如ǒ的碼點是U+01D1;另一種是將附加符號單獨作為一個碼點,與主體字符復合顯示,即兩個碼點表示一個字符,比如ǒ可以寫成O(U+004F) + ˇ(U+030C)。

// 方法一
'\u01D1'
// 'ǒ'// 方法二
'\u004F\u030C'
// 'ǒ'

  這兩種表示方法,視覺和語義都完全一樣,理應作為等同情況處理。但是,JavaScript無法辨別。

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

  ES6提供了normalize方法,允許"Unicode正規化",即將兩種方法轉為同樣的序列。

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

  關于ES6的更多介紹,請看《ECMAScript 6入門》。

  ==========================

  我的講稿就是上面這些內容,當天的PPT請看這里。

轉載于:https://www.cnblogs.com/ranzige/p/4186683.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/376378.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/376378.shtml
英文地址,請注明出處:http://en.pswp.cn/news/376378.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

編輯器使用說明

歡迎使用Markdown編輯器寫博客 本Markdown編輯器使用StackEdit修改而來&#xff0c;用它寫博客&#xff0c;將會帶來全新的體驗哦&#xff1a; Markdown和擴展Markdown簡潔的語法代碼塊高亮圖片鏈接和圖片上傳LaTex數學公式UML序列圖和流程圖離線寫博客導入導出Markdown文件豐…

關于產品的一些思考——百度之百度百科

百度百科最近改版了&#xff0c;發現有些地方不符合一般人的行為習慣。 1.新版本排版 首先應該將摘要&#xff0c;簡介&#xff0c;目錄什么的放在左側&#xff0c;而不是右側&#xff0c;因為我們都是從左到右&#xff0c;從上到下觀察事物的&#xff0c;而且百科的東西我們不…

Python3.6 IDLE 使用 multiprocessing.Process 不顯示執行函數的打印

要運行的程序&#xff1a; import os from multiprocessing import Process import timedef run_proc(name):print(Child process %s (%s) Running...%(name,os.getpid()))# time.sleep(5)if __name__ __main__:print("Show Start:")print(Parent process %s. % os…

復制控制

復制構造函數、賦值操作符和析構函數總稱為復制控制。編譯器自動實現這些操作&#xff0c;但類也可以定義自己的版本。 實現復制控制操作最困難的部分&#xff0c;往往在于識別何時需要覆蓋默認版本。有一種特別常見的情況需要類定義自己的復制控制成員&#xff1a;類具有指針成…

python Requests登錄GitHub

工具&#xff1a; python 3.6 Fiddler4 所需要的庫&#xff1a; requests BeautifulSoup 首先抓包&#xff0c;觀察登錄時需要什么&#xff1a; 這個authenticity_token的值是訪問/login后可以獲取&#xff0c;值是隨機生成的&#xff0c;所以登錄前要獲取一下。 注…

你必須懂的 T4 模板:深入淺出

示例代碼&#xff1a;示例代碼__你必須懂的T4模板&#xff1a;淺入深出.rar (一)什么是T4模板&#xff1f; T4&#xff0c;即4個T開頭的英文字母組合&#xff1a;Text Template Transformation Toolkit。 T4文本模板&#xff0c;即一種自定義規則的代碼生成器。根據業務模型可生…

stdafx.h是什么用處, stdafx.h、stdafx.cpp的作用

http://blog.csdn.net/songkexin/article/details/1750396 stdafx.h頭文件的作用 Standard Application Fram Extend沒有函數庫&#xff0c;只是定義了一些環境參數&#xff0c;使得編譯出來的程序能在32位的操作系統環境下運行。Windows和MFC的include文件都非常大&#xff0c…

python3 Connection aborted.', RemoteDisconnected('Remote end closed connection without response'

在寫爬蟲的時候遇到了問題&#xff0c;網站是asp.net寫的 requests.exceptions.ConnectionError: (Connection aborted., RemoteDisconnected(Remote end closed connection without response,)) 于是就抓包分析&#xff0c;發現只要加了’Accept-Language’就好了。。。 A…

id和instancetype的區別

id返回不確定類型的對象&#xff08;也就是任意類型的對象&#xff09;&#xff0c;- (id)arrayWithData;返回的就是不確定類型的對象&#xff0c;如果執行數組的方法&#xff0c; [- (id)arrayWithData objectOfIndex:0]編譯時不會報錯&#xff0c;但運行時會報錯&#xff0c;…

windows下Java 用idea連接MySQL數據庫

Java用idea連接數據庫特別簡單。 首先就是下載好MySQL數據庫的驅動程序。 鏈接&#xff1a;https://dev.mysql.com/downloads/connector/j/ 然后就是選下載版本了&#xff1a; 選個zip格式的嘛。。 下載完后就解壓。打開idea&#xff0c;建立個簡單的項目 找到這個: …

7-2

#include<stdio.h> int main(void) {int i;int fib[10]{1,1};for(i2;i<10;i)fib[i]fib[i-1]fib[i-2];for(i0;i<10;i){printf("%6d",fib[i]);if((i1)%50)printf("\n");}return 0; } 轉載于:https://www.cnblogs.com/liruijia199531/p/3357481.h…

歲月悄然前行,沒有停留的痕跡

歲月悄然前行&#xff0c;沒有停留的痕跡。月落烏啼&#xff0c;總是千年的風霜;濤聲依舊&#xff0c;不見當初的夜晚。走過歲月的痕跡&#xff0c;已是物是人非。我們在歲月的軌道上行走&#xff0c;不要給歲月太多的裝飾&#xff0c;不要給歲月太多的言語。給它我們隨著時光追…

160 - 41 defiler.1.exe

環境&#xff1a; Windows xp sp3 工具&#xff1a; Ollydbg stud_PE LoadPE 先分析一下。 這次的程序要求更改了&#xff0c;變成了這個&#xff1a; defilers reversme no.1 -----------------------The task of this little, lame reverseme is to add some code to…

HDU-2112 HDU Today

http://acm.hdu.edu.cn/showproblem.php?pid2112 怎樣把具體的字母的地點轉換為數字的函數為題目的重點。 HDU Today Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s): 11385 Accepted Submission(s): 2663 P…

AndEngine引擎之SmoothCamera 平滑攝像機

SmoothCamera:就相當于現實世界的攝像機&#xff0c;要想照到一個物體&#xff0c;要么是攝像機移動&#xff0c;要么是物體移動到攝像頭的范圍內&#xff0c;想要放大或縮小一個物體&#xff0c;要么是物體向前或向后移動&#xff0c;要么是攝像頭變焦 這里討論的就是攝像頭的…

160 - 44 defiler.1.exe

環境&#xff1a; Windows xp sp3 工具&#xff1a; 1.ollydbg 2.exeinfope 0x00 查殼 無殼就下一步 0x01 分析 隨便輸入個錯的&#xff0c;出現了不知道哪國的語言。有個6&#xff0c;應該就是name的長度要大于6吧 OD載入&#xff0c;搜字符串。 00421BD7 |. 807D…

時間與日期處理

主要有以下類&#xff1a; NSDate -- 表示一個絕對的時間點NSTimeZone -- 時區信息NSLocale -- 本地化信息NSDateComponents -- 一個封裝了具體年月日、時秒分、周、季度等的類NSCalendar -- 日歷類&#xff0c;它提供了大部分的日期計算接口&#xff0c;并且允許您在NSDate和N…

C++ new/new operator、operator new、placement new初識

簡要釋義 1.operator new是內存分配函數&#xff08;同malloc&#xff09;&#xff0c;C&#xff0b;&#xff0b;在全局作用域(global scope)內提供了3份默認的operator new實現&#xff0c;并且用戶可以重載operator new。 1 void* operator new(std::size_t) throw(std::bad…

160 - 45 Dope2112.2

環境&#xff1a; Windows xp sp3 工具 1.ollydbg 2.exeinfope 0x00 查殼 還是無殼的Delphi程序 0x01 分析 這次繼續OD載入搜字符串&#xff0c;但是沒找到錯誤信息的字符串。 又因為是Delphi程序&#xff0c;所以可以試一下這樣&#xff1a; OD載入后還是搜字符串&…

編輯技巧 word

怎樣給word中的文檔加上水印 轉載于:https://www.cnblogs.com/dqxu/p/4208372.html