Beispiel für die JavaScript-URL-Codierung - Verwendung von encodeURIcomponent () und encodeURI ()

Sie könnten das denken encodeURIund encodeURIComponentdas Gleiche tun, zumindest anhand ihrer Namen. Und Sie könnten verwirrt sein, welche Sie wann verwenden sollen.

In diesem Artikel werde ich den Unterschied zwischen encodeURIund entmystifizieren encodeURIComponent.

Was ist eine URI und wie unterscheidet sie sich von einer URL?

URI steht für Uniform Resource Identifier.

URL steht für Uniform Resource Locator.

Alles, was eine Ressource eindeutig identifiziert, ist ihre URI, wie z. B. ID, Name oder ISBN-Nummer. Eine URL gibt eine Ressource an und wie auf sie zugegriffen werden kann (das Protokoll). Alle URLs sind URIs, aber nicht alle URIs sind URLs.

Warum müssen wir codieren?

URLs können nur bestimmte Zeichen aus dem Standard-ASCII-Satz mit 128 Zeichen enthalten. Reservierte Zeichen, die nicht zu diesem Satz gehören, müssen codiert werden.

Dies bedeutet, dass wir diese Zeichen codieren müssen, wenn wir sie an eine URL übergeben. Sonderzeichen wie &, space, !wenn in einer URL Bedarf eingegeben entgangen sein, sonst können sie unvorhersehbare Situationen führen.

Anwendungsfälle:

  1. Der Benutzer hat Werte in einem Formular übermittelt, das möglicherweise in einem Zeichenfolgenformat vorliegt und übergeben werden muss, z. B. URL-Felder.
  2. Sie müssen Abfragezeichenfolgenparameter akzeptieren, um GET-Anforderungen zu stellen.

Was ist der Unterschied zwischen encodeURI und encodeURIComponent?

encodeURIund encodeURIComponentwerden verwendet, um URIs (Uniform Resource Identifiers) zu codieren, indem bestimmte Zeichen durch eine, zwei, drei oder vier Escape-Sequenzen ersetzt werden, die die UTF-8-Codierung des Zeichens darstellen.

encodeURIComponentsollte verwendet werden, um eine URI- Komponente zu codieren - eine Zeichenfolge, die Teil einer URL sein soll.

encodeURIsollte verwendet werden, um einen URI oder eine vorhandene URL zu codieren .

Hier ist eine praktische Tabelle mit den Unterschieden bei der Codierung von Zeichen

Welche Zeichen sind verschlüsselt?

encodeURI() wird nicht codieren: [email protected]#$&*()=:/,;?+'

encodeURIComponent() wird nicht codieren: ~!*()'

Die Zeichen A-Z a-z 0-9 - _ . ! ~ * ' ( )werden nicht maskiert.

Beispiele

const url = '//www.twitter.com' console.log(encodeURI(url)) ////www.twitter.com console.log(encodeURIComponent(url)) //https%3A%2F%2Fwww.twitter.com const paramComponent = '?q=search' console.log(encodeURIComponent(paramComponent)) //"%3Fq%3Dsearch" console.log(url + encodeURIComponent(paramComponent)) ////www.twitter.com%3Fq%3Dsearch 

Wann codieren

  1. Beim Akzeptieren einer Eingabe, die Leerzeichen enthalten kann.

    encodeURI("//www.mysite.com/a file with spaces.html") ////www.mysite.com/a%20file%20with%20spaces.html 
  2. Beim Erstellen einer URL aus Abfragezeichenfolgenparametern.

     let param = encodeURIComponent('mango') let url = "//mysite.com/?search=" + param + "&length=99"; ////mysite.com/?search=mango&length=99 
  3. Beim Akzeptieren von Abfrageparametern, die möglicherweise reservierte Zeichen enthalten.

 let params = encodeURIComponent('mango & pineapple') let url = "//mysite.com/?search=" + params; ////mysite.com/?search=mango%20%26%20pineapple 

Zusammenfassung

Wenn Sie eine vollständige URL haben, verwenden Sie encodeURI. Wenn Sie jedoch einen Teil einer URL haben, verwenden Sie encodeURIComponent.

Interessiert an weiteren Tutorials und JSBytes von mir? Melden Sie sich für meinen Newsletter an. oder folge mir auf Twitter