Ao codificar uma sequência de consulta a ser enviada para um servidor da Web - quando você usa escape()e quando usa encodeURI()ou encodeURIComponent():

Use escape:

escape("% +&=");

OU

use encodeURI () / encodeURIComponent ()

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

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

fuga()

Não use! escape()é definido na seção B.2.1.2, escape e o texto de introdução do anexo B diz:

... Todos os recursos e comportamentos de linguagem especificados neste anexo têm uma ou mais características indesejáveis ​​e, na ausência de uso legado, seriam removidos desta especificação. Os
programadores não devem usar ou assumir a existência desses recursos e comportamentos ao escrever o novo código ECMAScript.

Comportamento:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/escape

Caracteres especiais são codificados, com exceção de: @ * _ + -. /

A forma hexadecimal para caracteres, cujo valor de unidade de código é 0xFF ou menos, é uma sequência de escape de dois dígitos: %xx.

Para caracteres com uma unidade de código maior, %uxxxxé utilizado o formato de quatro dígitos . Isso não é permitido em uma sequência de consultas (conforme definido no RFC3986 ):

query       = *( pchar / "/" / "?" )
pchar         = unreserved / pct-encoded / sub-delims / ":" / "@"
unreserved    = ALPHA / DIGIT / "-" / "." / "_" / "~"
pct-encoded   = "%" HEXDIG HEXDIG
sub-delims    = "!" / "$" / "&" / "'" / "(" / ")"
              / "*" / "+" / "," / ";" / "="

Um sinal de porcentagem é permitido apenas se for diretamente seguido por dois hexadígitos, por cento seguido por unão é permitido.

encodeURI ()

Use encodeURI quando quiser um URL de trabalho. Faça esta ligação:

encodeURI("http://www.example.org/a file with spaces.html")

para obter:

http://www.example.org/a%20file%20with%20spaces.html

Não chame encodeURIComponent, pois isso destruiria o URL e retornaria

http%3A%2F%2Fwww.example.org%2Fa%20file%20with%20spaces.html

encodeURIComponent ()

Use encodeURIComponent quando desejar codificar o valor de um parâmetro de URL.

var p1 = encodeURIComponent("http://example.org/?a=12&b=55")

Em seguida, você pode criar o URL necessário:

var url = "http://example.net/?param1=" + p1 + "&param2=99";

E você obterá este URL completo:

http://example.net/?param1=http%3A%2F%2Fexample.org%2F%Ffa%3D12%26b%3D55&param2=99

Observe que encodeURIComponent não escapa ao 'caractere. Um bug comum é usá-lo para criar atributos html como href='MyUrl', que podem sofrer um bug de injeção. Se você estiver construindo html a partir de strings, use em "vez de 'para aspas de atributo ou adicione uma camada extra de codificação ( 'pode ser codificada como% 27).

Para mais informações sobre este tipo de codificação, você pode verificar: http://en.wikipedia.org/wiki/Percent-encoding

A diferença entre encodeURI()e encodeURIComponent()são exatamente 11 caracteres codificados por encodeURIComponent, mas não por encodeURI:

Gerei esta tabela facilmente com console.table no Google Chrome com este código:

var arr = [];
for(var i=0;i<256;i++) {
  var char=String.fromCharCode(i);
  if(encodeURI(char)!==encodeURIComponent(char)) {
    arr.push({
      character:char,
      encodeURI:encodeURI(char),
      encodeURIComponent:encodeURIComponent(char)
    });
  }
}
console.table(arr);

Eu achei este artigo esclarecedor: Loucura de Javascript: Análise de String de Consulta

Encontrei-o quando estava tentando entender por que decodeURIComponent não estava decodificando '+' corretamente. Aqui está um extrato:

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!

encodeURIComponent não codifica -_.!~*'(), causando problemas ao publicar dados no php na string xml.

Por exemplo:
<xml><text x="100" y="150" value="It's a value with single quote" /> </xml>

Fuga geral com 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

Você pode ver, as aspas simples não são codificadas. Para resolver o problema, criei duas funções para resolver o problema no meu projeto, para URL de codificação:

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");
}

Para URL de decodificação:

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 "";
}

encodeURI () - a função escape () é para escape de javascript, não HTTP.

Pequena tabela de comparação Java vs. JavaScript vs. PHP.

1. Java URLEncoder.encode (using UTF8 charset)
2. JavaScript encodeURIComponent
3. JavaScript escape
4. PHP urlencode
5. PHP rawurlencode

char   JAVA JavaScript --PHP---
[ ]     +    %20  %20  +    %20
[!]     %21  !    %21  %21  %21
[*]     *    *    *    %2A  %2A
[']     %27  '    %27  %27  %27 
[(]     %28  (    %28  %28  %28
[)]     %29  )    %29  %29  %29
[;]     %3B  %3B  %3B  %3B  %3B
[:]     %3A  %3A  %3A  %3A  %3A
[@]     %40  %40  @    %40  %40
[&]     %26  %26  %26  %26  %26
[=]     %3D  %3D  %3D  %3D  %3D
[+]     %2B  %2B  +    %2B  %2B
[$]     %24  %24  %24  %24  %24
[,]     %2C  %2C  %2C  %2C  %2C
[/]     %2F  %2F  /    %2F  %2F
[?]     %3F  %3F  %3F  %3F  %3F
[#]     %23  %23  %23  %23  %23
[[]     %5B  %5B  %5B  %5B  %5B
[]]     %5D  %5D  %5D  %5D  %5D
----------------------------------------
[~]     %7E  ~    %7E  %7E  ~
[-]     -    -    -    -    -
[_]     _    _    _    _    _
[%]     %25  %25  %25  %25  %25
[\]     %5C  %5C  %5C  %5C  %5C
----------------------------------------
char  -JAVA-  --JavaScript--  -----PHP------
[ä]   %C3%A4  %C3%A4  %E4     %C3%A4  %C3%A4
[ф]   %D1%84  %D1%84  %u0444  %D1%84  %D1%84

Eu recomendo não usar um desses métodos como está. Escreva sua própria função que faça a coisa certa.

O MDN deu um bom exemplo da codificação de URL mostrada abaixo.

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/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent

Lembre-se também de que todos eles codificam conjuntos diferentes de caracteres e selecione o que você precisa adequadamente. encodeURI () codifica menos caracteres que encodeURIComponent (), que codifica menos (e também diferente, para o ponto de dannyp) caracteres do que escape ().

Para fins de codificação, o javascript forneceu três funções embutidas -

1. escape()- não codifica @*/+ Este método foi descontinuado após o ECMA 3, portanto deve ser evitado.

2. encodeURI()- não codifica ~!@#$&*()=:/,;?+' Pressupõe que o URI é um URI completo, portanto, não codifica caracteres reservados que tenham um significado especial no URI. Este método é usado quando a intenção é converter o URL completo em vez de algum segmento especial do URL. Exemplo - encodeURI('http://stackoverflow.com'); dará - http://stackoverflow.com

3. encodeURIComponent()- não codifica - _ . ! ~ * ' ( ) Essa função codifica um componente URI (Uniform Resource Identifier) ​​substituindo cada instância de determinados caracteres por uma, duas, três ou quatro seqüências de escape representando a codificação UTF-8 do caractere. Este método deve ser usado para converter um componente da URL. Por exemplo, algumas entradas do usuário precisam ser anexadas Exemplo - encodeURIComponent('http://stackoverflow.com'); irá fornecer - http% 3A% 2F% 2Fstackoverflow.com

Toda essa codificação é realizada em UTF 8, ou seja, os caracteres serão convertidos no formato UTF-8.

encodeURIComponent difere de encodeURI, na medida em que codifica caracteres reservados e o sinal numérico # de encodeURI

Descobri que experimentar os vários métodos é uma boa verificação de sanidade, mesmo depois de ter uma boa noção de quais são seus vários usos e capacidades.

Para esse fim, achei este site extremamente útil para confirmar minhas suspeitas de que estou fazendo algo apropriadamente. Também se provou útil para decodificar uma string codificadaURIComponent'ed, o que pode ser bastante difícil de interpretar. Um ótimo marcador para ter:

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

A resposta aceita é boa. Para estender a última parte:

Observe que encodeURIComponent não escapa ao caractere '. Um erro comum é usá-lo para criar atributos html, como href = 'MyUrl', que pode sofrer um erro de injeção. Se você estiver construindo html a partir de strings, use "em vez de 'para aspas de atributo ou adicione uma camada extra de codificação (' pode ser codificada como% 27).

Se você deseja estar do lado seguro, a porcentagem de caracteres não reservados que também estão em reserva.

Você pode usar esse método para escapar deles (fonte Mozilla )

function fixedEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

// fixedEncodeURIComponent("'") --> "%27"

Reescrita moderna da resposta de @ johann-echavarria:

console.log(
    Array(256)
        .fill()
        .map((ignore, i) => String.fromCharCode(i))
        .filter(
            (char) =>
                encodeURI(char) !== encodeURIComponent(char)
                    ? {
                          character: char,
                          encodeURI: encodeURI(char),
                          encodeURIComponent: encodeURIComponent(char)
                      }
                    : false
        )
)

Ou, se você puder usar uma tabela, substitua console.logpor console.table(para a saída mais bonita).

Inspirado na mesa de Johann , decidi estender a mesa. Eu queria ver quais caracteres ASCII são codificados.

var ascii = " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~";

var encoded = [];

ascii.split("").forEach(function (char) {
    var obj = { char };
    if (char != encodeURI(char))
        obj.encodeURI = encodeURI(char);
    if (char != encodeURIComponent(char))
        obj.encodeURIComponent = encodeURIComponent(char);
    if (obj.encodeURI || obj.encodeURIComponent)
        encoded.push(obj);
});

console.table(encoded);

A tabela mostra apenas os caracteres codificados. Células vazias significam que os caracteres originais e codificados são os mesmos.

Só para ficar extra, eu estou adicionando outra mesa para urlencode()vs rawurlencode(). A única diferença parece ser a codificação do caractere de espaço.

<script>
<?php
$ascii = str_split(" !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~", 1);
$encoded = [];
foreach ($ascii as $char) {
    $obj = ["char" => $char];
    if ($char != urlencode($char))
        $obj["urlencode"] = urlencode($char);
    if ($char != rawurlencode($char))
        $obj["rawurlencode"] = rawurlencode($char);
    if (isset($obj["rawurlencode"]) || isset($obj["rawurlencode"]))
        $encoded[] = $obj;
}
echo "var encoded = " . json_encode($encoded) . ";";
?>
console.table(encoded);
</script>

Eu tenho essa função ...

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;
};