M

MLOG

Français

Débloquez une portée mondiale avec l'API JavaScript Intl. Apprenez les meilleures pratiques d'internationalisation pour formater les dates, nombres, devises, et plus encore, assurant une expérience utilisateur transparente dans le monde entier.

API JavaScript Intl : Meilleures pratiques d'internationalisation pour un public mondial

Dans le monde interconnecté d'aujourd'hui, la création d'applications web qui s'adressent à un public mondial est cruciale. L'API JavaScript Intl fournit des outils puissants pour l'internationalisation (i18n), vous permettant de formater les dates, les nombres, les devises, et plus encore selon les conventions de différentes locales. Cet article explore les meilleures pratiques pour exploiter l'API Intl afin de construire des applications véritablement mondiales.

Comprendre l'internationalisation (i18n) et la localisation (l10n)

Avant de plonger dans les spécificités de l'API Intl, il est important de comprendre la distinction entre internationalisation (i18n) et localisation (l10n). L'i18n est le processus de conception et de développement d'applications de manière à ce qu'elles puissent être facilement adaptées à différentes langues et régions sans nécessiter de modifications d'ingénierie. La l10n, quant à elle, est le processus d'adaptation d'une application internationalisée à une locale spécifique en traduisant le texte et en personnalisant d'autres éléments spécifiques à la locale.

L'API Intl se concentre sur l'aspect i18n, fournissant les mécanismes pour gérer les données sensibles à la locale, tandis que la localisation implique généralement la fourniture de traductions et de configurations spécifiques à la locale.

Composants clés de l'API Intl

L'API Intl se compose de plusieurs objets clés, chacun responsable de la gestion d'aspects spécifiques de l'internationalisation :

Meilleures pratiques pour l'utilisation de l'API Intl

Pour utiliser efficacement l'API Intl et garantir une expérience utilisateur positive pour votre public mondial, considérez les meilleures pratiques suivantes :

1. Spécifier la locale correcte

Le fondement de l'internationalisation est de spécifier la locale correcte. La locale identifie la langue, la région et toutes les variantes spécifiques à utiliser pour le formatage. Vous pouvez obtenir la locale préférée de l'utilisateur à partir de la propriété navigator.language ou de l'en-tête HTTP Accept-Language.

Lors de la création d'objets Intl, vous pouvez spécifier la locale sous forme de chaîne de caractères ou d'un tableau de chaînes de caractères. Si vous fournissez un tableau, l'API tentera de trouver la meilleure locale correspondante parmi les options disponibles.

Exemple :

const locale = navigator.language || 'en-US';
const numberFormat = new Intl.NumberFormat(locale);

Si la locale préférée de l'utilisateur n'est pas disponible, vous pouvez fournir une locale de secours. Par exemple, vous pourriez utiliser 'en-US' par défaut si le navigateur de l'utilisateur signale une locale non prise en charge.

2. Exploiter Intl.DateTimeFormat pour le formatage des dates et heures

Le formatage correct des dates et des heures est crucial pour offrir une expérience localisée. L'objet Intl.DateTimeFormat vous permet de formater les dates et les heures selon les conventions d'une locale spécifique.

Vous pouvez personnaliser le formatage en spécifiant diverses options, telles que le format de l'année, du mois, du jour, de l'heure, des minutes et des secondes. Vous pouvez également spécifier le fuseau horaire pour garantir que les dates et les heures soient affichées correctement pour les utilisateurs de différentes régions du monde.

Exemple :

const locale = 'de-DE'; // Allemand (Allemagne)
const date = new Date();
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  timeZone: 'Europe/Berlin'
};

const dateTimeFormat = new Intl.DateTimeFormat(locale, options);
const formattedDate = dateTimeFormat.format(date); // Sortie : par ex. "22. Mai 2024, 14:30"
console.log(formattedDate);

Cet exemple formate la date et l'heure actuelles selon la locale allemande (Allemagne), y compris l'année, le mois, le jour, l'heure et les minutes. Il spécifie également le fuseau horaire 'Europe/Berlin'.

N'oubliez pas de tenir compte des différents formats de date et d'heure utilisés dans le monde. Par exemple, les États-Unis utilisent MM/JJ/AAAA, tandis que de nombreux autres pays utilisent JJ/MM/AAAA.

3. Utiliser Intl.NumberFormat pour le formatage des nombres, des devises et des pourcentages

L'objet Intl.NumberFormat offre un moyen flexible de formater les nombres, les devises et les pourcentages selon les conventions spécifiques à la locale. Vous pouvez personnaliser le formatage en spécifiant des options telles que la devise, le style (décimal, devise ou pourcentage), le nombre minimum et maximum de chiffres après la virgule, et plus encore.

Exemple (Formatage de devise) :

const locale = 'ja-JP'; // Japonais (Japon)
const amount = 12345.67;
const options = {
  style: 'currency',
  currency: 'JPY'
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedAmount = numberFormat.format(amount); // Sortie : par ex. "￥12,346"
console.log(formattedAmount);

Cet exemple formate le nombre 12345,67 en Yens japonais (JPY). Notez comment le symbole de la devise (￥) et le séparateur de regroupement (,) sont automatiquement ajustés selon la locale japonaise.

Exemple (Formatage de pourcentage) :

const locale = 'ar-EG'; // Arabe (Égypte)
const percentage = 0.75;
const options = {
  style: 'percent',
  minimumFractionDigits: 2
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedPercentage = numberFormat.format(percentage); // Sortie : par ex. "٧٥٫٠٠٪"
console.log(formattedPercentage);

Cet exemple formate le nombre 0,75 en pourcentage en arabe (Égypte). La sortie comprend le signe de pourcentage arabe (٪) et deux décimales.

Considérations importantes pour le formatage des devises :

4. Gérer correctement la pluralisation avec Intl.PluralRules

Les règles de pluralisation varient considérablement selon les langues. Par exemple, l'anglais a des règles simples avec des formes singulières et plurielles, tandis que d'autres langues ont des règles plus complexes basées sur la valeur du nombre. L'objet Intl.PluralRules vous aide à déterminer la forme plurielle correcte pour un nombre et une locale donnés.

Exemple :

const locale = 'ru-RU'; // Russe (Russie)
const pluralRules = new Intl.PluralRules(locale);

function getPluralForm(count) {
  const rule = pluralRules.select(count);
  switch (rule) {
    case 'one': return 'товар'; // tovar (singulier)
    case 'few': return 'товара'; // tovara (peu)
    case 'many': return 'товаров'; // tovarov (beaucoup)
    default: return 'товаров'; // Par défaut à beaucoup
  }
}

const count = 5;
const pluralForm = getPluralForm(count);
console.log(`${count} ${pluralForm}`); // Sortie : "5 товаров"

Cet exemple montre comment utiliser Intl.PluralRules pour obtenir la forme plurielle correcte du mot "товар" (article) en russe. Le russe a différentes formes plurielles selon que le nombre se termine par 1, 2-4 ou 5-9.

5. Formater des listes avec Intl.ListFormat

Lors de la présentation de listes d'éléments, le formatage peut varier selon les locales. L'objet Intl.ListFormat vous permet de formater des listes selon les conventions spécifiques à la locale, y compris l'utilisation de différentes conjonctions (par exemple, "et", "ou") et séparateurs de liste (par exemple, virgules, points-virgules).

Exemple :

const locale = 'es-ES'; // Espagnol (Espagne)
const list = ['manzanas', 'naranjas', 'plátanos'];
const listFormat = new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' });

const formattedList = listFormat.format(list); // Sortie : "manzanas, naranjas y plátanos"
console.log(formattedList);

Cet exemple formate une liste de fruits en espagnol (Espagne), utilisant la conjonction "y" (et) pour relier les deux derniers éléments.

6. Formater des temps relatifs avec Intl.RelativeTimeFormat

Afficher des temps relatifs (par exemple, "hier", "dans 2 heures") offre un moyen convivial de présenter les informations temporelles. L'objet Intl.RelativeTimeFormat vous permet de formater des temps relatifs selon les conventions spécifiques à la locale.

Exemple :

const locale = 'fr-CA'; // Français (Canada)
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });

console.log(rtf.format(-1, 'day')); // Sortie : "hier"
console.log(rtf.format(2, 'day')); // Sortie : "dans 2 jours"

Cet exemple formate des temps relatifs en français (Canada). La sortie affiche "hier" et "dans 2 jours".

L'option `numeric` contrôle la façon dont les nombres sont affichés. `'auto'` affiche des mots relatifs lorsque disponibles (comme "hier"), et des nombres sinon. `'always'` affiche toujours des nombres.

7. Trier des chaînes avec Intl.Collator

La comparaison des chaînes de caractères est sensible à la locale. La manière dont les chaînes sont triées varie selon la langue. Par exemple, en allemand, le caractère "ä" est généralement trié comme "a", tandis qu'en suédois, il est trié après "z". L'objet Intl.Collator vous permet de comparer des chaînes de caractères selon les règles d'une locale spécifique.

Exemple :

const locale = 'de-DE';
const collator = new Intl.Collator(locale);

const strings = ['äpfel', 'birnen', 'bananen', 'aprikosen'];
strings.sort(collator.compare);

console.log(strings); // Sortie : ["äpfel", "aprikosen", "bananen", "birnen"]

Cet exemple trie un tableau de mots allemands en utilisant Intl.Collator. Notez que "äpfel" est trié avant "aprikosen", même si "ä" vient plus tard dans l'alphabet.

8. Gérer les cas limites et les données manquantes

Toutes les locales ne sont pas prises en charge par tous les navigateurs ou environnements. Il est essentiel de gérer les cas limites où une locale n'est pas disponible ou lorsque les données sont manquantes. Envisagez les stratégies suivantes :

9. Tester minutieusement avec différentes locales

Des tests approfondis sont cruciaux pour garantir que votre application internationalisée fonctionne correctement pour toutes les locales prises en charge. Testez votre application avec une variété de locales, y compris des langues qui utilisent différents jeux de caractères, formats de date et d'heure, formats de nombres et règles de pluralisation.

Envisagez d'utiliser des outils de test automatisés pour vérifier que votre application se comporte comme prévu dans différentes locales.

10. Considérer les implications sur les performances

Bien que l'API Intl soit généralement efficace, la création d'objets Intl peut être relativement coûteuse. Pour optimiser les performances, considérez les points suivants :

Au-delà de l'API Intl : Considérations supplémentaires pour l'internationalisation

Bien que l'API Intl fournisse des outils puissants pour le formatage des données, l'internationalisation implique plus que le simple formatage. Considérez les aspects supplémentaires suivants :

Conclusion

L'API JavaScript Intl est un outil inestimable pour la création d'applications web qui s'adressent à un public mondial. En suivant les meilleures pratiques décrites dans cet article, vous pouvez créer des applications qui sont non seulement fonctionnelles, mais aussi culturellement sensibles et conviviales pour les utilisateurs du monde entier. Adoptez la puissance de l'API Intl et libérez le potentiel de votre application sur la scène mondiale. Maîtriser l'API Intl se traduira par une expérience plus inclusive et accessible pour tous vos utilisateurs, quelle que soit leur localisation ou leur langue.