JavaScript TextDecoder et TextEncoder
Explorez les objets intégrés TextDecoder et TextEncoder en JavaScript pour gérer efficacement les données textuelles et les encodages de caractères.
Maîtriser les interfaces TextEncoder et TextDecoder en JavaScript est indispensable pour gérer efficacement les données textuelles, en particulier dans les applications qui traitent des données binaires brutes et différents encodages de caractères. Ce guide explique ce que font ces interfaces, quand vous en avez réellement besoin et comment les utiliser correctement, avec des exemples exécutables et des pièges pratiques.
Ce que couvre cette page
- Ce que signifient l'encodage et le décodage de texte, et pourquoi vous ne pouvez pas simplement traiter les octets comme des caractères.
- Encodage de chaînes en octets avec
TextEncoder(UTF-8 uniquement). - Décodage d'octets en chaînes avec
TextDecoder, y compris les encodages non UTF-8. - Streaming, gestion des erreurs (
fatal) et un exemple concret avecfetch.
Introduction à l'encodage et au décodage de texte
Une chaîne JavaScript est une séquence de caractères, mais le réseau, le système de fichiers et la plupart des API binaires travaillent avec des octets. L'encodage de texte transforme les caractères en octets selon un schéma (comme UTF-8) ; le décodage de texte inverse ce processus en retransformant les octets en caractères. La même chaîne peut produire des séquences d'octets différentes selon l'encodage, c'est pourquoi un décodeur doit connaître l'encodage dans lequel les octets ont été écrits.
JavaScript fournit deux interfaces intégrées pour cela : TextEncoder (string → octets) et TextDecoder (octets → string). Elles apparaissent dès que vous manipulez des données binaires brutes — lors de la lecture d'un Blob, du traitement d'un ArrayBuffer, ou du streaming d'une réponse depuis la Fetch API.
Utiliser TextEncoder en JavaScript
L'interface TextEncoder en JavaScript convertit du texte d'une chaîne en un flux d'octets encodé. Elle prend en charge exclusivement l'encodage UTF-8 et n'accepte aucun paramètre d'encodage dans son constructeur.
Exemple d'encodage de texte de base
Pour encoder une chaîne avec TextEncoder, suivez cet exemple simple :
Ce script produit un Uint8Array affichant la version encodée en UTF-8 de "Hello, world!". Chaque nombre représente un octet : 72 correspond à H, 101 à e, et ainsi de suite. Ce tableau contient les données binaires pouvant être transmises via des protocoles réseau ou stockées pour une utilisation ultérieure. Notez que le constructeur ne prend aucun argument — TextEncoder ne produit que du UTF-8.
Techniques d'encodage avancées
Gestion des caractères non standard
TextEncoder gère l'intégralité de la plage Unicode de manière transparente. Les caractères multi-octets (lettres chinoises, emoji, lettres accentuées) se développent en plusieurs octets chacun — une raison essentielle pour laquelle la longueur en octets d'une chaîne encodée est généralement supérieure à sa .length :
Cela montre que TextEncoder convertit tout caractère représentable en UTF-8, y compris les emoji et les symboles spéciaux, et que vous ne devez jamais supposer qu'un caractère équivaut à un octet.
Utiliser TextDecoder en JavaScript
Tandis que TextEncoder convertit des chaînes en octets, TextDecoder effectue l'opération inverse en transformant des données d'octets encodées en chaînes lisibles. Il prend en charge plusieurs encodages mais utilise UTF-8 par défaut.
Exemple de décodage de texte de base
Voici comment décoder des données d'octets en chaîne :
L'argument de decode() peut être un Uint8Array, tout autre TypedArray, un ArrayBuffer ou un DataView — tout ce qui encapsule des octets bruts.
Ce code convertit un Uint8Array en la chaîne "Hello, world!", illustrant les fonctionnalités de base de TextDecoder.
Décodage avec différents encodages
Exemple avec ISO-8859-1
Contrairement à TextEncoder, qui est limité à UTF-8, TextDecoder peut lire de nombreux encodages hérités. Passez le label d'encodage (par exemple "iso-8859-1", "windows-1252", ou "utf-16le") au constructeur :
Cela produit "Hello, Monde!", montrant comment gérer les flux d'octets non UTF-8 — utile lors de la lecture de fichiers produits par des systèmes plus anciens ou des outils non Unicode.
Bonnes pratiques pour l'encodage et le décodage
Assurer l'intégrité du texte
Lors de l'encodage et du décodage de texte, veillez à ce que le texte soit correctement et complètement transféré ou stocké. Vérifiez toujours que les données d'octets encodées se reconvertissent dans le texte original sans perte.
Décodage en streaming par morceaux
Un caractère multi-octet peut être réparti sur deux morceaux de données arrivant sur le réseau. Décoder chaque morceau indépendamment corromprait le caractère à la frontière. L'option { stream: true } indique au décodeur de conserver toute séquence de fin incomplète et de la préfixer au morceau suivant. Appelez decode() une dernière fois sans argument pour vider le tampon :
Sans { stream: true }, cette séquence d'octets fragmentée serait décodée en caractères de remplacement (U+FFFD) et le 你 original serait perdu.
Gestion des erreurs avec fatal
Par défaut, TextDecoder remplace les séquences d'octets invalides par le caractère de remplacement (U+FFFD, affiché sous la forme �) plutôt que de lever une exception. Pour appliquer une validation stricte et lever une TypeError sur une entrée malformée, passez { fatal: true } :
Utilisez fatal: true lorsque vous devez rejeter des données corrompues ; conservez le comportement par défaut (avec perte) lorsqu'un affichage partiel est préférable à un plantage.
Exemple concret : décodage d'un flux de réponse Fetch
L'utilisation pratique la plus courante de TextDecoder est la lecture d'un corps de réponse HTTP streamé octet par octet. Combinée avec l'option { stream: true }, elle reconstitue le texte en toute sécurité même lorsque des caractères chevauchent les frontières de morceaux. L'extrait ci-dessous simule un flux en deux morceaux pour s'exécuter n'importe où :
Dans du code réel, vous obtiendriez ces morceaux depuis response.body.getReader() après un appel fetch, ce qui est également la façon dont fonctionne le suivi de la progression des téléchargements.
Quand utiliser TextEncoder et TextDecoder
- Lire ou écrire le contenu d'un Blob ou d'un File sous forme d'octets bruts.
- Travailler directement avec un ArrayBuffer ou un typed array.
- Traiter une réponse réseau streamée morceau par morceau.
- Calculer des longueurs en octets (pour les en-têtes
Content-Length) lorsque le nombre de caractères ne suffit pas.
Vous n'en avez généralement pas besoin pour du JSON ou du texte ordinaire récupéré avec response.json() / response.text() — le navigateur gère alors le décodage pour vous.
Conclusion
TextEncoder et TextDecoder constituent le pont entre les chaînes JavaScript et les octets bruts utilisés par les API binaires, le réseau et le système de fichiers. Retenez l'essentiel : TextEncoder est limité à UTF-8 et ne prend aucune option ; TextDecoder prend en charge de nombreux encodages et offre { stream: true } pour les données fragmentées et { fatal: true } pour une validation stricte. Avec ces outils dans votre arsenal, vous pouvez gérer le texte correctement quel que soit l'encodage et la source de données.