URI編解碼詳解encodeURIComponent、encodeURI

URI

URI是Universal Resource Identifier通用資源標誌符，是一個用於標識某一互聯網資源名稱的字符串。 該種標識容許用戶對任何（包括本地和互聯網）的資源經過特定的協議進行交互操做。URI由包括肯定語法和相關協議的方案所定義。

URI的初識

若干部分

1. 協議/scheme name
   相似 https、http、file、ed2k

2. 主機名
   這部分比較熟悉的是 //baidu.com 網絡主機,也多是其餘的形式的資源：mailto:名稱@域名 用戶郵箱，

3. query/參數
   相似a=1&b=2

4. 標識符/錨點
   有的URI指向的不是整個資源，而是某個資源的內部某個模塊，這也是咱們熟悉的錨點：https://baidu.com#test，這是指向資源內部的某一部分。

5. 相對URI
   有的時候請求的資源多是相對當前資源的路徑來完成的，<img src="../icons/logo.gif" alt="logo"> 這樣的，

總體的書寫方式以下：

<scheme name> : <hierarchical part> [ ? <query> ] [ # <fragment> ]

例如：

• http://write.blog.csdn.NET/po...

• file:///c:/WINDOWS/clock.avi

• Git://github.com/user/project-name.git

• ftp://user1:1234@地址
  ed2k://|file|%5BMAC%E7%89%88%E6%9E%81%E5%93%81%E9%A3%9E%E8%BD%A69%EF%BC%9A%E6%9C%80%E9%AB%98%E9%80%9A%E7%BC%89%5D.%5BMACGAME%5DNeed.For.Speed.Most.Wanted.dmg|4096933888|2c55f0ad2cb7f6b296db94090b63e88e|h=ltcxuvnp24ufx25h2x7ugfaxfchjkwxa|/

這些都是一個URI Scheme。
其中：
<scheme name>：很明顯，這是scheme的名稱，對於上面五個scheme，它們scheme名分別是http,file, git, ftp, ed2k（電驢協議），實際上，它們也表明着協議名稱。
<hierarchical part>：實際上，通常狀況，它包含 authority 和 path【//baidu.com、///c:/WINDOWS/clock.avi】。
<query>：可選項目，通常使用；隔開或&隔開的鍵值對<key>=<value>【a=1&b=2】
<fragmentg> ：可選項目包，其它額外的標識信息[#href#anchor]

和URL的不一樣

這URI和URL長得也很類似，URL是Uniform Resource Locator的縮寫，譯爲「統一資源定位符」。格式相似

協議【http、https】://主機名【baidu.com】/具體地址【test/test.html】【可能還有參數】

這裏有三個概念：

• URI ：Uniform Resource Identifier，統一資源標識符；

• URL：Uniform Resource Locator，統一資源定位符；

• URN：Uniform Resource Name，統一資源名稱。是URL的一種更新形式，統一資源名稱(URN,，Uniform Resource Name)不依賴於位置，而且有可能減小失效鏈接的個數。可是其流行還需假以時日，由於它須要更精密軟件的支持。

其中，URL,URN是URI的子集。

URI編解碼

uri中會遇到的兩個問題：

1. 在URI常常會出現一些明文內容，例如 https://baidu.com?query=破碎&t=知乎, 這樣的uri的內容你們都是可見的，這就須要把一些特殊字符進行編碼，
   方法：encodeURI() ，把uri進行編碼，可是並不會對uri中具備特殊含義的的字符進行編碼，具體不會編碼的部分包括括號中的字符【, / ? : @ & = + $ #】，
   encodeURI('my test.asp?name=ståle&car=saab')
   // my%20test.php?name=st%C3%A5le&car=saab
   解碼的話可使用 decodeURI()
   decodeURI('my%20test.php?name=st%C3%A5le&car=saab')
   // my test.asp?name=ståle&car=saab

2. 有的時候uri的某些組成部分自身含有一些特殊字符，這些特殊字符在uri自身在有着特殊意義，這樣會致使錯誤的解析uri，例如：

   test.asp?name=sta&le 
   //這裏 query的name的值sta&le，包含了頁數字符&，是的解析name的值爲 sta 就中止了

   這個時候也須要進行處理。一樣也是對進行編碼操做，
   方法：encodeURIComponent（），這回對除了字母、數字、(、)、.、!、~、*、'、-和_以外的全部字符，而相似【 ：;/?:@&=+$,#】 這些用於分隔 URI 組件的標點符號都會由一個或多個十六進制的轉義序列替換的。

   <scheme name> : <hierarchical part> [ ? <query> ] [ # <fragment> ]
   //上面的描述是一個uri的完整組成，每一個部分均可以認爲是uri的組件，能夠進行單獨的編碼
   //用戶輸入的數據做爲query參數，用戶輸入了'test&test=測試'這樣的字符串時，只是一個查詢參數
   var uri = '//test.com';
   var queryValue = 'test&test=測試'; //須要編碼，否則會被當成兩個鍵值對了
   var uri += '?query=' + encodeURIComponent(queryValue);
   //這樣就是 query = 'test&test=測試'；真正的結果，
   //而不是 query = 'test'; test= '測試' 這樣的兩個鍵值對

   解碼方法：decodeURIComponent()

參考：http://blog.csdn.net/woyaowen...
https://baike.baidu.com/item/...
https://www.zhihu.com/questio...
http://blog.csdn.net/nicolas_...