encodeURIComponent()

uriComponent

Ein String, der als URI-Komponente kodiert werden soll (ein Pfad, eine Abfragezeichenkette, ein Fragment usw.). Andere Werte werden in Strings umgewandelt.

Ein neuer String, der die bereitgestellte uriComponent als URI-Komponente kodiert darstellt.

URIError

Wird ausgelöst, wenn uriComponent einen einzelnen Surrogat enthält.

encodeURIComponent() ist eine Funktionseigenschaft des globalen Objekts.

encodeURIComponent() verwendet denselben Kodierungsalgorithmus wie in encodeURI() beschrieben. Es entzieht sich allen Zeichen außer:

A–Z a–z 0–9 - _ . ! ~ * ' ( )

Im Vergleich zu encodeURI() entzieht sich encodeURIComponent() einer größeren Anzahl von Zeichen. Verwenden Sie encodeURIComponent() bei von Benutzern eingegebenen Feldern aus Formularen, die POST an den Server gesendet werden — dies wird &-Symbole kodieren, die unbeabsichtigt während der Dateneingabe für Zeichencodes oder andere Zeichen generiert werden können, die eine Kodierung/Dekodierung erfordern. Beispielsweise, wenn ein Benutzer Jack & Jill schreibt, könnte das kaufmännische Und ohne encodeURIComponent() auf dem Server als Beginn eines neuen Feldes interpretiert und die Integrität der Daten gefährdet werden.

Für application/x-www-form-urlencoded müssen Leerzeichen durch + ersetzt werden, daher könnte man nach einer encodeURIComponent()-Ersetzung zusätzlich %20 durch + ersetzen wollen.

Das folgende Beispiel bietet die spezielle Kodierung, die innerhalb der UTF-8 Content-Disposition und Link Server-Antwort-Header-Parameter benötigt wird (z. B. UTF-8-Dateinamen):

const fileName = "my file(2).txt";
const header = `Content-Disposition: attachment; filename*=UTF-8''${encodeRFC5987ValueChars(
  fileName,
)}`;

console.log(header);
// "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt"

function encodeRFC5987ValueChars(str) {
  return (
    encodeURIComponent(str)
      // The following creates the sequences %27 %28 %29 %2A (Note that
      // the valid encoding of "*" is %2A, which necessitates calling
      // toUpperCase() to properly encode). Although RFC3986 reserves "!",
      // RFC5987 does not, so we do not need to escape it.
      .replace(
        /['()*]/g,
        (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`,
      )
      // 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, (str, hex) =>
        String.fromCharCode(parseInt(hex, 16)),
      )
  );
}

Das neuere RFC3986 reserviert !, ', (, ), und *, obwohl diese Zeichen keine formalisierten URI-Gliederungsverwendungen haben. Die folgende Funktion kodiert einen String für das RFC3986-kompatible URL-Komponentenformat. Es kodiert auch [ und ], die Teil der IPv6 URI-Syntax sind. Eine RFC3986-kompatible encodeURI-Implementierung sollte sie nicht entziehen, was im encodeURI()-Beispiel demonstriert wird.

function encodeRFC3986URIComponent(str) {
  return encodeURIComponent(str).replace(
    /[!'()*]/g,
    (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`,
  );
}

Ein URIError wird ausgelöst, wenn versucht wird, einen Surrogat zu kodieren, der nicht Teil eines High-Low-Paares ist. Zum Beispiel:

// High-low pair OK
encodeURIComponent("\uD800\uDFFF"); // "%F0%90%8F%BF"

// Lone high-surrogate code unit throws "URIError: malformed URI sequence"
encodeURIComponent("\uD800");

// Lone high-surrogate code unit throws "URIError: malformed URI sequence"
encodeURIComponent("\uDFFF");

Sie können String.prototype.toWellFormed() verwenden, das einzelne Surrogate durch das Unicode-Ersatzzeichen (U+FFFD) ersetzt, um diesen Fehler zu vermeiden. Sie können auch String.prototype.isWellFormed() verwenden, um zu überprüfen, ob ein String einzelne Surrogate enthält, bevor er an encodeURIComponent() übergeben wird.

• decodeURI()
• encodeURI()
• decodeURIComponent()