Comment encoder/décoder UTF-8 en JavaScript

UTF-8 signifie « Format de transformation Unicode 8 bits » et correspond à un excellent format de codage qui garantit que les caractères sont affichés de manière appropriée sur tous les appareils, quelle que soit la langue/l'écriture utilisée. En outre, ce format est utile pour les pages Web et est utilisé pour le stockage, le traitement et la transmission de données textuelles sur Internet.

Ce didacticiel couvre les domaines de contenu indiqués ci-dessous :

• Qu’est-ce que l’encodage UTF-8 ?
• Comment fonctionne l'encodage UTF-8 ?
• Comment les valeurs des points de code sont-elles calculées ?
• Comment encoder/décoder UTF-8 en JavaScript ?
• Encoder/décoder UTF-8 en JavaScript à l'aide des méthodes « encodeURIComponent() » et « decodeURIComponent() ».
• Encoder/décoder UTF-8 en JavaScript à l'aide des méthodes « encodeURI() » et « decodeURI() ».
• Encoder/décoder UTF-8 en JavaScript à l'aide des expressions régulières.
• Conclusion

Qu’est-ce que l’encodage UTF-8 ?

' Encodage UTF-8 ' est la procédure de transformation de la séquence de caractères Unicode en une chaîne codée comprenant des octets de 8 bits. Ce codage peut représenter une large gamme de caractères par rapport aux autres codages de caractères.

Comment fonctionne l'encodage UTF-8 ?

Lors de la représentation des caractères en UTF-8, chaque point de code individuel est représenté par un ou plusieurs octets. Voici la répartition des points de code dans la plage ASCII :

• Un seul octet représente les points de code dans la plage ASCII (0-127).
• Deux octets représentent les points de code dans la plage ASCII (128-2047).
• Trois octets représentent les points de code dans la plage ASCII (2048-65535).
• Quatre octets représentent les points de code dans la plage ASCII (65536-1114111).

Il est tel que le premier octet d'un ' UTF-8 ' La séquence est appelée ' octet de leader ' qui donne des informations sur le nombre d'octets dans la séquence et la valeur du point de code du caractère.
L'« octet leader » pour une séquence d'un, deux, trois et quatre octets est respectivement compris entre (0-127), (194-233), (224-239) et (240-247).

Le reste des octets en séquence est appelé « traînant ' octets. Les octets pour une séquence de deux, trois et quatre octets sont tous compris entre 128 et 191. Il est tel que la valeur du point de code du caractère peut être calculée en analysant les octets de début et de fin.

Comment les valeurs des points de code sont-elles calculées ?

Les valeurs de points de code pour différentes séquences d'octets sont calculées comme suit :

• Séquence de deux octets : Le point de code est équivalent à « ((lb – 194) * 64) + (tb – 128) ».
• Séquence de trois octets : Le point de code est équivalent à « ((lb – 224) * 4096) + ((tb1 – 128) * 64) + (tb2 – 128) ».
• Séquence de quatre octets : Le point de code est équivalent à « ((lb – 240) * 262144) + ((tb1 – 128) * 4096) + ((tb2 – 128) * 64) + (tb3 – 128) ».

Comment encoder/décoder UTF-8 en JavaScript ?

L'encodage et le décodage de l'UTF-8 en JavaScript peuvent être effectués via les approches indiquées ci-dessous :

• ' enodeURIComponent() ' et ' décoderURIComponent() » Méthodes.
• ' encodeURI() ' et ' décoderURI() » Méthodes.
• Expressions régulières.

Approche 1 : Encoder/Décoder UTF-8 en JavaScript à l'aide des méthodes « encodeURIComponent() » et « decodeURIComponent() »

Le ' encodeURIComponent() ' La méthode code un composant URI. En outre, il peut encoder des caractères spéciaux tels que @, &, :, +, $, #, etc. décoderURIComponent() ', cependant, décode un composant URI. Ces méthodes peuvent être utilisées pour coder et décoder les valeurs transmises en UTF-8, respectivement.

Syntaxe (Méthode « encodeURIComponent() »)

Dans la syntaxe donnée, ' X » indique l'URI à encoder.

Valeur de retour
Cette méthode a récupéré un URI codé sous forme de chaîne.

Syntaxe (Méthode « decodeURIComponent() »)

Ici, ' X » fait référence à l’URI à décoder.

Valeur de retour
Cette méthode donne l’URI décodé.

Exemple 1 : Codage UTF-8 en JavaScript
Cet exemple encode la chaîne transmise en une valeur UTF-8 codée à l'aide d'une fonction définie par l'utilisateur :

Dans ces lignes de code, effectuez les étapes ci-dessous :

• Tout d’abord, définissez la fonction « encode_utf8() ' qui code la chaîne transmise représentée par le paramètre spécifié.
• Cet encodage se fait par le « encodeURIComponent() ' dans la définition de la fonction.
• Note: Le ' annuler l'évasion() ' La méthode remplace toute séquence d'échappement par le caractère qu'elle représente.
• Après cela, initialisez la valeur à encoder et affichez-la.
• Maintenant, appelez la fonction définie et transmettez la combinaison de caractères définie comme arguments pour coder cette valeur en UTF-8.

Sortir

Ici, on peut sous-entendre que les caractères individuels sont représentés et codés en UTF-8 en conséquence.

Exemple 2 : décodage de UTF-8 en JavaScript
La démonstration de code ci-dessous décode la valeur transmise (sous forme de caractères) en une représentation codée UTF-8 :

Dans ce bloc de code :

• De même, définissez la fonction « décoder_utf8() ' qui décode la combinaison de caractères transmise via le ' décoderURIComponent() ' méthode.
• Note: Le ' s'échapper() ' La méthode récupère une nouvelle chaîne dans laquelle divers caractères sont remplacés par des séquences d'échappement hexadécimales.
• Après cela, spécifiez la combinaison de caractères à décoder et accédez à la fonction définie pour effectuer le décodage en UTF-8 de manière appropriée.

Sortir

Ici, cela peut être sous-entendu que la valeur codée dans l'exemple précédent est décodée à la valeur par défaut.

Approche 2 : Encoder/Décoder UTF-8 en JavaScript à l'aide des méthodes « encodeURI() » et « decodeURI() »

Le ' encodeURI() ' La méthode code un URI en remplaçant chaque instance de plusieurs caractères par un certain nombre de séquences d'échappement représentant le codage UTF-8 du caractère. Par rapport au « encodeURIComponent() ', cette méthode particulière code des caractères limités.

Le ' décoderURI() ', cependant, décode l'URI (encodé). Ces méthodes peuvent être implémentées en combinaison pour coder et décoder la combinaison de caractères dans une valeur codée en UTF-8.

Syntaxe (méthode encodeURI())

Dans la syntaxe ci-dessus, ' X » correspond à la valeur à encoder en URI.

Valeur de retour
Cette méthode récupère la valeur codée sous la forme d'une chaîne.

Syntaxe (méthode decodeURI())

Ici, ' X ' représente l'URI codé à décoder.

Valeur de retour
Il renvoie l'URI décodé sous forme de chaîne.

Exemple 1 : Codage UTF-8 en JavaScript
Cette démonstration encode la combinaison de caractères transmise en une valeur UTF-8 codée :

Rappelons ici les approches pour définir une fonction allouée au codage. Maintenant, appliquez la méthode « encodeURI() » pour représenter la combinaison de caractères transmise sous forme de chaîne codée en UTF-8. Après cela, définissez également les caractères à évaluer et invoquez la fonction définie en passant la valeur définie comme arguments pour effectuer l'encodage.

Sortir

Ici, il est évident que la combinaison de caractères transmise est codée avec succès.

Exemple 2 : décodage de UTF-8 en JavaScript
La démonstration de code ci-dessous décode la valeur UTF-8 codée (dans l'exemple précédent) :

D’après ce code, déclarez la fonction « décoder_utf8() ' qui comprend le paramètre indiqué qui représente la combinaison de caractères à décoder à l'aide du ' décoderURI() ' méthode. Maintenant, précisez la valeur à décoder et invoquez la fonction définie pour appliquer le décodage au « UTF-8 ' représentation.

Sortir

Ce résultat implique que la valeur codée précédemment est décidée en conséquence.

Approche 3 : Encoder/décoder UTF-8 en JavaScript à l'aide des expressions régulières

Cette approche applique le codage de telle sorte que la chaîne Unicode multi-octets soit codée en plusieurs caractères UTF-8 à un seul octet. De même, le décodage est effectué de telle sorte que la chaîne codée soit décodée en caractères Unicode multi-octets.

Exemple 1 : Codage UTF-8 en JavaScript
Le code ci-dessous code la chaîne Unicode multi-octets en caractères UTF-8 à un octet :

Dans cet extrait de code :

• Définir la fonction « encodeUTF8() ' comprenant le paramètre qui représente la valeur à coder comme ' UTF-8 ».
• Dans sa définition, appliquez une vérification sur la valeur passée qui n'est pas la chaîne en utilisant le ' Type de ' et renvoie l'exception personnalisée spécifiée via l'opérateur ' lancer ' mot-clé.
• Après cela, appliquez le « charCodeAt() ' et ' deCharCode() ' pour récupérer l'Unicode du premier caractère de la chaîne et transformer la valeur Unicode donnée en caractères, respectivement.
• Enfin, invoquez la fonction définie en passant la séquence de caractères donnée pour coder cette valeur sous la forme « UTF-8 ' représentation.

Sortir

Cette sortie signifie que le codage est effectué de manière appropriée.

Exemple 2 : décodage de UTF-8 en JavaScript
Dans cette démonstration, la séquence de caractères est décodée en « UTF-8 ' représentation:

Dans ce code :

• De même, définissez la fonction « décoderUTF8() ' ayant le paramètre qui fait référence à la valeur transmise à décoder.
• Dans la définition de la fonction, vérifiez la condition de chaîne de la valeur transmise via le «  Type de » opérateur.
• Maintenant, appliquez le « charCodeAt() ' pour récupérer l'Unicode des premier, deuxième et troisième caractères de chaîne, respectivement.
• Appliquez également le « String.fromCharCode() » pour transformer les valeurs Unicode en caractères.
• De même, répétez cette procédure pour récupérer l'Unicode des premier et deuxième caractères de chaîne et transformer ces valeurs Unicode en caractères.
• Enfin, accédez à la fonction définie pour renvoyer la valeur décodée UTF-8.

Sortir

Ici, on peut vérifier que le décodage est effectué correctement.

Conclusion

L'encodage/décodage en représentation UTF-8 peut être effectué via le ' enodeURIComponent()' et ' décoderURIComponent() méthodes, le « encodeURI() ' et ' décoderURI() ', ou en utilisant les expressions régulières.