title: URL 如何編碼解碼？為什么要編碼
tags: URL
notebook: 零散知識
URL 如何編碼解碼？為什么要編碼
為什么要編碼
在因特網上傳送URL，只能采用ASCII字符集
也就是說URL只能使用英文字母、阿拉伯數字和某些標點符號，不能使用其他文字和符號，即
只有字母和數字[0-9a-zA-Z]、一些特殊符號$-_.+!*'()[不包括雙引號]、以及某些保留字（空格轉換為+），才可以不經過編碼直接用于URL
這意味著 如果URL中有漢字，就必須編碼后使用。 但是麻煩的是 標準的國際組織并沒有規定具體的編碼方法，而是交給應用程序（瀏覽器）自己決定。 這導致"URL編碼"成為了一個混亂的領域。
如果包含中文，其實會自動編碼的，比如Chrome和火狐，"登"、"陸"和"框"的utf-8編碼分別是"E7 99 BB E9 99 86 E6 A1 86" ,下圖所示的"3D%E7%99%BB%E9%99%86%E6%A1%86/%E7%99%BB%E9%99%86%E6%A1%86"就是按照順序，在每個字節前加上%而得到的:
URL 如何編碼解碼
URL編碼通常也被稱為百分號編碼（percent-encoding），是因為它的編碼方式非常簡單：
使用%加上兩位的字符——0123456789ABCDEF——代表一個字節的十六進制形式。URL編碼要做的，就是將每一個非安全的ASCII字符都被替換為“%xx”格式，
對于非ASCII字符，RFC文檔建議使用utf-8對其進行編碼得到相應的字節，然后對每個字節執行百分號編碼。
如"中文"使用UTF-8字符集得到的字節為0xE4 0xB8 0xAD 0xE6 0x96 0x87，經過Url編碼之后得到"%E4%B8%AD%E6%96%87"
.+ %20
./ %2F
.? %3F
.% %25
.# %23
.& %26
URL的編碼/解碼方法
JavaScript提供四個URL的編碼/解碼方法。
decodeURI() // 編碼
decodeURIComponent() //編碼
encodeURI() //解碼
encodeURIComponent() //解碼
區別
encodeURI方法不會對下列字符編碼
- ASCII字母
- 數字
- ~!@#$&*()=:/,;?+'
encodeURIComponent方法不會對下列字符編碼
- ASCII字母
- 數字
- ~!*()'
所以encodeURIComponent比encodeURI編碼的范圍更大
示例:
原url：file:///Users/fanmu/Desktop/demo/3D%E7%99%BB%E9%99%86%E6%A1%86/%E7%99%BB%E9%99%86%E6%A1%86.html#
decodeURI()
decodeURI('file:///Users/fanmu/Desktop/demo/3D%E7%99%BB%E9%99%86%E6%A1%86/%E7%99%BB%E9%99%86%E6%A1%86.html#')
// 輸出結果："file:///Users/fanmu/Desktop/demo/3D登陸框/登陸框.html#"
decodeURIComponent()
decodeURIComponent('file:///Users/fanmu/Desktop/demo/3D%E7%99%BB%E9%99%86%E6%A1%86/%E7%99%BB%E9%99%86%E6%A1%86.html#')
//輸出結果為： "file:///Users/fanmu/Desktop/demo/3D登陸框/登陸框.html#"
encodeURI()
encodeURI("file:///Users/fanmu/Desktop/demo/3D登陸框/登陸框.html#")
//輸出結果為 ："file:///Users/fanmu/Desktop/demo/3D%E7%99%BB%E9%99%86%E6%A1%86/%E7%99%BB%E9%99%86%E6%A1%86.html#"
encodeURIComponent()
encodeURIComponent("file:///Users/fanmu/Desktop/demo/3D登陸框/登陸框.html#")
輸出結果為: "file%3A%2F%2F%2FUsers%2Ffanmu%2FDesktop%2Fdemo%2F3D%E7%99%BB%E9%99%86%E6%A1%86%2F%E7%99%BB%E9%99%86%E6%A1%86.html%23"
