Atteignez un public plus large en adaptant votre contenu à n'importe quelle langue ou région avec l'API Intl.

L'API Intl simplifie le formatage et la manipulation du texte, des nombres, des dates et des devises internationalisés. Il vous permet de gérer divers formats de données en fonction des paramètres régionaux.

Cette API résout le défi du formatage des données pour différentes cultures et langues. Il facilite le formatage des nombres avec le symbole monétaire ou les dates appropriés en utilisant le format de date approprié pour une région spécifique.

À l'aide de l'API Intl, vous pouvez créer des applications Web accessibles et faciles à utiliser pour des publics de différentes régions et cultures.

Obtenir les paramètres régionaux d'un utilisateur

Le Constructeurs JavaScript fournis par l'API Intl identifient les paramètres régionaux qu'ils utiliseront pour formater la date, le texte, le nombre, etc., selon un modèle familier. Chaque constructeur prend un lieu Et un options objet comme arguments. À l'aide de ces arguments, le constructeur compare les paramètres régionaux demandés aux paramètres régionaux qu'ils prennent actuellement en charge.

instagram viewer

Pour obtenir les paramètres régionaux d'un utilisateur, vous pouvez utiliser le navigateur.langue propriété. Cette propriété renvoie une chaîne représentant la version linguistique du navigateur.

La valeur de la navigateur.langue La propriété est une balise de langue BCP 47, qui se compose d'un code de langue et, éventuellement, d'un code de région et d'autres sous-balises. Par exemple, "en-US" représente l'anglais tel qu'il est parlé aux États-Unis.

Vous pouvez également utiliser le navigateur.langues pour obtenir un tableau des langues préférées de l'utilisateur, triées par priorité. Le premier élément du tableau représente la préférence de langue principale de l'utilisateur.

Une fois que vous avez obtenu les paramètres régionaux de l'utilisateur, vous pouvez personnaliser l'affichage des dates, heures, nombres et devises de votre application à l'aide de l'outil International API.

Vous pouvez créer un simple Fonction JavaScript pour vous aider à obtenir les paramètres régionaux d'un utilisateur. Voici un extrait de code qui peut vous aider :

constante getUserLocale = () => {
si (navigator.languages ​​&& navigator.languages.length) {
retour navigateur.langues[0];
 }
retour navigateur.langue ;
};
console.log (getUserLocale());

Ce getUserLocale La fonction renvoie le premier élément de la propriété navigator.languages ​​s'il est disponible. Sinon, il revient à la propriété navigator.language, qui représente la langue préférée de l'utilisateur dans les anciens navigateurs.

Formatage des dates pour différents paramètres régionaux

Pour formater les dates à l'aide de la International API, vous pouvez utiliser le Intl. FormatDateHeure() constructeur. Ce constructeur prend deux arguments: une chaîne de paramètres régionaux et un objet d'options.

L'objet options peut contenir des propriétés qui contrôlent le formatage de la date.

Certaines des options couramment utilisées incluent :

  • jour de la semaine: Cette option spécifie le format du jour de la semaine. Vous pouvez le régler soit long (Vendredi), court (vendredi), ou étroit (F).
  • année: Cette option spécifie le format de l'année. Vous pouvez le régler soit numérique (2023) ou 2 chiffres (23).
  • mois: Cette option spécifie le format du mois. Vous pouvez le régler soit numérique (3), 2 chiffres (03), long (Mars), court (mars), ou étroit (M).
  • jour: Cette option spécifie le format du jour. Vous pouvez le régler soit numérique (2) ou 2 chiffres (02).

Voici un exemple qui montre comment formater une date en utilisant le Intl. FormatDateHeure() constructeur:

constante rendez-vous = Date.maintenant()
constante locale = getUserLocale();
constante options = {
 jour de la semaine: "long",
 année: "numérique",
 mois: "long",
 jour: "numérique",
};


constante formateur = nouveauInternational.DateTimeFormat (paramètres régionaux, options) ;
// jour de la semaine, date du mois, année (vendredi 24 mars 2023)
console.log (formatter.format (date));

Ce code configure un objet formateur en transmettant les paramètres régionaux de l'utilisateur à Intl. FormatDateHeure(), ainsi qu'un ensemble d'options. Il utilise ensuite le formateur pour transformer la date actuelle en une chaîne. Le options L'objet contient des propriétés qui contrôlent le formatage de la date.

Formater différents types de nombres

Vous pouvez utiliser le International API pour formater les nombres à l'aide de Intl. Format de nombre() constructeur. Comme Intl. FormatDateHeure(), ce constructeur prend une chaîne locale et un objet options comme arguments.

L'objet options contient des propriétés qui contrôlent la mise en forme du nombre. Ces propriétés varient en fonction des spécifications style du nombre.

Formatage des nombres décimaux et des pourcentages

Vous pouvez formater les nombres sous forme de décimales et de pourcentages à l'aide de Intl. Format de nombre() constructeur en définissant la propriété de style sur décimal pour les décimaux et pour cent pour les pourcentages.

Voici un exemple qui montre comment formater un nombre décimal :

constante nombre = 123456;
constante locale = getUserLocale(); // fr-US
constante options = {
 style: "décimal",
 minimumFractionDigits: 2,
 maximumFractionDigits: 2,
 useGrouping: vrai,
};


constante formateur = nouveauInternational.NumberFormat (paramètres régionaux, options) ;
console.log (formatter.format (num)); // 123,456.00

Le bloc de code ci-dessus formate 123 456 sous forme décimale avec des séparateurs de regroupement (,) et deux décimales.

Voici un exemple qui montre comment formater un pourcentage :

constante nombre = 123456;
constante locale = getUserLocale();
constante options = {
 style: "pour cent",
 useGrouping: vrai,
};


constante formateur = nouveauInternational.NumberFormat (paramètres régionaux, options) ;
console.log (formatter.format (num)); // 12,345,600%

Le bloc de code ci-dessus exprime 123 456 en pourcentage avec des séparateurs de regroupement.

Formatage des devises

Vous pouvez formater les nombres en tant que devises en définissant la propriété de style sur monnaie. Vous devez définir d'autres options à côté, telles que :

  • monnaie: chaîne représentant le code de devise ISO 4217 (tel que "USD", "EUR" ou "JPY") à utiliser pour le formatage. Si vous ne fournissez pas cette option, le formateur choisira un code de devise basé sur les paramètres régionaux de l'utilisateur.
  • deviseAfficher: Cette propriété spécifie comment le navigateur doit afficher la devise. Cela peut être soit symbole (US$ 75), code (USD 75), ou nom (75 dollars américains).

Voici un exemple montrant comment formater une devise :

constante nombre = 123456;
constante locale = getUserLocale(); // fr-US
constante options = {
 style: "monnaie",
 monnaie: "USD",
 deviseAffichage: "code",
};


constante formateur = nouveauInternational.NumberFormat (paramètres régionaux, options) ;
console.log (formatter.format (num)); // 123 456,00 USD

Le bloc de code ci-dessus formate 123 456 en tant que devise (USD).

Unités de formatage

Vous pouvez utiliser le Intl. Format de nombre() constructeur pour formater les nombres avec des unités, telles que la longueur, le volume et la masse. Vous pouvez le faire en réglant le style pour unité. Lorsque vous définissez le style sur unit, vous devez spécifier ces options :

  • unité: cette propriété spécifie l'unité à utiliser pour le formatage, telle que "mètre", "kilogramme", "litre", "seconde", etc.
  • unitéAffichage: Cette propriété spécifie comment le navigateur doit afficher l'unité. Vous pouvez le régler soit long (10 litres), court (10 L), ou étroit (10l).

Voici un exemple montrant comment vous pouvez formater les unités :

constante nombre = 123456;
constante locale = getUserLocale();
constante options = {
 style: "unité",
 unité: "litre",
 unitéAffichage: "long",
};


constante formateur = nouveauInternational.NumberFormat (paramètres régionaux, options) ;
console.log (formatter.format (num)); //123 456 litres

Le bloc de code ci-dessus formate le nombre 123 456 en tant qu'unité en litres.

Alternatives à l'API Intl

L'API Intl fournit un ensemble d'outils puissants et flexibles pour le formatage des dates, des nombres, des devises et des unités dans les applications JavaScript. Il prend en charge de nombreux paramètres régionaux et fournit un moyen cohérent de formater les données dans différentes cultures et langues.

Vous voudrez peut-être utiliser une bibliothèque alternative, comme Luxon ou Day.js, en raison de la prise en charge limitée des navigateurs pour Intl. En fin de compte, le choix entre l'API Intl ou une alternative dépend des exigences et des contraintes spécifiques de votre projet.