何时应该使用转义而不是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