HTTP-URL編碼函數

2023-06-05 02:38:20

HTTP-URL編碼函數

一般來說，URL隻能使用英文字母、阿拉伯數字和某些标點符号，不能使用其他文字和符号。比如，世界上有英文字母的網址 “h ttp://www.haorooms.com”，但是沒有希臘字母的網址“h ttp://www.aβγ.com” （讀作阿爾法-貝塔-伽瑪.com）。這是因為網絡标準RFC 1738做了硬性規定：

Only alphanumerics [0-9a-zA-Z], the special characters “$-_.+!*’(),” [not including the quotes - ed], and reserved characters used for their reserved purposes may be used unencoded within a URL.

這意味着，如果URL中有漢字，就必須編碼後使用。但是麻煩的是，RFC 1738沒有規定具體的編碼方法，而是交給應用程式（浏覽器）自己決定。這導緻“URL編碼”成為了一個混亂的領域。

在我上一篇部落格中提供了一種監測？及 = 來格式化URL中查詢字元串的方法。但是，實際上這個方法還存在一定問題，那就是，如果用

urlParas(testUrl).set()

設定一個查詢字元串 hi=“你好”，會使得查詢字元串中出現中文，必須編碼以後使用。

下面介紹JavaScript中常用的URL編碼函數。

1. escape()

escape()是js編碼函數中最古老的一個。雖然這個函數現在已經不提倡使用了，但是由于曆史原因，很多地方還在使用它，是以有必要先從它講起。實際上，escape()不能直接用于URL編碼，它的真正作用是傳回一個字元的Unicode編碼值。

var test = "你好";
    console.log(escape(test)); //%u4F60%u597D

注意：escape()不對“+”編碼。但是我們知道，網頁在送出表單的時候，如果有空格，則會被轉化為+字元。伺服器處理資料的時候，會把+号處理成空格。是以，使用的時候要小心。

2. encodeURI

它着眼于對整個URL進行編碼，是以除了常見的符号以外，對其他一些在網址中有特殊含義的符号“; / ? : @ & = + $ , #”，也不進行編碼。編碼後，它輸出符号的utf-8形式，并且在每個位元組前加上%。

var test1 = "https://www.baidu.com/baidu?wd=你好";
    console.log(encodeURI(test1)); //https://www.baidu.com/baidu?wd=%E4%BD%A0%E5%A5%BD

看吧，對于？ = 等，encodeURI沒有進行編碼。

3. encodeURIComponent

最後一個Javascript編碼函數是encodeURIComponent()。與encodeURI()的差別是，它用于對URL的組成部分進行個别編碼，而不用于對整個URL進行編碼。是以，“; / ? : @ & = + $ , #”，這些在encodeURI()中不被編碼的符号，在encodeURIComponent()中統統會被編碼。至于具體的編碼方法，兩者是一樣。

var test1 = "https://www.baidu.com/baidu?wd=你好";
    console.log(encodeURI(test1)); //https://www.baidu.com/baidu?wd=%E4%BD%A0%E5%A5%BD
    console.log(encodeURIComponent(test1)); //https%3A%2F%2Fwww.baidu.com%2Fbaidu%3Fwd%3D%E4%BD%A0%E5%A5%BD

對比可以看出，encodeURIComponent對 : // ? 等特殊符号也進行了編碼，故其不應該用于對完整URL編碼。

綜上，可以寫出一個向URL末尾添加查詢字元串的函數。

function addURLParam(url, name, value){
        url += (url.indexOf("?") == - ? "?" : "&");
        url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
        return url;
    }

    var test2 = "https://www.baidu.com/baidu";
    var encodeURL = addURLParam(test2, "鍵名", "123");
    console.log(encodeURL); //https://www.baidu.com/baidu?%E9%94%AE%E5%90%8D=123

這樣，才能保證URL合法，減少出錯可能。

HTTP-URL編碼函數