国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

那些年我們踩過的亂碼坑

jhhfft / 2612人閱讀

摘要:因此導致亂碼的真正原因就是各平臺間對標準實現不一致包括實現的時間先后不同,以及所代表含義不同。日本幾家公司各自定義了一套標準,用兩個字節表示符號,日本電腦系統的一種編碼編碼是從到。在上找到了與標準的對應關系。

歡迎關注個人網站: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-alerts 。U+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,用雪碧圖。

優點:

所有平臺表情統一(如果統一算優點的話,有爭議,畢竟Android用戶看習慣了Android表情)。

缺點:

需要加載額外的css和emoji圖標;如果要高清(暫時無法找到,圖片會模糊),則圖標會很大。

綜上,結合方案一二,在Android版本小于4.4的時候采用方案二,其他采用方案一。

結果


(左邊為處理前,右邊為處理后)

不同系統的處理結果

總結

問題來了,如果遇到了其他編碼標準(google, DoCoMo,KDDI 等等)的表情該怎么辦?如果沒有Unicode的與符號的映射關系真是白搭,你絲毫沒有辦法。就像你不學習英文單詞,你還想看懂英文文章?

emoji表情不斷在豐富,這也給前端(各種終端)工作者帶來麻煩,只能盡可能的補上已知的。

參考資料

https://codepoints.net

http://www.unicode.org/faq/private_use.html#pua1

http://www.ruanyifeng.com/blog/2007/10/ascii_unicode_and_utf-8.html

http://blog.csdn.net/binjly/article/details/47321043

http://computerism.ru/emoji-smiles.htm

http://www.ruanyifeng.com/blog/2014/12/unicode.html

http://blog.csdn.net/ugg/article/details/44225723

https://github.com/iamcal/js-emoji

https://github.com/node-modules/emoji

http://www.fileformat.info/info/emoji/softbank.htm

http://caniemoji.com

http://www.easyapns.com/iphone-emoji-alerts

https://en.wikipedia.org/wiki/Emoji

https://mathiasbynens.be/notes/javascript-unicode

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/79565.html

相關文章

  • Docker初體驗——過的那些

    摘要:原因其實這個報錯不需要下載最新文件,而是文件沒有放到正確的位置。重啟電腦后按或進入界面不同主板型號進入所需按鍵不同。端口映射環境下可能不存在這個問題坑在下部署了應用服務并進行了端口映射。 2018?年?3?月?6?日 Docker安裝 環境:windows7 安裝包:DockerToolbox-17.10.0-ce.exe (下載地址:http://mirrors.aliyun.co...

    Jrain 評論0 收藏0
  • 【echarts3】 折線圖我過的那些 (tooltip 設置,line 單個點/散點不顯示問題

    摘要:折線圖小技巧折線圖功能豐富且官方文檔詳細易懂,上手比較容易,這篇文章將分享一些項目中踩過的坑,示例主要以多條曲線為主,對大家完成一些曲線和的展示及交互有所幫助基本使用文檔寫得非常詳細清晰,官方示例也很豐富,中還有很多功能更強大的示例篇的是很 echarts 折線圖小技巧 echarts 折線圖功能豐富且官方文檔詳細易懂,上手比較容易,這篇文章將分享一些項目中踩過的坑,示例主要以多條曲線...

    isaced 評論0 收藏0
  • 【echarts3】 折線圖我過的那些 (tooltip 設置,line 單個點/散點不顯示問題

    摘要:折線圖小技巧折線圖功能豐富且官方文檔詳細易懂,上手比較容易,這篇文章將分享一些項目中踩過的坑,示例主要以多條曲線為主,對大家完成一些曲線和的展示及交互有所幫助基本使用文檔寫得非常詳細清晰,官方示例也很豐富,中還有很多功能更強大的示例篇的是很 echarts 折線圖小技巧 echarts 折線圖功能豐富且官方文檔詳細易懂,上手比較容易,這篇文章將分享一些項目中踩過的坑,示例主要以多條曲線...

    MonoLog 評論0 收藏0
  • flex布局過的那些

    摘要:接下來說說我踩過的那些坑布局版本兼容問題布局自提出之后,變化過好幾個版本標志標志標志新增了對項的規定草案階段兼容方案父級布局不用考慮其他屬性都對應相關的版本方案,目前項目中是只寫最新的方案,由自動添加兼容方案。 接觸H5項目后,開始了解到flex布局,功能非常之強大,用起來相當之舒服。基本的知識介紹就不說了,參考http://www.ruanyifeng.com/blo...。 接下來...

    劉玉平 評論0 收藏0

發表評論

0條評論

jhhfft

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<