聊一聊編碼與亂碼的區別

時間 2019-11-06

原文原文鏈接

在瀏覽器上查看網頁，偶爾會看到一些網站出現亂碼的狀況。這裏用通俗易懂的語言聊一聊編碼的那些事

認識幾種編碼方式

ASCII

計算機發明以後須要使用0和1來表示字符，因而美國人在50年代發明了 ASCII (美國標準信息交換代碼,American Standard Code for Information Interchange) 碼。它由128個字符組成，包括大小寫字母、數字0-九、標點符號、非打印字符（換行符、製表符等4個）以及控制字符（退格、響鈴等）組成，每一個字符佔7位（1字節是8位）。好比 'a'的 ASCII碼10進制是97，二進制是 01100001。前端

ISOLatin-1

能夠認爲ASCII是美國發明針對英語設計的，但歐洲人在用的時候出現了問題。對於一些特殊的拉丁字符，好比法文德文裏某些字符，ASCII字符集就不包括。因而歐洲人發明了一種8位字符集是ISO 8859-1Latin 1，也簡稱爲ISOLatin-1。它對ASCII作了個擴充，對於0-127之間的字符還使用ASCII裏的字符不變，把位於128-255之間的字符表示拉丁字母表中特殊語言字符。面試

UNICODE

後來計算機不斷髮展擴展到亞洲非洲，如何用計算機使用的二進制表示這些語言又成了問題。ISOLatin-1的8位字符集只能表示256個字符，而僅漢語就有80000以上個字符。如何把地球上絕大多數語言用一種編碼方式表示出來呢？因而發明了UNICODE編碼，只用2個字節(16位)就能夠編碼地球上幾乎全部地區的文字。瀏覽器

可是，UNICODE只是理論上的編碼方式，至關於給世界上每一個文字打了個編號，但這編號具體如何在計算機裏面存儲，能夠有多種實現方式。好比utf-8和gbk。微信

前面說了UNICODE只是給每一個文字打了個編號，爲啥不把這個編號直接轉化成二進制存儲在計算機裏面呢？好比英文字母s的編號是115, 用二進制表示是00000000 1110011, 中文日的編號是26085 (16進制是65e5) ，二進制是11001011 1100101。老外才沒那麼傻，對於老外這種平常純粹是用英文字符的人來講明明以前1個字節就能存儲一個字母，如今爲了全球大一統非要存儲爲2個字節，至關於一個以前一個1M的文檔，如今變爲2M。因而老外耍了賴，英文字母s是115沒錯，但我就用1個字節1110011表示，而你中文日是26085號也沒錯，可是你不能在使用2個表示，而是用2個甚至6個字節表示。（爲了英文的特權，犧牲其餘語言的存儲空間的便利），這個編碼方式就是UTF-8。編輯器

UTF-8

UTF-8（8-bit Unicode Transformation Format）是一種針對Unicode的可變長度字符編碼，又稱萬國碼。UTF-8用1到6個字節編碼UNICODE字符。用在網頁上能夠同一頁面顯示中文簡體繁體及其它語言（如英文，日文，韓文）。學習

那GBK又是如何產生的呢？網站

GBK

這時候中國人不幹了，爲啥你制定了全球大一統的規則，卻爲了本身的便利又破壞規則，連這點小便宜都不放過(典型的美國人做風)？明明用2個字節就能表示中文一個漢字，如今UTF-8編碼中文居然須要2個甚至4個字節來表示。因而中國製定一套本身的規則，因而用2個字節來表示一個漢字，總共能夠覆蓋2萬多個文字。對於英文，好吧讓一步，還保留和你UTF-8一樣的方式使用一個字節來表示。編碼

下圖是把當前文章分別保存爲 gbk 何 utf-8兩種編碼格式下文件大小的對比，代表用 gbk 確實省空間
spa

記住：UNICODE只是給字符一個代號，而GBK和UTF-8使用不一樣的規則來表示同一個代號。

網頁亂碼如何產生的呢？

下面這個流程是咱們寫入文件到展現文件的簡單描述：

咱們使用編輯器編寫 HTML 文件
保存編寫的HTML文件
使用瀏覽器打開HTML文件
HTML文件在瀏覽器展現

亂碼產生的根源就在與第2步驟和第4步。

在第2步保持文件時會把咱們寫入的文字使用編輯器默認的編碼方式進行保存。若是你們使用的是vscode編輯器，默認的編碼方式是utf-8。

在第4步瀏覽器打開網頁時，它並不知道你的這個文件是使用什麼編碼方式，因而自做主張使用了默認解碼方式。以下圖所示，文件保存爲GBK格式，在Chrome打開時默認使用 ISO -8859的解碼方式，致使編碼和解碼不匹配，產生亂碼。

那如何規避這個問題呢？即如何通知瀏覽器用什麼方式解碼呢？
首頁，在文件保存的時候你本身要清楚是用哪一種編碼方式保存的。若是你的文件是保存爲utf-8格式，那麼必定要在html 的 <head>裏添加<meta charset="utf-8">，這句話的意思是告訴瀏覽器在打開這個頁面的時候不要去猜了，直接用utf-8去解碼。同理，若是你的文件保存爲gbk格式，必定在文件裏添加<meta charset="gbk">。