JavaScript TextDecoder und TextEncoder

Die Beherrschung der TextEncoder- und TextDecoder-Schnittstellen in JavaScript ist unerlässlich, um Textdaten effizient zu verarbeiten – insbesondere in Anwendungen, die mit rohen Binärdaten und verschiedenen Zeichenkodierungen arbeiten. Dieser Leitfaden erklärt, was diese Schnittstellen leisten, wann Sie sie wirklich benötigen und wie Sie sie korrekt einsetzen, mit ausführbaren Beispielen und praktischen Hinweisen.

Was diese Seite behandelt

• Was Textkodierung und -dekodierung bedeuten und warum Bytes nicht einfach als Zeichen behandelt werden können.
• Kodieren von Zeichenketten in Bytes mit TextEncoder (nur UTF-8).
• Dekodieren von Bytes zurück in Zeichenketten mit TextDecoder, einschließlich Nicht-UTF-8-Kodierungen.
• Streaming, Fehlerbehandlung (fatal) und ein praxisnahes Beispiel mit fetch.

Einführung in die Textkodierung und -dekodierung

Ein JavaScript-string ist eine Folge von Zeichen, aber Netzwerk, Dateisystem und die meisten binären APIs arbeiten mit Bytes. Textkodierung wandelt Zeichen nach einem Schema (z. B. UTF-8) in Bytes um; Textdekodierung kehrt diesen Vorgang um und wandelt Bytes wieder in Zeichen zurück. Dieselbe Zeichenkette kann je nach Kodierung unterschiedliche Byte-Folgen erzeugen, weshalb ein Decoder wissen muss, in welcher Kodierung die Bytes geschrieben wurden.

JavaScript stellt zwei eingebaute Schnittstellen dafür bereit: TextEncoder (string → Bytes) und TextDecoder (Bytes → string). Sie kommen immer dann zum Einsatz, wenn Sie mit rohen Binärdaten arbeiten – beim Lesen eines Blob, beim Verarbeiten eines ArrayBuffer oder beim Streamen einer Antwort aus der Fetch API.

TextEncoder in JavaScript verwenden

Die TextEncoder-Schnittstelle in JavaScript konvertiert Text aus einem string in einen kodierten Byte-Stream. Sie unterstützt ausschließlich UTF-8-Kodierung und akzeptiert keine Kodierungsparameter in ihrem Konstruktor.

Einfaches Textkodierungsbeispiel

Um einen string mit TextEncoder zu kodieren, folgen Sie diesem einfachen Beispiel:

Dieses Skript gibt ein Uint8Array aus, das die UTF-8-kodierte Version von "Hello, world!" zeigt. Jede Zahl entspricht einem Byte: 72 steht für H, 101 für e usw. Dieses Array sind die Binärdaten, die über Netzwerkprotokolle übertragen oder zur späteren Verwendung gespeichert werden können. Beachten Sie, dass der Konstruktor keine Argumente entgegennimmt – TextEncoder erzeugt immer nur UTF-8.

Erweiterte Kodierungstechniken

Umgang mit Nicht-Standard-Zeichen

TextEncoder verarbeitet den gesamten Unicode-Bereich nahtlos. Mehrbyte-Zeichen (chinesische Schriftzeichen, Emoji, Buchstaben mit Akzenten) werden jeweils in mehrere Bytes umgewandelt – ein wesentlicher Grund dafür, dass die Byte-Länge eines kodierten strings in der Regel größer ist als seine .length:

Dies zeigt, dass TextEncoder jedes in UTF-8 darstellbare Zeichen – einschließlich Emoji und Sonderzeichen – konvertiert, und dass man nie davon ausgehen sollte, dass ein Zeichen einem Byte entspricht.

TextDecoder in JavaScript verwenden

Während TextEncoder Zeichenketten in Bytes umwandelt, führt TextDecoder den umgekehrten Vorgang durch und wandelt kodierte Byte-Daten zurück in lesbare Zeichenketten um. Es unterstützt mehrere Kodierungen, verwendet standardmäßig aber UTF-8.

Einfaches Textdekodierungsbeispiel

So können Sie Byte-Daten zurück in einen string dekodieren:

Das Argument für decode() kann ein Uint8Array, ein beliebiges anderes TypedArray, ein ArrayBuffer oder eine DataView sein – alles, was rohe Bytes kapselt.

Dieser Code wandelt ein Uint8Array zurück in den string "Hello, world!" und veranschaulicht die grundlegende Funktionalität von TextDecoder.

Dekodierung mit verschiedenen Kodierungen

Beispiel mit ISO-8859-1

Anders als TextEncoder, der nur UTF-8 unterstützt, kann TextDecoder viele veraltete Kodierungen lesen. Übergeben Sie das Kodierungslabel (z. B. "iso-8859-1", "windows-1252" oder "utf-16le") an den Konstruktor:

Dies gibt "Hello, Monde!" aus und zeigt, wie Nicht-UTF-8-Byte-Streams verarbeitet werden – nützlich beim Lesen von Dateien, die von älteren Systemen oder Nicht-Unicode-Tools erzeugt wurden.

Best Practices für Kodierung und Dekodierung

Textintegrität sicherstellen

Stellen Sie beim Kodieren und Dekodieren von Text sicher, dass der Text korrekt und vollständig übertragen oder gespeichert wird. Überprüfen Sie stets, dass die kodierten Byte-Daten verlustfrei in den ursprünglichen Text zurückkonvertiert werden können.

Streaming-Dekodierung über Chunks

Ein Mehrbyte-Zeichen kann auf zwei über das Netzwerk eintreffende Datenchunks aufgeteilt sein. Das unabhängige Dekodieren jedes Chunks würde das Grenzzeichen verfälschen. Die Option { stream: true } weist den Decoder an, unvollständige abschließende Sequenzen zurückzuhalten und sie dem nächsten Chunk voranzustellen. Rufen Sie decode() am Ende ohne Argument auf, um den Puffer zu leeren:

Ohne { stream: true } würde diese aufgeteilte Byte-Sequenz jeweils zu Ersatzzeichen (U+FFFD) dekodiert und das ursprüngliche 你 würde verloren gehen.

Fehlerbehandlung mit fatal

Standardmäßig ersetzt TextDecoder ungültige Byte-Sequenzen durch das Ersatzzeichen (U+FFFD, dargestellt als �) anstatt eine Ausnahme zu werfen. Um eine strenge Validierung zu erzwingen und bei fehlerhafter Eingabe einen TypeError auszulösen, übergeben Sie { fatal: true }:

Verwenden Sie fatal: true, wenn beschädigte Daten abgelehnt werden müssen; behalten Sie das Standard-Verhalten (verlustbehaftet) bei, wenn eine teilweise Anzeige besser als ein Absturz ist.

Praxisbeispiel: Dekodierung eines Fetch-Response-Streams

Der häufigste praktische Einsatz von TextDecoder ist das byteweise Lesen eines gestreamten HTTP-Response-Body. In Kombination mit der Option { stream: true } wird Text sicher zusammengesetzt, auch wenn Zeichen Chunk-Grenzen überspannen. Der folgende Codeausschnitt simuliert einen zwei-Chunk-Stream, sodass er überall ausgeführt werden kann:

In echtem Code würden diese Chunks aus response.body.getReader() nach einem fetch-Aufruf stammen – so funktioniert auch das Tracking des Download-Fortschritts.

Wann TextEncoder und TextDecoder verwenden

• Beim Lesen oder Schreiben des Inhalts eines Blob oder einer File als rohe Bytes.
• Beim direkten Arbeiten mit einem ArrayBuffer oder typed array.
• Beim chunk-weisen Verarbeiten einer gestreamten Netzwerkantwort.
• Beim Berechnen von Byte-Längen (für Content-Length-Header), wenn die Zeichenanzahl nicht ausreicht.

Sie benötigen sie in der Regel nicht für gewöhnliches JSON oder Text, der mit response.json() / response.text() abgerufen wird – der Browser übernimmt die Dekodierung dort für Sie.

Fazit

TextEncoder und TextDecoder sind die Brücke zwischen JavaScript-strings und den rohen Bytes, die von binären APIs, dem Netzwerk und dem Dateisystem verwendet werden. Die wesentlichen Punkte: TextEncoder unterstützt nur UTF-8 und akzeptiert keine Optionen; TextDecoder unterstützt viele Kodierungen und bietet { stream: true } für chunk-weise Daten und { fatal: true } für strenge Validierung. Mit diesen Werkzeugen können Sie Text über beliebige Kodierungen und Datenquellen hinweg korrekt verarbeiten.

Übungen