[北大青鸟佳音旗舰]JavaScript 有个 Unicode 的天坑.docx

北大青鸟佳音旗舰JavaScript 有个 Unicode 的天坑最近遇到了emoji表情的处理，期间发现JavaScript处理多字节字符时会有较多坑，与大家分享一下。Unicode (BMP/SP)UTF-8 UTF-16 UTF-32 UCS-2javascript字符处理UnicodeUnicode是目前绝大多数程序使用的字符编码，定义也很简单，用一个码点(code point)映射一个字符。码点值的范围是从U+0000到U+10FFFF，可以表示超过110万个符号。下面是一些符号与它们的码点A的码点 U+0041a的码点 U+0061的码点 U+00A9的码点 U+2603对于每个码点，Unicode还会配上一小段文字说明，可以在查到，比如 Unicode最前面的65536个字符位，称为基本平面（BMP-Basic Multilingual Plane），它的码点范围是从U+0000到U+FFFF。最常见的字符都放在这个平面，这是Unicode最先定义和公布的一个平面。剩下的字符都放在补充平面（Supplementary Plane），码点范围从U+010000一直到U+10FFFF，共16个。UTF与UCSUTF（Unicode transformation format）Unicode转换格式，是服务于Unicode的，用于将一个Unicode码点转换为特定的字节序列。常见的UTF有UTF-8 可变字节序列，用1到4个字节表示一个码点UTF-16 可变字节序列，用2或4个字节表示一个码点UTF-32 固定字节序列，用4个字节表示一个码点UTF-8对ASC编码是兼容的，都是一个字节，超过U+07FF的部分则用了复杂的转换方式来映射Unicode，具体不再详述。UTF-16对于BMP的码点，采用2个字节进行编码，而BMP之外的码点，用4个字节组成代理对（surrogate pair）来表示。其中前两个字节范围是U+D800到U+DBFF，后两个字节范围是U+DC00到U+DFFF，通过以下公式完成映射（H：高字节 L：低字节 c：码点）H = Math.floor(c-0x10000) / 0x400)+0xD800L = (c 0x10000) % 0x400 + 0xDC00比如：UCS（Universal Character Set）通用字符集，是一个ISO标准，目前与Unicode可以说是等价的。相对于UTF，UCS也有自己的转换方法（编码）。如：UCS-2 用2个字节表示BMP的码点UCS-4 用4个字节表示码点UCS-2是一个过时的编码方式，因为它只能编码基本平面（BMP)的码点，在BMP的编码上，与UTF-16是一致的，所以可以认为是UTF-16的一个子集。UCS-4则与UTF-32等价，都是用4个字节来编码Unicode。javascript字符处理那么，js到底是用的啥编码呢？答案是UCS-2。咦，刚刚不是说UCS-2过时了吗？首先看下年表1990 UCS-2 诞生1995.5 JavaScript 诞生1996.7 UTF-16 诞生也就是说，Brendan Eich在写JS的时候，UTF-16还没问世，所以只能用UCS-2的方式来处理字符，也因此留下了隐患。坑1length属性先看一个简单的例子：”uD83DuDCA9 =“true”2因为”怎么破？可以用万能的正则匹配varregexAstralSymbols=/uD800-uDBFFuDC00-uDFFF/g;/ 匹配UTF-16的代理对functioncountSymbols(string)returnstring/ 把代理对改为一个BMP的字符.replace(regexAstralSymbols,_)/ 这时候取长度就妥妥的啦.length;countSymbols();/ 1坑2反转字符串js里怎么反转（reverse）字符串？相信有些同学已经想到了一个极简的方案functionreverse(str)returnstr.split().reverse().join();js虽没有直接的反转字符串的API，但是数组有啊，转数组反转之后再转回字符串，嘿嘿嘿，是不是很机智？这时候Unicode大爷又出来打脸了：你们呐，sometimes naive！拿刚才的函数反转带有reverse(这是一坨)坨一是这的Unicode码点是+UFFFD，通常用来表示Unicode转换时无法识别的字符（也就是乱码）怎么破？ES6的Array.from支持代理对的解析functionreverse(string)returnArray.from(string).reverse().join();使用 Esrever （reverse反转之后就是esrever)坑3码点与字符互转String.fromCharCode可以将一个码点转换为字符，比如String.fromCharCode(0x0041)A但超过BMP平面的就跪了。String.fromCharCode(0x1F4A9)/ U+1F4A9/ U+F4A9, not U+1F4A9事实上这个API是支持俩参数的，分别是代理对的高低字节。所以需要通过公式计算出对应的高低字节String.fromCharCode(0xD83D,0xDCA9)/ U+1F4A9.charCodeAt(0)0xD83D怎么破？ ES6大法好。String.fromCodePoint(0x1F4A9)/ U+1F4A9.codePointAt(0)0x1F4A9坑4正则匹配正则匹配符.只能匹配单个“字符”，但js将代理对当成两个单独的“字符”处理，所以匹配不到任何辅助平面字符。 /foo.bar/.test(foo)false思考一下，什么正则表达式可以表示任何Unicode字符？ 显然.是不够的，因为它不能匹配辅助平面字符或者换行符。那么用sS呢？ /sS$/.test()false怀疑人生了正确的匹配任意Unicode字符的正则如下： /0-uD7FFuE000-uFFFF|uD800-uDBFFuDC00-uDFFF|uD800-uDBFF(?!uDC00-uDFFF)|(?:uD800-uDBFF|)uDC00-uDFFF/.test()/ wtftrue怎么破？ ES6给出一个简单的方法增加一个u标志 /foo.bar/u.test(foo)true注意：这里的.还是不能匹配换行符。ES6的Unicode支持从上面的例子中可以看出，ES6已经在很努力地填坑了。对于Unicode字符，