摘要：今天要討論的是關(guān)于字符編碼的一些問(wèn)題，源自一次項(xiàng)目周會(huì)，因網(wǎng)絡(luò)上沒(méi)有相關(guān)文章，現(xiàn)在剛好能總結(jié)一下。為招聘方宣傳以找到更多優(yōu)質(zhì)學(xué)生員工。延伸閱讀阮一峰字符編碼筆記阮一峰關(guān)于編碼阮一峰與字符集與字符編碼知乎和有什么區(qū)別中的坑

第一次寫(xiě)segmentfault，歡迎大家提意見(jiàn)以便改進(jìn)。

今天要討論的是關(guān)于字符編碼的一些問(wèn)題，源自一次項(xiàng)目周會(huì)，因網(wǎng)絡(luò)上沒(méi)有相關(guān)文章，現(xiàn)在剛好能總結(jié)一下。

1. 首先來(lái)看幾張有意思的現(xiàn)象：

(1)? 下面這幅圖中出現(xiàn)一些“疊起來(lái)”的字體，來(lái)自微信公眾號(hào)“麥當(dāng)勞”于2017年6月28日的推送，感興趣的同學(xué)可以去看看。

比如第一個(gè)“疊起來(lái)”的字，分別由以下兩個(gè)字體組成，其它的“特技字體”也一樣。

(2) 再看下面這個(gè)字，我把它復(fù)制粘貼到這：
小?

在Chrome瀏覽器看到的可能是下面這樣：

在iPhone微信和Safari等平臺(tái)或?yàn)g覽器上看到的可能是：

在某些Android微信上看到的可能是：

你可以復(fù)制這個(gè)網(wǎng)站地址，或者可以復(fù)制字符串"小?"到不同平臺(tái)上觀察顯示的效果。

(3) 連續(xù)打兩個(gè)字符，如：

Chrome瀏覽器顯示：

Sarafi瀏覽器顯示：

在寫(xiě)這篇blog的時(shí)候，我也很苦惱，怎么寫(xiě)出這個(gè)"?"符號(hào)，因?yàn)榻?jīng)常會(huì)和前面的一個(gè)字符“疊起來(lái)”，會(huì)造成誤解。

(4) 復(fù)制“小?”到Chrome地址欄時(shí)，顯示倒是“正?！保?br>

但是，上圖是地址欄獲得焦點(diǎn)時(shí)的情況，如果此時(shí)失去焦點(diǎn)會(huì)發(fā)生如下情況：

2. 分析

(1) 不妨先用內(nèi)置的encodeURIComponent() 和 decodeURIComponent()探個(gè)究竟。

總的來(lái)說(shuō)，這個(gè)“疊起來(lái)”的字符解碼之后是這個(gè)結(jié)果（為了便于查看，這里用Safari進(jìn)行測(cè)試）：

至于%E2%83%A0，我用Chrome控制臺(tái)輸出，因?yàn)樵赟afari下編輯器處理這段編碼的結(jié)果會(huì)把寫(xiě)注釋的"/"疊上，如圖：

(2) 翻閱了許多資料終于在Wikipedia找到相關(guān)內(nèi)容，https://en.wikipedia.org/wiki...

其中講到一些背景因素，以及一些奇葩的組合類(lèi)型：

In digital typography, combining characters are characters that are intended to modify other characters. The most common combining characters in the Latin script are the combining diacritical marks (including combining accents).
Unicode also contains many precomposed characters, so that in many cases it is possible to use both combining diacritics and precomposed characters, at the user"s or application"s choice. This leads to a requirement to perform Unicode normalization before comparing two Unicode strings and to carefully design encoding converters to correctly map all of the valid ways to represent a character in Unicode to a legacy encoding to avoid data loss.
In Unicode, the main block of combining diacritics for European languages and the International Phonetic Alphabet is U+0300–U+036F. Combining diacritical marks are also present in many other blocks of Unicode characters. In Unicode, diacritics are always added after the main character, so it is possible to add several diacritics to the same character, although as of 2010, few applications support correct rendering of such combinations.

3. 看到這也大致了解了 Combining Character，不妨再看看Web開(kāi)發(fā)中常見(jiàn)的亂碼：

有一次，我在微信公眾號(hào)開(kāi)發(fā)項(xiàng)目中，指定回復(fù)消息為文本格式的時(shí)候，嘗試了幾種換行方式都不行，最終了解即XML的換行應(yīng)使用：

是字符實(shí)體編號(hào)（16進(jìn)制），可以用于處理XML中文本的換行。

對(duì)應(yīng)的正確代碼在第9行（部分文字有修改）：

  ]]>
  ]]>
  <% createTime %>
    ]]>
    <% if (msgType === "text") { if(content!=="zs") { %>
      ]]>
      <% } else { %>
      歡迎來(lái)到報(bào)名圖書(shū)館暑假工！


報(bào)名步驟：

①將招聘推文轉(zhuǎn)發(fā)至朋友圈或者40人以上的群，讓更多同學(xué)了解本招聘。為招聘方宣傳以找到更多優(yōu)質(zhì)學(xué)生員工。

→點(diǎn)此進(jìn)入招聘推文

②回復(fù)你的資料：報(bào)名+姓名+電話號(hào)碼+深圳哪個(gè)區(qū)+可上班時(shí)間



      <% }} else if (msgType === "zs") { %>
      ddwadwada
      <% } else if (msgType === "image") { %>
        
          ]]>
      
  ...

由這個(gè)問(wèn)題，我們想到web開(kāi)發(fā)中還有一些類(lèi)似的“亂碼”，這些亂碼又有哪些規(guī)律呢？

(1) 字符實(shí)體

字符實(shí)體是XML和HTML中的字符編碼方式，也就是上面事例中提到的，格式為：

& + 實(shí)體名稱(chēng) + ;
& + (# + unicode編碼) + ;

實(shí)體名稱(chēng)一般是有意義的詞，方便大家記憶，比如小于號(hào)<的實(shí)體名稱(chēng)是lt，也就是less than的縮寫(xiě)。只有部分符號(hào)是有實(shí)體名稱(chēng)的，使用unicode編碼是更通用的寫(xiě)法。

像文字類(lèi)一般不會(huì)采用這種編碼方式，主要用于在HTML或XML文檔中輸出一些保留字符和空格，比如我想在HTML中展示一段html代碼就需要使用字符實(shí)體。

比如我們要展示

情深深雨蒙蒙

  
情深深雨蒙蒙</p>
  
情深深雨蒙蒙</p>

總而言之，字符實(shí)體是HTML和XML中的編碼方式，比如在HTML文檔中寫(xiě)入：我，那么最終頁(yè)面上看到的是我這個(gè)漢字。

(2) unicode字符

編程語(yǔ)言中的unicode字符的格式為：

u + 16進(jìn)制unicode編碼

絕大多數(shù)編程語(yǔ)言，包括CSS中都支持unicode字符，不過(guò)HTML和XML是不支持的。那么什么時(shí)候使用unicode字符呢？一般來(lái)說(shuō)有兩種場(chǎng)景：

避免文件保存時(shí)采用不同編碼導(dǎo)致的亂碼，因?yàn)閡已經(jīng)聲明了是unicode。

正則匹配中的一些應(yīng)用：Unicode編碼及在正則表達(dá)式中的使用

在JS中可以使用charCodeAt()獲取字符串的10進(jìn)制unicode編碼

(3) URL編碼

類(lèi)似%E6%88%91這樣的，叫做URL編碼，在鏈接的參數(shù)里非常常見(jiàn)

網(wǎng)絡(luò)標(biāo)準(zhǔn)RFC 1738做了硬性規(guī)定：

“只有字母和數(shù)字[0-9a-zA-Z]、一些特殊符號(hào)”$-_.+!*"(),”[不包括雙引號(hào)]、以及某些保留字，才可以不經(jīng)過(guò)編碼直接用于URL?！?/p>

所以像漢字，空格這些都必須經(jīng)過(guò)轉(zhuǎn)碼。上面講的unicode字符，字符實(shí)體用的都是unicode編號(hào)，而URL編碼用的則是utf-8, 規(guī)則是將utf-8編碼每隔兩個(gè)字符加一個(gè)%

UTF 是英文 Unicode Transformation Format 的縮寫(xiě)，意為把 Unicode 字符轉(zhuǎn)換為某種格式。unicode和utf-8并不是同一種東西，但是又存在著聯(lián)系：unicode是信源編碼，對(duì)字符集數(shù)字化; utf-8，utf-16這些是信道編碼，為更好的存儲(chǔ)和傳輸。

簡(jiǎn)單說(shuō)，unicode就是一組數(shù)字，每一個(gè)數(shù)字對(duì)應(yīng)一個(gè)字符。utf-8就是對(duì)字符的傳輸和保存時(shí)的規(guī)則。比如說(shuō)“我”這個(gè)字，unicode碼（16進(jìn)制）是6211，utf-8是E68891, 那么對(duì)應(yīng)的URL編碼就是%E6%88%91;

{
  Unicode編碼: 0x6211,
  UTF8編碼: E68891,
  UTF16編碼: FEFF6211,
  UTF32編碼: 0000FEFF00006211
  URL編碼: %E6%88%91
}

(4) 本段小結(jié)：

Web開(kāi)發(fā)中常見(jiàn)的幾種亂碼包括：Unicode字符、字符實(shí)體、URL編碼。如以下情況都表示“我”：

Unicode字符： u6211
字符實(shí)體編號(hào)（16進(jìn)制）：我
字符實(shí)體編號(hào)（10進(jìn)制）：我
URL編碼：%E6%88%91

這些編碼規(guī)則的本質(zhì)都是一些特殊符號(hào) + Unicode編碼 所組成。

4. 總結(jié)

從【1】中展示的，各種奇怪現(xiàn)象我們找到原因和資料是Combining Character以及編碼相關(guān)問(wèn)題，其次我們也拓展了一下Web開(kāi)發(fā)中常見(jiàn)的一些”亂碼”以及相關(guān)的技術(shù)背景。

歡迎大家指正或提意見(jiàn)以便改進(jìn)。

5. 延伸閱讀

《阮一峰：字符編碼筆記》

《阮一峰：關(guān)于URL編碼》

《阮一峰：Unicode與JavaScript》

字符集與字符編碼

知乎：unicode和utf-8有什么區(qū)別

javascript中unicode的坑