Quale di questi due metodi dovrebbe essere usato per codificare gli URL?

Dipende da cosa stai realmente desiderando fare.

encodeURI presuppone che l'input sia un URI completo che potrebbe contenere alcuni caratteri che necessitano di codifica.

encodeURIComponent codificherà tutto con un significato speciale, quindi lo usi per componenti di URI come

var world = "A string with symbols & characters that have special meaning?";
var uri = 'http://example.com/foo?hello=' + encodeURIComponent(world);

Se stai codificando una stringa per inserire un componente URL (un parametro querystring), dovresti chiamare encodeURIComponent.

Se stai codificando un URL esistente, chiama encodeURI.

xkr.us ha un'ottima discussione, con esempi. Per citare il loro riassunto:

Il metodo escape () non codifica il carattere + che viene interpretato come uno spazio sul lato server e generato da moduli con spazi nei rispettivi campi. A causa di questo difetto e del fatto che questa funzione non riesce a gestire correttamente i caratteri non ASCII, dovresti evitare l'uso di escape () ogni volta che è possibile. La migliore alternativa è di solito encodeURIComponent ().

escape () non codificherà: @ * / +

L'uso del metodo encodeURI () è un po 'più specializzato di escape () in quanto codifica per gli URI rispetto alla querystring, che fa parte di un URL. Utilizzare questo metodo quando è necessario codificare una stringa da utilizzare per qualsiasi risorsa che utilizza URI e necessita che determinati caratteri rimangano non codificati. Si noti che questo metodo non codifica il carattere, in quanto è un carattere valido all'interno degli URI.

encodeURI () non codificherà: ~! @ # $ & * () =: /,;? + '

Infine, il metodo encodeURIComponent () dovrebbe essere utilizzato nella maggior parte dei casi quando si codifica un singolo componente di un URI. Questo metodo codificherà alcuni caratteri che normalmente sarebbero riconosciuti come caratteri speciali per gli URI in modo da poter includere molti componenti. Si noti che questo metodo non codifica il carattere, in quanto è un carattere valido all'interno degli URI.

encodeURIComponent () non codificherà: ~! * () '

Ecco un riassunto

1. escape () non codificherà @ * _ + -. /

   Non usarlo.

2. encodeURI () non codificherà AZ az 0-9; , /? : @ & = + $ - _. ! ~ * '() #

   Usalo quando il tuo input è un URL completo come " https://searchexample.com/search?q=wiki "

3. encodeURIComponent () non codificherà AZ az 0-9 - _. ! ~ * '() Usalo quando il tuo input fa parte di un URL completo, ad es const queryStr = encodeURIComponent(someString)

encodeURIComponent (): presuppone che il suo argomento sia una porzione (come protocollo, nome host, percorso o stringa di query) di un URI. Pertanto sfugge ai caratteri di punteggiatura utilizzati per separare le parti di un URI.

encodeURI (): viene utilizzato per codificare l'URL esistente

Differenza tra encodeURIe encodeURIComponent:

encodeURIComponent(value)viene utilizzato principalmente per codificare i valori dei parametri queryString e codifica tutti i caratteri applicabili in value. encodeURIignora il prefisso del protocollo ( http://) e il nome del dominio.

In casi molto, molto rari, quando si desidera implementare la codifica manuale per codificare caratteri aggiuntivi (anche se non è necessario codificarli in casi tipici) come ! *:, è possibile utilizzare:

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

( fonte )

Altre risposte descrivono gli scopi. Ecco i caratteri che ciascuna funzione convertirà effettivamente :

control = '\x00\x01\x02\x03\x04\x05\x06\x07\x08\x09\x0A\x0B\x0C\x0D\x0E\x0F'
        + '\x10\x11\x12\x13\x14\X15\x16\x17\x18\x19\x1A\x1B\x1C\x1D\x1E\x1F'
                                                                    + '\x7F'
encodeURI         (control + ' "%<>[\\]^`{|}'                             )
encodeURIComponent(control + ' "%<>[\\]^`{|}' + '#$&,:;=?' + '+/@'        )
escape            (control + ' "%<>[\\]^`{|}' + '#$&,:;=?' +       "!'()~")

Tutti i caratteri sopra sono convertiti in codici percentuale esadecimali. Spazio a %20, percentuale a %25, ecc. I caratteri sottostanti passano invariati.

Ecco i caratteri che le funzioni NON convertiranno :

pass_thru = '*-._0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'

encodeURI         (pass_thru + '#$&,:;=?' + '+/@' + "!'()~")
encodeURIComponent(pass_thru +                      "!'()~")
escape            (pass_thru +              '+/@'          )

Come regola generale usare encodeURIComponent. Non aver paura del lungo nome pensando che sia più specifico nel suo uso, per me è il metodo più comunemente usato. Inoltre, non farti ingannare dall'uso di encodeURI perché l'hai testato e sembra essere codificato correttamente, probabilmente non è quello che volevi usare e anche se il tuo semplice test usando "Fred" in un campo di nome ha funzionato, troverai più tardi, quando si utilizza un testo più avanzato come l'aggiunta di una e commerciale o di un hashtag, fallirà. Puoi guardare le altre risposte per i motivi per cui questo è.