一張圖看懂encodeURI、encodeURIComponent、decodeURI、decodeURIComponent的區別

早前在博客園發的幾篇基礎文，都是圖解系列，總結了一些JavaScript容易混淆的知識點，如今拿來在掘金分享一下吧。

原文地址：一張圖看懂encodeURI、encodeURIComponent、decodeURI、decodeURIComponent的區別

一、這四個方法的用處

用來編碼和解碼URI的

統一資源標識符，或叫作 URI，是用來標識互聯網上的資源（例如，網頁或文件）和怎樣訪問這些資源的傳輸協議（例如，HTTP 或 FTP）的字符串。除了encodeURI、encodeURIComponent、decodeURI、decodeURIComponent四個用來編碼和解碼 URI 的函數以外 ECMAScript 語言自身不提供任何使用 URL 的支持。

二、URI組成形式

一個 URI 是由組件分隔符分割的組件序列組成。其通常形式是：
Scheme : First / Second ; Third ? Fourth

其中斜體的名字表明組件；「:」, 「/」, 「;」，「?」是看成分隔符的保留字符。

三、有和不一樣？

encodeURI 和 decodeURI 函數操做的是完整的 URI；這倆函數假定 URI 中的任何保留字符都有特殊意義，全部不會編碼它們。

encodeURIComponent 和 decodeURIComponent 函數操做的是組成 URI 的個別組件；這倆函數假定任何保留字符都表明普通文本，因此必須編碼它們，因此它們（保留字符）出如今一個完整 URI 的組件裏面時不會被解釋成保留字符了。

以上說明摘自ECMAScript標準，爲了容易讀懂作了點編輯加工。

四、圖解四個函數的不一樣

ECMA對這四個函數還作了詳細解釋，多是爲了寫的更邏輯化一些，採用了相似變量配合邏輯的寫法來講明，可是讓初學者看得雲裏霧裏的特別繞，因此有必要把它寫得更像是人讀的東西……

圖解轉義與反轉義URI的四種方法

當 URI 裏包含一個沒在上面列出的字符或有時不想讓給定的保留字符有特殊意義，那麼必須編碼這個字符。字符被轉換成 UTF-8 編碼，首先從 UT​​F-16 轉換成相應的代碼點值的替代。而後返回的字節序列轉換爲一個字符串，每一個字節用一個「%xx」形式的轉移序列表示。（具體轉換規則能夠參考抽象操做Encode和Decode的說明）