L’API Intl simplifie le formatage et la manipulation de textes, de nombres, de dates et de devises internationalisés. Elle vous permet de gérer différents formats de données en fonction des paramètres locaux.
Cette API résout le problème du formatage des données pour différentes cultures et langues. Elle facilite le formatage des nombres avec le symbole monétaire approprié ou des dates en utilisant le format de date approprié pour une région spécifique.
L’API Intl vous permet de créer des applications web accessibles et faciles à utiliser pour des publics de régions et de cultures différentes.
Obtenir la langue d’un utilisateur
Les constructeurs JavaScript fournis par l’API Intl identifient la locale qu’ils utiliseront pour formater la date, le texte, le nombre, etc. en suivant un modèle familier. Chaque constructeur prend un élément locale et un options comme arguments. À l’aide de ces arguments, le constructeur compare les paramètres linguistiques demandés aux paramètres linguistiques actuellement pris en charge.
Pour obtenir la locale d’un utilisateur, vous pouvez utiliser la commande navigator.language propriété. Cette propriété renvoie une chaîne de caractères représentant la version linguistique du navigateur.
La valeur de la propriété navigator.language 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 balises secondaires. Par exemple, « en-US » représente l’anglais tel qu’il est parlé aux États-Unis.
Vous pouvez également utiliser la balise navigator.languages pour obtenir un tableau des langues préférées de l’utilisateur, classées par ordre de priorité. Le premier élément du tableau représente la langue préférée de l’utilisateur.
Une fois que vous avez obtenu les paramètres régionaux de l’utilisateur, vous pouvez personnaliser l’affichage des dates, des heures, des nombres et des devises dans votre application à l’aide de la propriété Intl API.
Vous pouvez créer une fonction JavaScript simple pour vous aider à obtenir les paramètres régionaux d’un utilisateur. Voici un extrait de code qui peut vous aider :
const getUserLocale = () => {
if (navigator.languages && navigator.languages.length) {
return navigator.languages[0];
}
return navigator.language;
};
console.log(getUserLocale());
Cette fonction getUserLocale renvoie le premier élément de la propriété navigator.languages si elle est disponible. Sinon, elle revient à la propriété navigator.language, qui représente la langue préférée de l’utilisateur dans les navigateurs plus anciens.
Formatage des dates pour différentes localisations
Pour formater des dates à l’aide de la fonction Intl vous pouvez utiliser l’API Intl.DateTimeFormat() Constructeur. Ce constructeur prend deux arguments : une chaîne de caractères locale et un objet options.
L’objet options peut contenir des propriétés qui contrôlent le formatage de la date.
Les options les plus couramment utilisées sont les suivantes :
- jour de la semaine: Cette option spécifie le format du jour de la semaine. Vous pouvez choisir l’une des deux valeurs suivantes long (vendredi), court (Fri), ou étroite (F).
- année: Cette option spécifie le format de l’année. Vous pouvez lui donner la valeur suivante numérique (2023) ou 2 chiffres (23).
- mois: Cette option spécifie le format du mois. Vous pouvez lui donner la valeur suivante numérique (3), 2 chiffres (03), long (mars), court (Mar), ou étroite (M).
- jour: Cette option spécifie le format du jour. Vous pouvez choisir l’une des deux valeurs suivantes numérique (2) ou 2 chiffres (02).
Voici un exemple qui montre comment formater une date à l’aide de la fonction Intl.DateTimeFormat() constructeur :
const date = Date.now()
const locale = getUserLocale();
const options = {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
};
const formatter = new Intl.DateTimeFormat(locale, options);
// weekday, month date, year (Friday, March 24, 2023)
console.log(formatter.format(date));
Ce code met en place un objet formateur en passant la locale de l’utilisateur à Intl.DateTimeFormat()ainsi qu’un ensemble d’options. Il utilise ensuite le formateur pour transformer la date actuelle en une chaîne de caractères. La fonction options contient des propriétés qui contrôlent le formatage de la date.
Formatage de différents types de nombres
Vous pouvez utiliser la fonction Intl API pour formater les nombres à l’aide de la fonction Intl.NumberFormat() constructeur. Comme Intl.DateTimeFormat()Ce constructeur prend en argument une chaîne de caractères locale et un objet d’options.
L’objet options contient des propriétés qui contrôlent le formatage du nombre. Ces propriétés varient en fonction de la locale spécifiée. style du numéro.
Formatage des décimales et des pourcentages
Vous pouvez formater les nombres en décimales et en pourcentages à l’aide de Intl.NumberFormat() en définissant la propriété style à décimal pour les décimales et pourcentage pour les pourcentages.
Voici un exemple qui montre comment formater une décimale :
const num = 123456;
const locale = getUserLocale(); // en-US
const options = {
style: "decimal",
minimumFractionDigits: 2,
maximumFractionDigits: 2,
useGrouping: true,
};
const formatter = new Intl.NumberFormat(locale, options);
console.log(formatter.format(num)); // 123,456.00
Le bloc de code ci-dessus formate 123,456 en tant que décimale avec des séparateurs de groupe (,) et deux décimales.
Voici un exemple qui montre comment formater un pourcentage :
const num = 123456;
const locale = getUserLocale();
const options = {
style: "percent",
useGrouping: true,
};
const formatter = new Intl.NumberFormat(locale, options);
console.log(formatter.format(num)); // 12,345,600%
Le bloc de code ci-dessus exprime 123 456 sous forme de 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 devise. Vous devez définir d’autres options en parallèle, telles que :
- monnaie: Une 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 la locale de l’utilisateur.
- currencyDisplay: Cette propriété indique comment le navigateur doit afficher la devise. Elle peut être symbole (75 USD), code (75 USD), ou nom (75 dollars US).
Voici un exemple montrant comment vous pouvez formater les devises :
const num = 123456;
const locale = getUserLocale(); // en-US
const options = {
style: "currency",
currency: "USD",
currencyDisplay: "code",
};
const formatter = new Intl.NumberFormat(locale, options);
console.log(formatter.format(num)); // USD 123,456.00
Le bloc de code ci-dessus formate 123,456 en tant que devise (USD).
Formatage des unités
Vous pouvez utiliser la fonction Intl.NumberFormat() Ce constructeur permet de formater les nombres avec des unités, telles que la longueur, le volume et la masse. Vous pouvez le faire en définissant le paramètre style à 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 la mise en forme, telle que « mètre », « kilogramme », « litre », « seconde », etc.
- unitDisplay: Cette propriété indique comment le navigateur doit afficher l’unité. Vous pouvez lui attribuer l’une des valeurs suivantes long (10 litres), court (10 L), ou étroite (10l).
Voici un exemple montrant comment vous pouvez formater les unités :
const num = 123456;
const locale = getUserLocale();
const options = {
style: "unit",
unit: "liter",
unitDisplay: "long",
};
const formatter = new Intl.NumberFormat(locale, options);
console.log(formatter.format(num)); //123,456 liters
Le bloc de code ci-dessus formate le nombre 123,456 comme une unité en litres.
Alternatives à l’API Intl
L’API Intl fournit un ensemble d’outils puissants et flexibles pour formater les dates, les nombres, les devises et les unités dans les applications JavaScript. Elle prend en charge de nombreux paramètres locaux et offre un moyen cohérent de formater les données dans différentes cultures et langues.
Il se peut que vous souhaitiez utiliser une bibliothèque alternative, comme Luxon ou Day.js, en raison de la prise en charge limitée d’Intl par les navigateurs. En fin de compte, le choix entre l’API Intl et une alternative dépend des exigences et des contraintes spécifiques de votre projet.