So kodieren/dekodieren Sie UTF-8 in JavaScript

UTF-8 steht für „ Unicode-Transformationsformat 8-Bit ” und entspricht einem großartigen Kodierungsformat, das sicherstellt, dass die Zeichen auf allen Geräten unabhängig von der verwendeten Sprache/Schrift korrekt angezeigt werden. Außerdem ist dieses Format hilfreich für Webseiten und wird zur Speicherung, Verarbeitung und Übertragung von Textdaten im Internet verwendet.

Dieses Tutorial deckt die unten aufgeführten Inhaltsbereiche ab:

• Was ist UTF-8-Kodierung?
• Wie funktioniert die UTF-8-Kodierung?
• Wie werden die Codepunktwerte berechnet?
• Wie kodiere/dekodiere ich UTF-8 in JavaScript?
• Kodieren/Dekodieren Sie UTF-8 in JavaScript mit den Methoden „encodeURIComponent()“ und „decodeURIComponent()“.
• Kodieren/Dekodieren Sie UTF-8 in JavaScript mit den Methoden „encodeURI()“ und „decodeURI()“.
• Kodieren/Dekodieren Sie UTF-8 in JavaScript mithilfe der regulären Ausdrücke.
• Abschluss

Was ist UTF-8-Kodierung?

„ UTF-8-Kodierung „ist das Verfahren zur Umwandlung der Folge von Unicode-Zeichen in eine codierte Zeichenfolge mit 8-Bit-Bytes. Diese Kodierung kann im Vergleich zu den anderen Zeichenkodierungen eine große Bandbreite an Zeichen darstellen.

Wie funktioniert die UTF-8-Kodierung?

Bei der Darstellung von Zeichen in UTF-8 wird jeder einzelne Codepunkt durch ein oder mehrere Bytes dargestellt. Nachfolgend finden Sie die Aufschlüsselung der Codepunkte im ASCII-Bereich:

• Ein einzelnes Byte stellt die Codepunkte im ASCII-Bereich (0-127) dar.
• Zwei Bytes stellen die Codepunkte im ASCII-Bereich (128-2047) dar.
• Drei Bytes stellen die Codepunkte im ASCII-Bereich (2048-65535) dar.
• Vier Bytes repräsentieren die Codepunkte im ASCII-Bereich (65536-1114111).

Es ist so, dass das erste Byte eines „ UTF-8 Die Sequenz wird als „ Leader-Byte ” gibt Auskunft über die Anzahl der Bytes in der Sequenz und den Codepunktwert des Zeichens.
Das „Leaderbyte“ für eine Einzel-, Zwei-, Drei- und Vier-Byte-Sequenz liegt im Bereich (0-127), (194-233), (224-239) bzw. (240-247).

Der Rest der aufeinanderfolgenden Bytes wird als „“ bezeichnet. hinterher ” Bytes. Die Bytes für eine Zwei-, Drei- und Vier-Byte-Sequenz liegen alle im Bereich (128–191). Auf diese Weise kann der Codepunktwert des Zeichens durch Analyse der führenden und nachfolgenden Bytes berechnet werden.

Wie werden die Codepunktwerte berechnet?

Die Codepunktwerte für verschiedene Bytesequenzen werden wie folgt berechnet:

• Zwei-Byte-Sequenz: Der Codepunkt entspricht „((lb – 194) * 64) + (tb – 128)“.
• Drei-Byte-Sequenz : Der Codepunkt entspricht „((lb – 224) * 4096) + ((tb1 – 128) * 64) + (tb2 – 128)“.
• Vier-Byte-Sequenz : Der Codepunkt entspricht „((lb – 240) * 262144) + ((tb1 – 128) * 4096) + ((tb2 – 128) * 64) + (tb3 – 128)“.

Wie kodiere/dekodiere ich UTF-8 in JavaScript?

Die Kodierung und Dekodierung von UTF-8 in JavaScript kann über die unten aufgeführten Ansätze erfolgen:

• „ enodeURIComponent() ' Und ' decodeURIComponent() „Methoden.
• „ encodeURI() ' Und ' decodeURI() „Methoden.
• Reguläre Ausdrücke.

Ansatz 1: UTF-8 in JavaScript mit den Methoden „encodeURIComponent()“ und „decodeURIComponent()“ kodieren/dekodieren

Der ' encodeURIComponent() Die Methode kodiert eine URI-Komponente. Außerdem können Sonderzeichen wie @, &, :, +, $, # usw. codiert werden. Das „ decodeURIComponent() Die Methode dekodiert jedoch eine URI-Komponente. Diese Methoden können verwendet werden, um die übergebenen Werte in UTF-8 zu kodieren bzw. zu dekodieren.

Syntax („encodeURIComponent()“-Methode)

In der angegebenen Syntax lautet „ X „gibt den zu kodierenden URI an.

Rückgabewert
Diese Methode hat einen codierten URI als Zeichenfolge abgerufen.

Syntax („decodeURIComponent()“-Methode)

Hier, ' X „bezieht sich auf den zu dekodierenden URI.

Rückgabewert
Diese Methode gibt den dekodierten URI zurück.

Beispiel 1: Codierung von UTF-8 in JavaScript
In diesem Beispiel wird die übergebene Zeichenfolge mithilfe einer benutzerdefinierten Funktion in einen codierten UTF-8-Wert codiert:

Führen Sie in diesen Codezeilen die unten angegebenen Schritte aus:

• Definieren Sie zunächst die Funktion „ encode_utf8() ”, das die übergebene Zeichenfolge codiert, die durch den angegebenen Parameter dargestellt wird.
• Diese Kodierung erfolgt durch „ encodeURIComponent() ”-Methode in der Funktionsdefinition.
• Notiz: Der ' unescape() Die Methode ersetzt jede Escape-Sequenz durch das durch sie dargestellte Zeichen.
• Initialisieren Sie anschließend den zu kodierenden Wert und zeigen Sie ihn an.
• Rufen Sie nun die definierte Funktion auf und übergeben Sie die definierte Zeichenkombination als Argumente, um diesen Wert in UTF-8 zu kodieren.

Ausgabe

Dabei kann davon ausgegangen werden, dass die einzelnen Zeichen entsprechend in UTF-8 dargestellt und kodiert werden.

Beispiel 2: Dekodierung von UTF-8 in JavaScript
Die folgende Codedemonstration dekodiert den übergebenen Wert (in Form von Zeichen) in eine kodierte UTF-8-Darstellung:

In diesem Codeblock:

• Definieren Sie ebenfalls die Funktion „ decode_utf8() ” das die übergebene Zeichenkombination über das „ dekodiert decodeURIComponent() ' Methode.
• Notiz: Der ' Flucht() Die Methode ruft eine neue Zeichenfolge ab, in der verschiedene Zeichen durch hexadezimale Escape-Sequenzen ersetzt werden.
• Geben Sie anschließend die zu dekodierende Zeichenkombination an und greifen Sie auf die definierte Funktion zu, um die Dekodierung in UTF-8 entsprechend durchzuführen.

Ausgabe

Hier kann impliziert werden, dass der codierte Wert im vorherigen Beispiel auf den Standardwert decodiert wird.

Ansatz 2: UTF-8 in JavaScript mit den Methoden „encodeURI()“ und „decodeURI()“ kodieren/dekodieren

Der ' encodeURI() Die Methode kodiert einen URI, indem sie jede Instanz mehrerer Zeichen durch eine Reihe von Escape-Sequenzen ersetzt, die die UTF-8-Kodierung des Zeichens darstellen. Im Vergleich zu „ encodeURIComponent() ”-Methode, diese spezielle Methode kodiert eine begrenzte Anzahl von Zeichen.

Der ' decodeURI() Die Methode dekodiert jedoch den URI (kodiert). Diese Methoden können in Kombination implementiert werden, um die Zeichenkombination in einem UTF-8-codierten Wert zu codieren und zu decodieren.

Syntax(encodeURI()-Methode)

In der obigen Syntax: „ X „entspricht dem Wert, der als URI kodiert werden soll.

Rückgabewert
Diese Methode ruft den codierten Wert in Form einer Zeichenfolge ab.

Syntax(decodeURI()-Methode)

Hier, ' X „ stellt den codierten URI dar, der decodiert werden soll.

Rückgabewert
Es gibt den dekodierten URI als String zurück.

Beispiel 1: Codierung von UTF-8 in JavaScript
Diese Demonstration kodiert die übergebene Zeichenkombination in einen kodierten UTF-8-Wert:

Erinnern Sie sich hier an die Ansätze zum Definieren einer für die Codierung zugewiesenen Funktion. Wenden Sie nun die Methode „encodeURI()“ an, um die übergebene Zeichenkombination als UTF-8-codierte Zeichenfolge darzustellen. Definieren Sie anschließend ebenfalls die auszuwertenden Zeichen und rufen Sie die definierte Funktion auf, indem Sie den definierten Wert als Argumente übergeben, um die Codierung durchzuführen.

Ausgabe

Hier ist ersichtlich, dass die übergebene Zeichenkombination erfolgreich kodiert wurde.

Beispiel 2: Dekodierung von UTF-8 in JavaScript
Die folgende Codedemonstration dekodiert den codierten UTF-8-Wert (im vorherigen Beispiel):

Deklarieren Sie gemäß diesem Code die Funktion „ decode_utf8() „, der den angegebenen Parameter umfasst, der die Kombination von Zeichen darstellt, die mit „ decodeURI() ' Methode. Geben Sie nun den zu dekodierenden Wert an und rufen Sie die definierte Funktion auf, um die Dekodierung auf „ UTF-8 ” Darstellung.

Ausgabe

Dieses Ergebnis impliziert, dass der zuvor codierte Wert entsprechend festgelegt wird.

Ansatz 3: UTF-8 in JavaScript mithilfe der regulären Ausdrücke kodieren/dekodieren

Bei diesem Ansatz wird die Codierung so angewendet, dass die Multibyte-Unicode-Zeichenfolge in mehrere UTF-8-Einzelbytezeichen codiert wird. Ebenso erfolgt die Dekodierung so, dass die kodierte Zeichenfolge wieder in Multibyte-Unicode-Zeichen dekodiert wird.

Beispiel 1: Codierung von UTF-8 in JavaScript
Der folgende Code kodiert die Multibyte-Unicode-Zeichenfolge in UTF-8-Einzelbyte-Zeichen:

In diesem Codeausschnitt:

• Definieren Sie die Funktion „ encodeUTF8() ” bestehend aus dem Parameter, der den Wert darstellt, der kodiert werden soll als „ UTF-8 “.
• Wenden Sie in seiner Definition eine Prüfung auf den übergebenen Wert an, der nicht die Zeichenfolge ist, indem Sie „ Art der ”-Operator und geben Sie die angegebene benutzerdefinierte Ausnahme über den „ werfen ' Stichwort.
• Wenden Sie danach „ charCodeAt() ' Und ' fromCharCode() ”-Methoden zum Abrufen des Unicodes des ersten Zeichens in der Zeichenfolge und zum Umwandeln des angegebenen Unicode-Werts in Zeichen.
• Rufen Sie abschließend die definierte Funktion auf, indem Sie die angegebene Zeichenfolge übergeben, um diesen Wert als „ UTF-8 ” Darstellung.

Ausgabe

Diese Ausgabe zeigt an, dass die Kodierung ordnungsgemäß durchgeführt wurde.

Beispiel 2: Dekodierung von UTF-8 in JavaScript
In dieser Demonstration wird die Zeichenfolge dekodiert zu „ UTF-8 ” Darstellung:

In diesem Code:

• Definieren Sie auf ähnliche Weise die Funktion „ decodeUTF8() ” mit dem Parameter, der sich auf den übergebenen Wert bezieht, der dekodiert werden soll.
• Überprüfen Sie in der Funktionsdefinition die Zeichenfolgenbedingung des übergebenen Werts über das „ Art der ' Operator.
• Wenden Sie nun das „ charCodeAt() ”-Methode zum Abrufen des Unicodes des ersten, zweiten bzw. dritten Zeichenfolgenzeichens.
• Wenden Sie außerdem das „ String.fromCharCode() ”-Methode zur Umwandlung der Unicode-Werte in Zeichen.
• Wiederholen Sie diesen Vorgang ebenfalls noch einmal, um den Unicode der ersten und zweiten Zeichenfolgenzeichen abzurufen und diese Unicode-Werte in Zeichen umzuwandeln.
• Greifen Sie abschließend auf die definierte Funktion zu, um den UTF-8-dekodierten Wert zurückzugeben.

Ausgabe

Hier kann überprüft werden, ob die Dekodierung korrekt durchgeführt wurde.

Abschluss

Die Kodierung/Dekodierung in UTF-8-Darstellung kann über die „ enodeURIComponent()“ Und ' decodeURIComponent() Methoden, die „ encodeURI() ' Und ' decodeURI() ”-Methoden oder die Verwendung der regulären Ausdrücke.