Signatur
Beschreibung
Die Funktion encodeURIComponent() kodiert einen URI, indem sie jedes Vorkommen bestimmter Zeichen durch eine, zwei, drei oder vier Escape-Sequenzen ersetzt, welche die UTF-8-Kodierung des Zeichens repräsentieren (vier Escape-Sequenzen nur bei Zeichen, die aus zwei Surrogat-Zeichen bestehen). Im Vergleich zu encodeURI() kodiert diese Funktion mehr Zeichen, einschließlich derjenigen, die Teil der URI-Syntax sind.
encodeURIComponent() ist eine Funktions-Eigenschaft des globalen Objekts.
encodeURIComponent() verwendet denselben Kodierungsalgorithmus wie in encodeURI() beschrieben. Es escaped alle Zeichen außer:
A–Z a–z 0–9 - _ . ! ~ * ' ( )
Im Vergleich zu encodeURI() escaped encodeURIComponent() eine größere Menge an Zeichen. Verwenden Sie encodeURIComponent() bei vom Benutzer eingegebenen Feldern aus Formularen, die an den Server gesendet werden — dies kodiert &-Symbole, die während der Dateneingabe versehentlich für character references oder andere kodierungs-/dekodierungspflichtige Zeichen erzeugt werden können. Schreibt ein Benutzer beispielsweise Jack & Jill, könnte das kaufmännische Und ohne encodeURIComponent() 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 sind Leerzeichen durch + zu ersetzen, sodass man einem encodeURIComponent()-Ersetzen ein zusätzliches Ersetzen von %20 durch + folgen lassen möchte.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $uriComponent Pflicht | string | — | Ein String, der als URI-Komponente (ein Pfad, Query-String, Fragment usw.) kodiert werden soll. Andere Werte werden in Strings konvertiert. |
Rückgabewert
Beispiele
Kodierung für Content-Disposition- und Link-Header
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)
// Das folgende erzeugt die Sequenzen %27 %28 %29 %2A (beachte, dass
// die gültige Kodierung von "*" %2A ist, wodurch toUpperCase()
// aufgerufen werden muss, um korrekt zu kodieren). Obwohl RFC3986 "!"
// reserviert, tut RFC5987 dies nicht, daher müssen wir es nicht escapen.
.replace(
/['()*]/g,
(c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`,
)
// Die folgenden sind laut RFC5987 nicht für Prozent-Kodierung erforderlich,
// sodass wir eine etwas bessere Lesbarkeit über die Leitung erlauben können: |`^
.replace(/%(7C|60|5E)/g, (str, hex) =>
String.fromCharCode(parseInt(hex, 16)),
)
);
}Kodierung für RFC3986
function encodeRFC3986URIComponent(str) {
return encodeURIComponent(str).replace(
/[!'()*]/g,
(c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`,
);
}Kodierung eines einzelnen Surrogats wirft einen Fehler
// High-low-Paar OK
encodeURIComponent("\uD800\uDFFF"); // "%F0%90%8F%BF"
// Einzelne High-Surrogate-Code-Unit wirft "URIError: malformed URI sequence"
encodeURIComponent("\uD800");
// Einzelne High-Surrogate-Code-Unit wirft "URIError: malformed URI sequence"
encodeURIComponent("\uDFFF");