Welche dieser beiden Methoden sollte zum Codieren von URLs verwendet werden?

Es hängt davon ab, was Sie tatsächlich tun möchten.

encodeURI geht davon aus, dass es sich bei der Eingabe um eine vollständige URI handelt, die möglicherweise einige Zeichen enthält, die codiert werden müssen.

encodeURIComponent codiert alles mit besonderer Bedeutung, sodass Sie es für Komponenten von URIs wie z

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

Wenn Sie eine Zeichenfolge zum Einfügen in eine URL-Komponente (einen Querystring-Parameter) codieren, sollten Sie aufrufen encodeURIComponent.

Wenn Sie eine vorhandene URL verschlüsseln, rufen Sie an encodeURI.

xkr.us hat eine großartige Diskussion mit Beispielen. Um ihre Zusammenfassung zu zitieren:

Die Escape () -Methode codiert nicht das + -Zeichen, das als Leerzeichen auf der Serverseite interpretiert und von Formularen mit Leerzeichen in ihren Feldern generiert wird. Aufgrund dieses Mangels und der Tatsache, dass diese Funktion Nicht-ASCII-Zeichen nicht korrekt verarbeitet, sollten Sie die Verwendung von Escape () nach Möglichkeit vermeiden. Die beste Alternative ist normalerweise encodeURIComponent ().

Escape () codiert nicht: @ * / +

Die Verwendung der encodeURI () -Methode ist insofern etwas spezialisierter als die von Escape (), als sie für URIs codiert, im Gegensatz zum Querystring, der Teil einer URL ist. Verwenden Sie diese Methode, wenn Sie eine Zeichenfolge codieren müssen, die für eine Ressource verwendet werden soll, die URIs verwendet und bestimmte Zeichen benötigt, um nicht codiert zu bleiben. Beachten Sie, dass diese Methode das Zeichen 'nicht codiert, da es sich um ein gültiges Zeichen in URIs handelt.

encodeURI () codiert nicht: ~! @ # $ & * () =: / ,;? + '

Schließlich sollte in den meisten Fällen die Methode encodeURIComponent () verwendet werden, wenn eine einzelne Komponente eines URI codiert wird. Diese Methode codiert bestimmte Zeichen, die normalerweise als Sonderzeichen für URIs erkannt werden, sodass viele Komponenten enthalten sein können. Beachten Sie, dass diese Methode das Zeichen 'nicht codiert, da es sich um ein gültiges Zeichen in URIs handelt.

encodeURIComponent () codiert nicht: ~! * () '

Hier ist eine Zusammenfassung.

1. Escape () codiert @ * _ + - nicht. /.

   Benutze es nicht.

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

   Verwenden Sie diese Option, wenn Ihre Eingabe eine vollständige URL wie " https://searchexample.com/search?q=wiki " ist.

3. encodeURIComponent () codiert AZ az 0-9 - _ nicht. ! ~ * '() Verwenden Sie diese Option, wenn Ihre Eingabe Teil einer vollständigen URL ist, z const queryStr = encodeURIComponent(someString)

encodeURIComponent (): Nimmt an, dass sein Argument ein Teil (wie das Protokoll, der Hostname, der Pfad oder die Abfragezeichenfolge) eines URI ist. Daher entgeht es den Interpunktionszeichen, die zum Trennen der Teile eines URI verwendet werden.

encodeURI (): wird zum Codieren der vorhandenen URL verwendet

Unterschied zwischen encodeURIund encodeURIComponent:

encodeURIComponent(value)wird hauptsächlich zum Codieren von queryString-Parameterwerten verwendet und codiert jedes zutreffende Zeichen in value. encodeURIignoriert das Protokollpräfix ( http://) und den Domänennamen.

In sehr, sehr seltenen Fällen, wenn Sie die manuelle Codierung implementieren möchten, um zusätzliche Zeichen zu codieren (obwohl diese in typischen Fällen nicht codiert werden müssen), wie:, ! *können Sie Folgendes verwenden:

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

( Quelle )

Andere Antworten beschreiben die Zwecke. Hier sind die Zeichen, die jede Funktion tatsächlich konvertiert :

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 + ' "%<>[\\]^`{|}' + '#$&,:;=?' +       "!'()~")

Alle oben genannten Zeichen werden in Prozent-Hexadezimal-Codes konvertiert. Leerzeichen bis %20, Prozent bis %25usw. Die folgenden Zeichen werden unverändert durchlaufen.

Hier sind die Zeichen, die die Funktionen NICHT konvertieren :

pass_thru = '*-._0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'

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

In der Regel verwenden encodeURIComponent. Haben Sie keine Angst vor dem langen Namen und denken Sie, dass er spezifischer in seiner Verwendung ist. Für mich ist es die am häufigsten verwendete Methode. Lassen Sie sich auch nicht dazu verleiten, encodeURI zu verwenden, da Sie es getestet haben und es anscheinend richtig codiert. Es ist wahrscheinlich nicht das, was Sie verwenden wollten, und obwohl Ihr einfacher Test mit "Fred" in einem Vornamenfeld funktioniert hat, werden Sie feststellen Später, wenn Sie fortgeschritteneren Text wie das Hinzufügen eines kaufmännischen Und oder eines Hashtags verwenden, schlägt dies fehl. Sie können sich die anderen Antworten aus den Gründen ansehen, warum dies so ist.