Internationalisation en JavaScript

Seules les API standards de JavaScript sont abordées dans cette page.

Locale du navigateur

const preferredLocale = navigator.language;

La liste des locales configurées (expérimental, mais largement supporté) :

const preferredLocales = navigator.languages;
if (preferredLocales) {
    const preferredLocale = preferredLocales[0];
}
Ne marche pas avec IE, mais on s’en fout.

Dates

Le type principal pour manipuler des dates et heures est Date.

Cet objet est universel. Au moment de sa convertion en texte, la locale et le fuseau horaire interviennent.

Pour la conversion en texte, on utilise la classe DateTimeFormat.

let date = new Date(Date.UTC(2000, 11, 31));
let locale = 'fr-FR';
let format = { year: 'numeric', month: '2-digit', day: '2-digit' };

let textContent = new Intl.DateTimeFormat(locale, format).format(date);   // 31/12/2000
let date = new Date(Date.UTC(2000, 11, 31));
let locale = 'en';
let format = { dateStyle: 'medium' };

let textContent = new Intl.DateTimeFormat(locale, format).format(date);   // Dec 31, 2000

Durées

Pour la mise en forme des durées, on utilise la classe RelativeTimeFormat.

Nombres

Pour la conversion de nombres en texte, on utilise la classe NumberFormat.

let number = 1234.567;
let locale = 'fr';

let textContent = new Intl.NumberFormat(locale).format(number);      // 1 234,567
let number = 1234.567;
let locale = 'en';
let format ={ style: 'currency', currency: 'EUR' };

let textContent = new Intl.NumberFormat(locale, format).format(number);    // €1,234.57

Listes

Pour la mise en forme des énumérations, on utilise la classe ListFormat.

let list = ['aaa', 'bbb', 'ccc'];;
let locale = 'en';
let format = { type: 'disjunction' };

let textContent = new Intl.ListFormat(locale, format).format(number);    // aaa, bbb, or ccc

Pluriels

Pour les formes plurielles, on utilise la classe PluralRules. Ses cas d’usage sont moins évidents.

let locale = 'en';

let one = new Intl.PluralRules(locale).select(1);    // one
let one = new Intl.PluralRules(locale).select(2);    // other