Javascript的坑之utf8编码

1.原由

使用javascript开发的时候发现,在部分第三方库中,对emoji的字符串进行UTF8编码出错。

调查发现,javascript的string编码为UTF16(出处),而我们大部分时候使用的是UTF8。由于UTF16的设计,在大部分情况下编码javascript的字符串到UTF8都是没问题的。

出问题的地方在剩下的那部分,我们先看UTF8和UTF16的异同。

 

2.UTF8 and UTF16

wiki上关于UTF8UTF16的资料已经很详细了。

首先要理解的是无论是UTF8还是UTF16都是Unicode的一种形式。而Unicode其实就是一个字符表,范围为0~0x10FFFF。其间的每个数字是一个code point,所有的这些code point组成了Unicode的code space.

而UTF8和UTF16则是code point的不同编码方式。

UTF8使用变长的8-bit code units来表示code point。具体编码方式可以看wiki百科的说明。

UTF16的code units则是16-bit.并且当code point在0~0xFFFF的范围内时,UTF16的code units在数字上等于code point的值。在U+10000到U+10FFFF范围时则需要进行编码。

 

3.目标

我们的目标是将javascript的字符串进行UTF8编码,而javascript字符串的编码方式为UTF16,因此我们的目的就是将UTF16转换为UTF8.

转换的过程也很简单,UTF16->code points->UTF8

 

4.问题所在

上面我们可以看到,对于javascript的字符串,也就是UTF16编码的字符串,由于当code point的值在0~0xFFFF之间时, UTF16的编码值和code point上数值相同,并且生活中大部分情况下我们只会用到这个范围内的值,因此部分第三方库在进行UTF8编码时,直接省略了之前的UTF16->code points这一步。

也就是说这个范围内的UTF16进行UTF8编码的时候可以直接调用javascript中String.charCodeAt()方法来获取每个UTF16字符code point的值,然后再根据UTF8编码的规则进行转换。

然而String.charCodeAt()方法获取的值并不是和Unicode的code points完全相等,因此就会出错。

 

5.解决方法

如果是使用nodejs开发的话,可以直接使用utf8.js这个库。

而在浏览器中则可根据wiki上的编码解码规则,使用String.charCodeAt()方法获得UTF16的值,然后解码为Unicode的code point,之后编码code point到UTF8即可。是比较简单的,而且可以借鉴utf8.js的写法。

不过因为不同第三方库对字符串进行UTF8编码的情景不同,因此可能需要针对单独的库进行相应的调整,只要掌握了UTF8和UTF16的编码解码过程并不难。然而还是要鄙视一下这种自己造轮子结果漏气的行为。

点赞