encode decode 使用指南
encode & decode 使用指南
- 一、先拋結論
- 1. 所有 `query` 的拼接，`=` 后的字符串必須 `encode`
- 2. 所有 `query` 的解析，`= `后的字符串應該 `decode`
- 二、場景分析
- 1. `url` 拼接時，沒有做 `encode`，`url` 解析時做了 `decode`
- 2. `url`拼接時，沒有做`encode`，`url`解析時也沒有做`decode`
- 3. `url`拼接時，做了 `encode`，`url` 解析時沒有做 `decode`
- 4. `url` 拼接時，做了 `encode`，`url`解析時做了`decode`
- 特別提醒
- 三、總結
一、先拋結論
1. 所有 query 的拼接，= 后的字符串必須 encode
- 函數功能介紹
encodeURI() 函數通過將特定字符的每個實例替換為一個、兩個、三或四轉義序列來對統一資源標識符 (URI) 進行編碼 (該字符的 UTF-8 編碼僅為四轉義序列)由兩個 “代理” 字符組成)。
encodeURIComponent() 函數通過將一個，兩個，三個或四個表示字符的UTF-8編碼的轉義序列替換某些字符的每個實例來編碼 URI （對于由兩個“代理”字符組成的字符而言，將僅是四個轉義序列） 。
- 測試demo
從上面的例子，可以看出：
encodeURI()編碼后的結果是：空格被替換成了%20，除了空格之外的任何字符都沒有改變；
encodeURIComponent()則是將所有非字母數字字符替換成對應編碼。
encodeURI()可以對整個URI進行使用，而encodeURIComponent()只適用于對附加URI后面的字符串使用。
所以一般來說，我們使用更多的的是encodeURIComponent()，因為我們更需要對查詢字符串進行編碼，而不是整個URI
- 具體用法
encodeURI()用于整個url跳轉，比如：
轉化前： location.href = "http://localhost:8080/pro?a=1&b=張三&ie=utf-16&c=aaa #index.html";
轉化后： location.href = "http://localhost:8080/pro?a=1&b=張三&ie=utf-16&c=aaa%20#index.html"
本例中只是將中文轉成%...，傳過去再解碼就可以拿到中文
encodeURIComponent()用于參數的傳遞，參數包含特殊字符可能會造成間斷。比如：
var paramUrl = "http://localhost:8080/aa?a=1&b=2&c=3";
var url = "http://localhost:8080/pp?a=1&b="+ paramUrl;
應該使用encodeURIComponent()進行轉碼，
結果：http://localhost:8080/pp?a=1&b=http%3A%2F%2Flocalhost%3A8080%2Faa%3Fa%3D1%26b%3D2%23%26c%3D3
2. 所有 query 的解析，=后的字符串應該 decode
- 函數功能介紹
decodeURI() 函數能解碼由encodeURI 創建或其它流程得到的統一資源標識符（URI）。
decodeURIComponent() 方法用于解碼由 encodeURIComponent 方法或者其它類似方法編碼的部分統一資源標識符（URI）。
- 測試demo
因為uri中有編碼值%20，%24，decodeURI只可以把%20轉化為空格，不會對%24僅從任何處理，因為%24表示$符號，$符號不是使用encodeURI替換的。
而decodeURIComponent可以解釋任何特殊字符的編碼。
二、場景分析
// 目標地址 var url = 'https://jf3-shop-test.wanyol.com/activityHtml/sms_redirect.html?a=1&b=張三&ie=utf-16&word=hello #index.html'1. url 拼接時，沒有做 encode，url 解析時做了 decode
url拼接沒做encode,則
- 第一種情況
url解析時做了decode
>var url1 = decodeURIComponent(url) "https://jf3-shop-test.wanyol.com/activityHtml/sms_redirect.html?a=1&b=張三&ie=utf-16&word=hello #index.html"所以，這個是正常跳轉的
- 第二種情況，形如
試問 key2=val2 是 host1 鏈接的參數，還是 host2 鏈接的參數？具體點
> url"https://www.baidu.com?url=https://jf3-shop-test.wanyol.com/activityHtml/sms_redirect.html?a=1&b=張三&ie=utf-16&word=hello #index.html"> function getQuery(name, url) { ... //參數：變量名，url為空則表從當前頁面的url中取 ... var u = arguments[1] || window.location.search, ... reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"), ... r = u.substr(u.indexOf("\?") + 1).match(reg); ... return r !== null ? r[2] : ""; ...}> getQuery("word",url3)"hello #index.html"> var getUrl = getQuery("url",url3) "https://jf3-shop-test.wanyol.com/activityHtml/sms_redirect.html?a=1"> decodeURIComponent(getUrl) "https://jf3-shop-test.wanyol.com/activityHtml/sms_redirect.html?a=1"明顯與我們目標地址不符，就出錯了
2. url拼接時，沒有做encode，url解析時也沒有做decode
url拼接沒做encode,則
- 第一種情況
url解析時沒做decode
>var url2 = url "https://jf3-shop-test.wanyol.com/activityHtml/sms_redirect.html?a=1&b=張三&ie=utf-16&word=hello #index.html"所以，肯定是正常跳轉的
- 第二種情況
明顯與我們目標地址不符，就出錯了
3. url拼接時，做了 encode，url 解析時沒有做 decode
url 拼接做了 encode ,則
> var url = 'https://jf3-shop-test.wanyol.com/activityHtml/sms_redirect.html?a=1&b=張三&ie=utf-16&word=hello #index.html' > var url2 = "https://www.baidu.com" > var encodeUrl = encodeURIComponent(url) "https%3A%2F%2Fjf3-shop-test.wanyol.com%2FactivityHtml%2Fsms_redirect.html%3Fa%3D1%26b%3D%E5%BC%A0%E4%B8%89%26ie%3Dutf-16%26word%3Dhello%20%23index.html" // location.href不能正常跳轉的 > var url3 = url2 + "?url=" + encodeUrl 'https://www.baidu.com?url=https%3A%2F%2Fjf3-shop-test.wanyol.com%2FactivityHtml%2Fsms_redirect.html%3Fa%3D1%26b%3D%E5%BC%A0%E4%B8%89%26ie%3Dutf-16%26word%3Dhello%20%23index.html'url解析時沒做decode
> var getUrl = getQuery("url",url3) "https%3A%2F%2Fjf3-shop-test.wanyol.com%2FactivityHtml%2Fsms_redirect.html%3Fa%3D1%26b%3D%E5%BC%A0%E4%B8%89%26ie%3Dutf-16%26word%3Dhello%20%23index.html" // location.href不能正常跳轉的所以，肯定是不能正常跳轉的
4. url 拼接時，做了 encode，url解析時做了decode
url拼接做了encode,則
> var url = 'https://jf3-shop-test.wanyol.com/activityHtml/sms_redirect.html?a=1&b=張三&ie=utf-16&word=hello #index.html' > var url2 = "https://www.baidu.com" > var encodeUrl = encodeURIComponent(url) "https%3A%2F%2Fjf3-shop-test.wanyol.com%2FactivityHtml%2Fsms_redirect.html%3Fa%3D1%26b%3D%E5%BC%A0%E4%B8%89%26ie%3Dutf-16%26word%3Dhello%20%23index.html" // location.href不能正常跳轉的 > var url3 = url2 + "?url=" + encodeUrl 'https://www.baidu.com?url=https%3A%2F%2Fjf3-shop-test.wanyol.com%2FactivityHtml%2Fsms_redirect.html%3Fa%3D1%26b%3D%E5%BC%A0%E4%B8%89%26ie%3Dutf-16%26word%3Dhello%20%23index.html'url解析時做了decode
> var getUrl = getQuery("url",url3) "https%3A%2F%2Fjf3-shop-test.wanyol.com%2FactivityHtml%2Fsms_redirect.html%3Fa%3D1%26b%3D%E5%BC%A0%E4%B8%89%26ie%3Dutf-16%26word%3Dhello%20%23index.html" > var url22 = decodeURIComponent(getUrl)"https://jf3-shop-test.wanyol.com/activityHtml/sms_redirect.html?a=1&b=張三&ie=utf-16&word=hello #index.html"所以，肯定是正常跳轉的
特別提醒
- encodeURIComponent 使用2次
從使用上看來，javascript 使用 encodeURIComponent 編碼一次，如果是作為 Url 請求發送，瀏覽器是自動會作一次解碼，編碼方式為瀏覽器默認。這樣在一次編碼后，請求到后臺后，比如中文就成為亂碼了。中間即使編碼方式是一致也會亂碼。解決方法是在前臺 javascript 使用 encodeURIComponent 兩次，這樣瀏覽器解碼一次后，還是一種編碼后的字符，傳遞到后臺就不會是亂碼，當然你得在后臺做一次解碼工作。
// 比如你把一個請求：> `http://localhost:8080/sxkj/news/actionNewsByCategoryId.do?categoryId=3&categoryName=%E4%BA%BA%E6%89%8D%E6%8B%9B%E8%81%98`// 瀏覽器是自動把我categoryName后面的給解碼為了中文“人才招聘”,請求到了后臺是亂碼，而把categoryName后面“%E4%BA%BA%E6%89%8D%E6%8B%9B%E8%81%98”，再次編碼，作為參數請求后臺，后臺拿到的就是正確的中文字符了。> decodeURIComponent('%E4%BA%BA%E6%89%8D%E6%8B%9B%E8%81%98')'人才招聘'三、總結
所以對param不encode很容易出現問題,上面的demo 我們解析之后的getUrl,與我們的目標url,看著差不多，但丟失參數及信息，說明了url的param必須encode,如果解析的時候，我們不decode,是不能正常實現跳轉的 ，所以我們也闊以通過encode和decode驗證我們的準確性，encode和decode 規范也顯得至關重要了。
總結
以上是生活随笔為你收集整理的encode decode 使用指南的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： javascript提取顶级域名 js获
- 下一篇： HDU 1069 DP