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 eine alleinstehende Surrogate enthält.

encodeURIComponent() ist eine Funktionseigenschaft des globalen Objekts.

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

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

Im Vergleich zu encodeURI() entkommt encodeURIComponent() einer größeren Anzahl von Zeichen. Verwenden Sie encodeURIComponent() für benutzereingetragene Felder aus Formularen, die an den Server gesendet werden – dies wird &-Symbole kodieren, die möglicherweise während der Dateneingabe für Zeichenreferenzen oder andere Zeichen, die Kodierung/Dekodierung erfordern, versehentlich generiert werden. Wenn ein Benutzer beispielsweise Jack & Jill schreibt, könnte ohne encodeURIComponent() das kaufmännische Und-Zeichen auf dem Server als Beginn eines neuen Feldes interpretiert werden und die Integrität der Daten gefährden.

Für application/x-www-form-urlencoded sollen Leerzeichen durch + ersetzt werden, daher möchten Sie möglicherweise eine encodeURIComponent()-Ersetzung mit einer zusätzlichen Ersetzung von %20 durch + ergänzen.

Das folgende Beispiel bietet die spezielle Kodierung, die innerhalb von UTF-8 Content-Disposition und Link Serverantwort-Header-Parameter erforderlich ist (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 formalen URI-Abgrenzungsverwendungen haben. Die folgende Funktion kodiert einen String für ein RFC3986-kompatibles URL-Komponentenformat. Es kodiert auch [ und ], die Teil der IPv6 URI-Syntax sind. Eine RFC3986-kompatible encodeURI-Implementierung sollte sie nicht escapen, 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, ein Surrogat zu kodieren, das 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, welches alleinstehende 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 alleinstehende Surrogate enthält, bevor Sie ihn an encodeURIComponent() übergeben.

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