Comment démarrer avec l'internationalisation en JavaScript

En adaptant nos applications à différentes langues et pays, nous offrons une meilleure expérience utilisateur. Il est plus simple pour les utilisateurs de gérer les notations connues pour les dates, les devises et les nombres.

L'internationalisation (i18n) implique l'ajout de la prise en charge de différentes langues et pays dans votre application.Le nombre 18 représente le nombre de lettres entre le premier «i» et le dernier «n» .

Des exemples d'internationalisation peuvent être la prise en charge d'Unicode, la personnalisation de l'interface utilisateur pour différents alphabets ou le tri par tableau de chaînes non anglaises.

JavaScript implémente la spécification d'API d'internationalisation et définit l'objet Intl intégré.

Et ce qui le rend si utile, c'est qu'il offre une excellente compatibilité entre navigateurs et un support Node.js:

Commençons!

L' Intlobjet donne accès à plusieurs constructeurs, comme:

  • Intl.DateTimeFormat - formatage de la date et de l'heure en fonction de la langue.
  • Intl.NumberFormat - formatage des nombres sensible à la langue.
  • Intl.PluralRules - formatage sensible au pluriel et règles de langage pluriel.
  • Intl.Collator - comparaison de chaînes sensible à la langue.

La création de l'un de ces objets suit un modèle simple:

const formatter = new Intl.ctor(locales, options);

Par exemple, la langue « de-AT» : langue allemande telle qu'elle est utilisée en Autriche:

const dateFormatterAT = new Intl.DateTimeFormat("de-AT");

Ensuite, nous appelons la méthode format () avec un objet Date fourni :

const date = new Date("2018-11-25");const format = dateFormatterAT.format(date); // "25.11.2018"

Il contient uniquement les codes de langue et de pays. Bientôt, nous verrons des exemples plus complets. Vous trouverez ici plus d'exemples de paramètres régionaux.

Nous pouvons utiliser navigator.language - la langue préférée de l'utilisateur, que nous utilisons comme locale:

Ici, au lieu d'appeler directement une méthode de format , nous pouvons l'affecter en tant que fonction. C'est génial car une fois que nous avons créé une fonction de formatage spécialisée, nous pouvons l'utiliser plusieurs fois.

Juste quelques lignes de code et vous avez une date localisée!

Donc, ensuite, nous allons plonger plus profondément et en savoir plus sur les paramètres régionaux. Si vous n'êtes pas prêt pour cela et que vous ne voulez voir que des démos sympas comme celle-ci dans l'image ci-dessous - allez à la section des exemples ci-dessous!

Plonger plus profondément

Eh bien, cela suffit pour avoir une idée de son fonctionnement, mais les cas d'utilisation réels pourraient devenir beaucoup plus compliqués. Et si nous voulions:

  • afficher notre date en utilisant le calendrier japonais ou persan
  • utiliser des chiffres thaï ou arabes-indiens pour les dates et les nombres
  • utiliser le chinois simplifié
  • Une combinaison de ce qui précède?

Qu'est-ce que Locale?

Afin de travailler avec cette API, nous devons en savoir plus sur les paramètres régionaux. Tout d'abord, donnons une définition.

Une locale est un identifiant qui fait référence à un ensemble de préférences utilisateur telles que:

  • dates et heures
  • nombres et devises
  • noms traduits pour les fuseaux horaires, les langues et les pays
  • unités de mesure
  • ordre de tri (classement)

Un paramètre régional n'est pas sensible à la casse. Ce n'est qu'une convention .

Les paramètres régionaux doivent être une chaîne contenant une balise de langue BCP 47, et toutes les parties sont séparées par des tirets.

Jetons un coup d'œil à l'exemple suivant:

Encore une fois, seulement quatre lignes de code? Jetons un œil au diagramme ci-dessous et examinons chaque partie de notre locale:

Sur cette image, vous pouvez voir que seule la première partie - le code de langue - est requise. Il est peu probable que vous ayez besoin d'une locale comme celle-ci. Mais, c'est un bon exemple de jeter un oeil à chaque partie possible de locale et d'avoir une idée de ce qu'est une locale.

Notre locale contient toutes les parties possibles:

  • zh (code de langue) - langue chinoise
  • Hans (code de script) - écrit en caractères simplifiés
  • CN (code du pays) - tel qu'utilisé en Chine.
  • bauddha (variante) - utilisant un dialecte sanscrit hybride bouddhiste
  • u-nu-hanidec (extension) - en utilisant des nombres décimaux Han

Vous trouverez ci-dessous plus d'exemples de scripts, de variantes et d'extensions.

Codes de script

Ils sont utilisés avec des balises de langue pour indiquer dans quel script une langue est écrite. Par exemple:

Codes de variante

Les variantes représentent un dialecte de langue.

Extensions

Il comprend différents calendriers et systèmes numériques.

Les calendriers ont le préfixe «u-ca-», valeurs possibles (pas toutes incluses):

Les systèmes numériques ont le préfixe «u-nu», valeurs possibles (pas toutes incluses):

L'organisation Iana est responsable de la mise à jour de cette liste.

Négociation locale

La dernière chose que nous devons apprendre sur les paramètres régionaux est de savoir comment ils sont résolus. Nous avons vu cet exemple avant:

const formatter = new Intl.ctor(locales, options);

L' localesargument spécifie une seule locale ou un tableau de locales. L'environnement (navigateur ou Node.js) le compare aux paramètres régionaux dont il dispose et choisit le meilleur.

Il existe deux algorithmes de correspondance:

  • lookup - vérifie du plus spécifique au moins: si zh-Hans-SG n'est pas disponible, obtenez zh-Hans , sinon - zh, else - une locale par défaut.
  • meilleur ajustement (par défaut) - Algorithme amélioré. Si «es-GT» - espagnol pour le Guatemala est demandé, mais pas trouvé, alors au lieu de fournir une solution de remplacement comme «es», le «es-MX» - espagnol au Mexique sera choisi.

Si nous fournissons un tableau de paramètres régionaux, alors le premier match gagne.

Alors, assez de théorie - le moment est venu de pratiquer!

Exemples

Le code des exemples se trouve sur GitHub.

Formatage date / heure

Les paramètres régionaux ne sont pas la seule chose intéressante à propos de l'API Intl. Vous pouvez modifier le résultat de manière souhaitable en utilisant un optionsargument.

Il s'agit d'une mise à jour massive par rapport à l' objet Date !

Contrairement à moment.js, vous ne pouvez pas échanger manuellement une partie de la date comme l'année et le mois. Vous devez utiliser les paramètres régionaux appropriés à la place. Cela peut sembler une limitation , mais cela le rend plus familier pour nos utilisateurs.

Formatage des nombres

En sachant gérer les dates, vous savez gérer les nombres. La seule différence est la liste des options:

Formatage des devises

Pour les devises, nous utilisons le Intl.NumberFormatconstructeur, mais fournissons une liste d'options différente:

Notez que nous ne convertissons pas d'argent ici. Tout ce que nous faisons est de formater le nombre 172630 en utilisant les règles de devise appropriées . Vous trouverez ici la liste des codes de devises.

Formatage des règles plurielles

Cela vous indique quel formulaire s'applique en fonction d'un nombre donné pour une locale spécifique:

Cela peut être très pratique pour formater les nombres ordinaux:

Tri des chaînes

Le tri des chaînes contenant des lettres supplémentaires comme ä en allemand ou en suédois n'est pas ce que vous voulez faire manuellement, simplement parce que l'ordre dépend de la langue. Heureusement pour nous, nous l'avons fait . Et encore une fois, tout ce que nous avons à faire est de fournir une locale requise:Intl.Collator

Conclusion

L'internationalisation est un sujet important et complexe. Mais si vous savez ce qu'est une locale et comment la construire, le reste est super facile à utiliser.

C'est ça!

Si vous avez des questions ou des commentaires, faites-le moi savoir dans les commentaires ci-dessous ou envoyez-moi un ping sur Twitter.

Si cela vous a été utile, veuillez cliquer sur le clap? bouton ci-dessous à quelques reprises pour montrer votre soutien! ⬇⬇ ??

Voici d'autres articles que j'ai écrits:

Comment simplifier votre base de code avec map (), Reduce () et filter () en JavaScript

Quand vous lisez à propos de Array.reduce et à quel point il est cool, le premier et parfois le seul exemple que vous trouvez est la somme de… medium.freecodecamp.org Prêt pour la production Configuration des API REST Node.js utilisant TypeScript, PostgreSQL et Redis.

Il y a un mois, on m'a confié la tâche de créer une API de recherche simple. Tout ce qu'il avait à faire était de récupérer des données de tiers… medium.com

Merci d'avoir lu ❤️