Was macht encodeURIComponent? Eine einfache Erklärung mit Beispielen
Wenn Sie eine URL in JavaScript erstellt haben, sind Sie wahrscheinlich auf encodeURIComponent gestoßen, und möglicherweise auf dessen verwirrend ähnliches Pendant, encodeURI. Die Verwendung des falschen ist ein klassischer Fehler, der Links auf subtile Weise unterbricht. Hier finden Sie eine klare Erklärung der Funktionsweise von encodeURIComponent mit Beispielen und einer einfachen Regel für die Wahl zwischen beiden.
Was es bewirkt
encodeURIComponent nimmt eine Zeichenfolge und ersetzt jedes Zeichen, das in einer URL nicht sicher ist, durch sein prozentcodiertes Äquivalent. Ein Leerzeichen wird zu %20, ein kaufmännisches Und wird zu %26, ein Gleichheitszeichen wird zu %3D, ein Fragezeichen wird zu %3F und so weiter. Der Zweck besteht darin, dafür zu sorgen, dass ein Textstück sicher als Wert, Suchbegriff, Parameter oder Weiterleitungsziel in eine URL eingefügt werden kann, ohne dass die Sonderzeichen als URL-Struktur missverstanden werden. Es kodiert alles, was ein Problem verursachen könnte, was genau das ist, was Sie für einen einzelnen Wert wünschen.
Ein konkretes Beispiel
Angenommen, Sie möchten eine Such-URL für die Suchanfrage „Katzen und Hunde“ erstellen. Wenn Sie es einfach verketten, erhalten Sie ...?q=cats & dogs, was kaputt geht, das kaufmännische Und wird als Parametertrennzeichen gelesen und das Leerzeichen ist unzulässig. Führen Sie den Wert zuerst über encodeURIComponent aus, und „cats & dogs“ wird zu cats%20%26%20dogs, sodass Sie ...?q=cats%20%26%20dogs erhalten, den der Server korrekt als Einzelwert „cats & dogs“ liest. Die Codierung bewahrt die Bedeutung Ihrer Daten, indem sie die Zeichen maskiert, die sonst strukturell wären.
encodeURIComponent vs. encodeURI
Der Unterschied besteht darin, was jeder in Ruhe lässt. encodeURIComponent kodiert alles, was reserviert ist, einschließlich der URL-Strukturzeichen wie /? & = #, da davon ausgegangen wird, dass Sie einen Wert codieren, der in einer URL enthalten ist. encodeURI kodiert diese Strukturzeichen bewusst nicht, da davon ausgegangen wird, dass Sie eine vollständige, bereits erstellte URL kodieren und diese funktionsfähig halten möchten. Daher behält encodeURI('https://x.com?a=b c') das //, das ? und das = intakt und korrigiert nur das Leerzeichen, während encodeURIComponent sie alle maskieren würde. Verwenden Sie „component“ für die einzelnen Teile, „encodeURI“ für eine ganze URL.
Die einfache Regel
Hier ist die Regel, die Sie vor Ärger bewahrt: Wenn Sie einen Wert kodieren, der in einer URL, einem Suchbegriff, einem Parameterwert, einem Pfadsegment oder einem Weiterleitungsziel enthalten ist, verwenden Sie encodeURIComponent. Wenn Sie eine gesamte URL codieren, die eine funktionierende URL bleiben soll, verwenden Sie encodeURI. Wenn Sie sich nicht sicher sind, möchten Sie fast immer encodeURIComponent, da Sie fast immer einen Wert und nicht eine ganze URL codieren. Wenn Sie dies richtig machen, werden die häufigsten Fehler bei der URL-Erstellung vermieden.
Achten Sie auf Doppelkodierung
Eine Falle: Führen Sie encodeURIComponent niemals für eine Zeichenfolge aus, die bereits codiert ist. Wenn Sie einen Wert zweimal kodieren, werden die Prozentzeichen selbst kodiert, %20 wird zu %2520 und die Verknüpfung wird unterbrochen. Kodieren Sie nur rohen, unkodierten Text. Wenn Sie nicht sicher sind, ob eine Zeichenfolge bereits codiert ist, decodieren Sie sie zuerst und codieren Sie sie dann genau einmal. Dieser doppelte Codierungsfehler ist die Ursache für den mysteriösen %2520, den man manchmal in defekten URLs sieht.