L’objet international JavaScript

Dans cet article, nous explorerons l’objet Intl et ses capacités à prendre en charge les efforts d’internationalisation et de localisation d’une application.

Lors du développement d’applications Web, il est crucial de s’adresser à un public diversifié. En effet, les utilisateurs de différentes régions et cultures ont des exigences linguistiques et des préférences de formatage uniques.

JavaScript fournit un outil puissant appelé International objet qui simplifie la gestion des fonctionnalités spécifiques au langage. Cela inclut le formatage des dates, des nombres, des devises et même la gestion des données spécifiques aux paramètres régionaux.

Dans cet article, nous explorerons l’objet Intl et ses capacités à prendre en charge les efforts d’internationalisation et de localisation d’une application.

Travailler avec des dates

Le formatage des dates est une exigence courante lors du développement de demandes internationales. Le Intl l’objet offre le Intl.DateTimeFormat() constructeur, qui nous permet de formater les dates en fonction de paramètres régionaux spécifiques. Prenons un exemple en créant d’abord un nouveau Date objet qui représente la date actuelle.

const date = new Date();

Supposons que nous voulions que la date actuelle soit formatée dans un certain format tel que June 30, 2023. Ce format de date implique que nous souhaitons que la partie jour et année de la date soit au format numérique tandis que la partie mois doit être au format long.

const date = new Date();
const options = { year: "numeric", month: "long", day: "numeric" };

Pour obtenir la sortie de date que nous recherchons, nous pouvons créer une instance de Intl.DateTimeFormat() avec les paramètres régionaux définis sur 'en-US' et transmettez les options que nous avons spécifiées.

const date = new Date();
const options = { year: "numeric", month: "long", day: "numeric" };
const formattedDate = new Intl.DateTimeFormat("en-US", options);

Une fois notre constructeur établi, nous pouvons alors utiliser le .format() fonction pour formater la date en conséquence.

const date = new Date();
const options = { year: "numeric", month: "long", day: "numeric" };
const formattedDate = new Intl.DateTimeFormat("en-US", options).format(date);

console.log(formattedDate);

Travailler avec des nombres

Le Intl L’objet facilite également le formatage des nombres en fonction des conventions spécifiques aux paramètres régionaux. Par exemple, différents pays utilisent des séparateurs décimaux, des séparateurs de milliers et des symboles monétaires distincts. Le Intl.NumberFormat() Le constructeur nous permet de formater les nombres selon ces conventions sans que nous ayons à écrire de code de formatage personnalisé.

Explorons un exemple pour mieux comprendre cela. Supposons que nous ayons un nombre comme celui-ci :

const number = 1004580.89;

Le nombre ci-dessus peut être compris comme étant un million quatre mille cinq cent quatre-vingt virgule quatre-vingt-neuf. Aux États-Unis, ce numéro serait au format :

US Formatting = 1,004,580.89

Cependant, un pays comme l’Allemagne utilise la virgule (,) et le point (.) de la manière opposée. En Allemagne, le numéro serait plutôt formaté comme suit :

Germany Formatting = 1.004.580,89

C’est là que le Intl.NumberFormat() le constructeur est utile. Nous pouvons utiliser le constructeur pour définir une locale comme de-DE ce qui correspond aux conventions de formatage utilisées en Allemagne. Lorsque le constructeur est utilisé, nous pouvons alors exploiter le format() fonction pour formater le numéro de manière appropriée.

const number = 1004580.89;
const formattedNumberDE = new Intl.NumberFormat("de-DE").format(number);
const formattedNumberUS = new Intl.NumberFormat("en-US").format(number);

console.log(formattedNumberDE); 
console.log(formattedNumberUS); 

Travailler avec des devises

Le Intl L’objet simplifie également le formatage de la devise en fournissant le Intl.NumberFormat() constructeur avec des options supplémentaires pour gérer le formatage spécifique à la devise. Prenons l’exemple suivant :

const price = 42.99;
const currency = "USD";

const priceFormatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency,
});
const formattedPrice = priceFormatter.format(price);

console.log(formattedPrice);

Dans le code ci-dessus, nous définissons une valeur de prix et spécifions la devise comme USD. En utilisant le style option définie sur 'currency' et en passant le currency variable, nous formatons le prix selon les conventions monétaires des États-Unis. La résultante formattedPrice la chaîne inclut le symbole monétaire ($) et le prix formaté (42.99).

Gestion des fonctionnalités spécifiques à la langue

Le Intl l’objet va au-delà du formatage de la date, du nombre et de la devise. Il offre également des capacités pour gérer des fonctionnalités spécifiques à la langue telles que le tri des chaînes et la gestion de la pluralisation.

Voici un exemple d’utilisation du Intl objet pour trier les chaînes selon les règles de la langue suédoise :

const characters = ["a", "z", "Z", "ä"];
const collator = new Intl.Collator("sv");

const sortedCharacters = characters.sort(collator.compare);

console.log(sortedCharacters);

Conclure

Le Intl L’objet en JavaScript permet aux développeurs de créer des applications Web qui fournissent un formatage précis et culturellement sensible et des fonctionnalités spécifiques au langage. En utilisant le Intl.DateTimeFormat, Intl.NumberFormat,
Intl.Collator et d’autres constructeurs : les développeurs peuvent garantir une expérience utilisateur cohérente dans différents paramètres régionaux et permettre à leurs applications de s’adresser à un public mondial.

Tout aussi important, Intl facilite le développement en fournissant des fonctionnalités intégrées pour le formatage et la localisation spécifiques à une langue. Cela élimine le besoin pour les développeurs d’implémenter manuellement ces fonctionnalités, ce qui permet d’économiser du temps et des efforts.

Dans cet article, nous n’avons qu’effleuré la surface de toutes les différentes fonctionnalités de JavaScript. Intl l’objet fournit. Pour un aperçu plus détaillé de toutes les différentes fonctionnalités, assurez-vous de consulter le Documentation MDN!