何時應該使用轉義而不是encodeURI / encodeURIComponent？

在對要發送到Web服務器的查詢字符串進行編碼時-何時使用escape()以及何時使用encodeURI()或encodeURIComponent() ：

使用轉義：

escape("% +&=");

要麼

使用encodeURI（）/ encodeURIComponent（）

encodeURI("http://www.google.com?var1=value1&var2=value2");

encodeURIComponent("var1=value1&var2=value2");

---

#1樓

我發現這篇文章頗有啓發性： Javascript Madness：查詢字符串解析

我在嘗試理解如下緣由時發現了它，爲何爲何解碼URIComponent沒法正確解碼「 +」。 這是摘錄：

String:                         "A + B"
Expected Query String Encoding: "A+%2B+B"
escape("A + B") =               "A%20+%20B"     Wrong!
encodeURI("A + B") =            "A%20+%20B"     Wrong!
encodeURIComponent("A + B") =   "A%20%2B%20B"   Acceptable, but strange

Encoded String:                 "A+%2B+B"
Expected Decoding:              "A + B"
unescape("A+%2B+B") =           "A+++B"       Wrong!
decodeURI("A+%2B+B") =          "A+++B"       Wrong!
decodeURIComponent("A+%2B+B") = "A+++B"       Wrong!

---

#2樓

encodeURIComponent不對-_.!~*'()進行編碼，從而致使將數據發佈到xml字符串中的php時出現問題。

例如：
<xml><text x="100" y="150" value="It's a value with single quote" /> </xml>

使用通用encodeURI轉義
%3Cxml%3E%3Ctext%20x=%22100%22%20y=%22150%22%20value=%22It's%20a%20value%20with%20single%20quote%22%20/%3E%20%3C/xml%3E

能夠看到，單引號未編碼。 爲了解決問題，我爲編碼URL建立了兩個函數來解決項目中的問題：

function encodeData(s:String):String{
    return encodeURIComponent(s).replace(/\-/g, "%2D").replace(/\_/g, "%5F").replace(/\./g, "%2E").replace(/\!/g, "%21").replace(/\~/g, "%7E").replace(/\*/g, "%2A").replace(/\'/g, "%27").replace(/\(/g, "%28").replace(/\)/g, "%29");
}

對於解碼URL：

function decodeData(s:String):String{
    try{
        return decodeURIComponent(s.replace(/\%2D/g, "-").replace(/\%5F/g, "_").replace(/\%2E/g, ".").replace(/\%21/g, "!").replace(/\%7E/g, "~").replace(/\%2A/g, "*").replace(/\%27/g, "'").replace(/\%28/g, "(").replace(/\%29/g, ")"));
    }catch (e:Error) {
    }
    return "";
}

---

#3樓

我有這個功能...

var escapeURIparam = function(url) {
    if (encodeURIComponent) url = encodeURIComponent(url);
    else if (encodeURI) url = encodeURI(url);
    else url = escape(url);
    url = url.replace(/\+/g, '%2B'); // Force the replacement of "+"
    return url;
};

---

#4樓

我發現即便對各類方法的各類用途和功能都有很好的瞭解，對各類方法進行試驗也是一個很好的檢查方法。

爲此，我發現該網站對於確認我懷疑本身在作適當的事情很是有用。 事實證實，它對於解碼encodeURIComponent的字符串頗有用，這可能很難解釋。 一個很棒的書籤：

http://www.the-art-of-web.com/javascript/escape/

---

#5樓

我建議不要按原樣使用這些方法之一。 編寫本身的函數，作正確的事。

MDN在如下所示的url編碼方面給出了很好的例子。

var fileName = 'my file(2).txt';
var header = "Content-Disposition: attachment; filename*=UTF-8''" + encodeRFC5987ValueChars(fileName);

console.log(header); 
// logs "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt"


function encodeRFC5987ValueChars (str) {
    return encodeURIComponent(str).
        // Note that although RFC3986 reserves "!", RFC5987 does not,
        // so we do not need to escape it
        replace(/['()]/g, escape). // i.e., %27 %28 %29
        replace(/\*/g, '%2A').
            // The following are not required for percent-encoding per RFC5987, 
            //  so we can allow for a little better readability over the wire: |`^
            replace(/%(?:7C|60|5E)/g, unescape);
}

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent