那些年我们踩过的乱码坑

迎接关注个人网站:http://www.iamaddy.net/2016/07/emoji-unicode-parser/

媒介

这是一个由乱码激发的故事。抱歉我临时找不到越发惨烈的图,请置信我,另有更目不忍视的画面。请看下图那些框框,那都是些什么鬼!这是要害死强迫症吗?假如同时看到几十个框,简直让人崩溃。

《那些年我们踩过的乱码坑》

题目来了,这究竟是些什么鬼?

计算机编码

既然是乱码,固然要看编码,那什么是编码呢?我们都晓得,计算机本质上不就是01构成的一坨东西在运作着么?01这叫二进制,也就是最基础最底层的编码。

那末人人寻常看到的网页也好,APP也好,上面的这些笔墨标记是怎样表现出来的?固然是依据标记打印出来的,但计算机只能是二进制的存储,并不能真正存ABCD呀,那就要把字母映照为响应的二进制。

上个世纪60年代,美国制订了一套字符编码,对英语字符与二进制位之间的关联,做了一致划定。这被称为ASCII码,一向沿用至今。

ASCII码一共划定了128个字符的编码,比方大写的字母A是65(二进制01000001)。这128个标记(包含32个不能打印出来的掌握标记),只占用了一个字节的背面7位,最前面的1位一致划定为0。但你美国英笔墨母少啊,我中文怎样办呢?全球其他国家的字母其他言语怎样办呢,那就多加一些字节来示意咯。

假如有一种编码,将世界上一切的标记都归入个中。每一个标记都赋予一个举世无双的编码,那末乱码题目就会消逝了,这就是Unicode。Unicode划定了每一个标记都有本身的二进制码。规范虽是规范,但各平台完成规范的进度不一啊,有的各不相谋,这就有题目了,就像各大浏览器产商,没给我们前端少带来贫苦啊。简朴点说,虽然你苹果完成了这个规范可以显现这个标记,但我Android没有,也不晓得这个标记表杀青啥,所以临时给个框吧。

因而致使乱码的真正缘由:就是各平台间对Unicode规范完成不一致(包含完成的时刻前后差别,以及Unicode所代表寄义差别)。

编码剖析

那框框的Unicode编码究竟是什么呢?charCodeAt() (这个要领有局限性,背面说)要领可返回指定位置的字符的 Unicode 编码。这个返回值是 0 – 65535 之间的整数。

" 寻求简单的小生涯".charCodeAt(0)
// 57614

57614是个十进制数,对应16进制为E10E,Unicode也可以示意为U+E10E。经由过程这个网站查询得知效果以下:

《那些年我们踩过的乱码坑》

一头雾水,PRIVATE USE CODEPOINT这是个什么意义呢?幸亏下面有wiki的诠释:

In Unicode, the Private Use Areas (PUA) are three ranges of code points (U+E000–U+F8FF in the BMP, and in planes 15 and 16) that, by definition, will not be assigned characters by the Unicode Consortium. The code points in these areas can not be considered as standardized characters in Unicode itself. They are intentionally left undefined so that third parties may define their own characters without conflicting with Unicode Consortium assignments. Under the Unicode Stability Policy, the Private Use Areas will remain allocated for that purpose in all future Unicode versions.

咳咳,由于英文程度题目,但我照样委曲翻译下。粗心就是:位于BMP的U+E000–U+F8FF编码,和第15以及16平面的地区的编码,Unicode协会示意不会对该地区的编码指定标记,且这些地区编码不是规范标记,有意留下未定义的地区是让第三方本身去玩

那什么又是BMP,第一个平面称为基础多言语平面(Basic Multilingual Plane, BMP),或称第零平面(Plane 0)。其他平面称为辅佐平面(Supplementary Planes)。最前面的65536个字符位,都在BMP中。

好了,回到前面看,U+E10E这个Unicode正好落到了(U+E000–U+F8FF)区间内。所以这个字符是由于第三方自定义的。

网上找到了一份表,http://www.easyapns.com/iphone-emoji-alertsU+E10E对应标记以下:

《那些年我们踩过的乱码坑》

那框真的是这个皇冠emoji吗?由于是用户昵称,查一下就晓得了

《那些年我们踩过的乱码坑》

事实证明,确切没错。那末既然是emoji脸色,为何iphone(9.3.1)都不能一般剖析?这编码又是怎样被用户输入进去的?

emoji脸色

说到emoji,那我们先来扒一扒emoji的汗青故事。

emoji脸色源于日本,叫做绘(e=图)笔墨(moji=字符)。

Emoji were initially used by Japanese mobile operators, NTT DoCoMo, au, and SoftBank Mobile (formerly Vodafone).

日本几家公司各自定义了一套规范,用两个字节示意标记,Shift-JIS(日本电脑体系的一种编码)编码是从F89F到F9FC。固然这已是上世纪的事变了,个中被普遍采纳的是SoftBank规范,也称之为SB (SoftBank,这里不是ShaBi的缩写,咳咳)emoji脸色。

发展到本日,Unicode协会把emoji脸色归入规范中,但编码局限从新划分了。前面说了,Private Use Areas 是留给第三方用的,不能瞎占用。

在这个网站查到E10E以下信息:

《那些年我们踩过的乱码坑》

可以开端怀疑是SoftBank的emoji脸色。

正好手中有台旧的华为手机,有一个体系自带的华为输入法,输入法内里有一些跟苹果emoji一样的脸色,只不过数目没这么多。下面四个是华为输入法键盘上的脸色:

《那些年我们踩过的乱码坑》

这四个脸色在Unicode中的规范编码是:

《那些年我们踩过的乱码坑》

注重,假如运用charCodeAt要领来猎取Unicode编码的时刻要注重了,前面我们提到了该要领有瑕玷。简朴的缘由就是JavaScript运用的编码与utf-8不一样致使,这里不展开讲,有兴致可以看这篇文章。ES6供应了新的接口来猎取码点,codePointAt

《那些年我们踩过的乱码坑》

输入的效果展现以下:

  • iphone6sp 显现框框
    《那些年我们踩过的乱码坑》

  • huawei 显现空缺
    《那些年我们踩过的乱码坑》

虽然在两台机械的表现形式不一样,但都是没法准确显现,那我们看下这究竟是什么编码。

《那些年我们踩过的乱码坑》

上面四个编码落入的地区也是在(U+E000–U+F8FF)内,然后依据上面的网站查询,可以确认是来自SoftBank规范的emoji脸色了。

所以只需替代这些编码就好了。

解决计划

也就是说SoftBank emoji脸色如今的体系基础不支持,由于已过期了。

但为何用户还可以输入这些SoftBank emoji呢?缘由就在于有些手机输入法(相对古老了)厂商对emoji的完成照样参照SoftBank的规范。

因而把SoftBank emoji编码转换为Unicode规范的就是解决之道。在github上找到了SoftBank与规范emoji Unicode的对应关联。

有两种解决计划:

1、转换为html实体编码

\uE10E -> \u1F451 -> 👑

长处:

  • 高清,依靠体系编码;

  • 不须要加载css和emoji图片,省流量。

瑕玷:

  • 一切平台脸色不一致,各体系自定义的图标,作风差别,但表达意义基础一样
    《那些年我们踩过的乱码坑》

  • 部份平台不支持emoji

    • ios:
      《那些年我们踩过的乱码坑》

    • android:
      《那些年我们踩过的乱码坑》

2、转换为html标签

code 对应emoji图标的classID,用雪碧图。

<i class="emoji emoji'+code+'" text=""></i>

长处:

  • 一切平台脸色一致(假如一致算长处的话,有争议,毕竟Android用户看习惯了Android脸色)。

瑕玷:

  • 须要加载分外的css和emoji图标;假如要高清(临时没法找到,图片会隐约),则图标会很大。

综上,连系计划一二,在Android版本小于4.4的时刻采纳计划二,其他采纳计划一。

效果

《那些年我们踩过的乱码坑》
(左侧为处置惩罚前,右侧为处置惩罚后)

差别体系的处置惩罚效果

《那些年我们踩过的乱码坑》

《那些年我们踩过的乱码坑》

总结

题目来了,假如遇到了其他编码规范(google, DoCoMo,KDDI 等等)的脸色该怎样办?假如没有Unicode的与标记的映照关联真是白费,你涓滴没有办法。就像你不进修英文单词,你还想看懂英文文章?

emoji脸色不停在雄厚,这也给前端(种种终端)工作者带来贫苦,只能尽量的补上已知的。

参考资料

    原文作者:addy
    原文地址: https://segmentfault.com/a/1190000005347080
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞