Comment vérifier quel calendrier ou système de numération utilise une locale

Détecter et valider les systèmes de calendrier et les formats de numération pour n'importe quelle locale avec JavaScript

Introduction

Lorsqu'une personne en Thaïlande consulte une date sur votre application web, elle s'attend à voir des dates dans le calendrier bouddhiste, et non dans le calendrier grégorien utilisé dans les pays occidentaux. De même, les locuteurs arabes s'attendent à voir les chiffres affichés comme ١٢٣ au lieu de 123. Différentes cultures utilisent différents systèmes de calendrier et de numération, et JavaScript fournit des outils pour détecter lesquels s'appliquent à des locales spécifiques.

L'API Intl.Locale inclut des propriétés et des méthodes qui révèlent quels systèmes de calendrier et de numération une locale utilise. Ces informations vous aident à formater correctement les dates et les nombres sans coder en dur des hypothèses sur les systèmes que différentes cultures préfèrent.

Ce guide explique comment vérifier les systèmes de calendrier et de numération pour les locales, comprendre ce que signifient les différents systèmes et utiliser ces informations pour formater le contenu de manière appropriée.

Comprendre les systèmes de calendrier

Un système de calendrier est une façon d'organiser le temps en années, mois et jours. Bien que le calendrier grégorien soit répandu, de nombreuses cultures utilisent différents systèmes de calendrier à des fins religieuses, historiques ou culturelles.

Les systèmes de calendrier les plus courants incluent :

  • gregory pour le calendrier grégorien, utilisé dans la plupart des pays occidentaux
  • buddhist pour le calendrier bouddhiste, utilisé en Thaïlande, au Cambodge et au Myanmar
  • islamic pour le calendrier lunaire islamique, utilisé à des fins religieuses dans les pays musulmans
  • hebrew pour le calendrier hébraïque, utilisé en Israël et pour les observances religieuses juives
  • japanese pour le calendrier japonais, qui utilise les noms d'ères impériales
  • chinese pour le calendrier luni-solaire chinois, utilisé pour les fêtes traditionnelles
  • persian pour le calendrier solaire persan, utilisé en Iran et en Afghanistan
  • indian pour le calendrier national indien
  • coptic pour le calendrier copte, utilisé en Égypte par les chrétiens coptes

Différentes régions utilisent différents calendriers par défaut, et certaines régions utilisent couramment plusieurs systèmes de calendrier.

Comprendre les systèmes de numération

Un système de numération est un ensemble de symboles utilisés pour représenter les chiffres. Alors que les pays occidentaux utilisent les chiffres latins (0, 1, 2, 3, 4, 5, 6, 7, 8, 9), d'autres cultures utilisent des symboles différents pour représenter les mêmes valeurs numériques.

Les systèmes de numération courants incluent :

  • latn pour les chiffres latins : 0 1 2 3 4 5 6 7 8 9
  • arab pour les chiffres arabo-indiens : ٠ ١ ٢ ٣ ٤ ٥ ٦ ٧ ٨ ٩
  • arabext pour les chiffres arabo-indiens orientaux : ۰ ۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹
  • deva pour les chiffres devanagari : ० १ २ ३ ४ ५ ६ ७ ८ ९
  • beng pour les chiffres bengalis : ০ ১ ২ ৩ ৪ ৫ ৬ ৭ ৮ ৯
  • thai pour les chiffres thaïs : ๐ ๑ ๒ ๓ ๔ ๕ ๖ ๗ ๘ ๙
  • hanidec pour les nombres décimaux chinois
  • fullwide pour les chiffres pleine chasse utilisés dans la typographie est-asiatique

Tous les systèmes de numération représentent les mêmes valeurs numériques mais utilisent des symboles visuels différents en fonction du système d'écriture de la langue.

Vérifier le calendrier par défaut d'une locale

La méthode getCalendars() renvoie un tableau des systèmes de calendrier couramment utilisés pour une locale, triés par préférence. Le premier élément est le calendrier par défaut.

const locale = new Intl.Locale("th-TH");
const calendars = locale.getCalendars();
console.log(calendars);
// ["buddhist", "gregory"]

Les locales thaïes utilisent par défaut le calendrier bouddhiste mais utilisent également couramment le calendrier grégorien. Cela vous indique que lors du formatage des dates pour les utilisateurs thaïs, le calendrier bouddhiste est préféré.

Différentes locales renvoient différentes préférences de calendrier :

const usLocale = new Intl.Locale("en-US");
console.log(usLocale.getCalendars());
// ["gregory"]

const saLocale = new Intl.Locale("ar-SA");
console.log(saLocale.getCalendars());
// ["gregory", "islamic", "islamic-civil"]

const jpLocale = new Intl.Locale("ja-JP");
console.log(jpLocale.getCalendars());
// ["gregory", "japanese"]

L'anglais américain utilise uniquement le calendrier grégorien. L'arabe d'Arabie saoudite utilise couramment à la fois les calendriers grégorien et islamique. Les locales japonaises utilisent à la fois les calendriers grégorien et impérial japonais.

Le tableau contient tous les calendriers couramment utilisés dans cette locale, vous permettant de proposer plusieurs options de calendrier lorsque cela est approprié.

Vérifier le système de numération par défaut pour une locale

La méthode getNumberingSystems() renvoie un tableau des systèmes de numération couramment utilisés pour une locale. Le premier élément est le système de numération par défaut.

const locale = new Intl.Locale("ar-EG");
const numberingSystems = locale.getNumberingSystems();
console.log(numberingSystems);
// ["arab"]

L'arabe égyptien utilise par défaut les chiffres arabo-indiens. Lors du formatage de nombres pour les utilisateurs arabes égyptiens, utilisez le système de numération arabo-indien sauf si l'utilisateur a spécifié autrement.

Différentes locales utilisent différents systèmes de numération par défaut :

const usLocale = new Intl.Locale("en-US");
console.log(usLocale.getNumberingSystems());
// ["latn"]

const inLocale = new Intl.Locale("hi-IN");
console.log(inLocale.getNumberingSystems());
// ["latn"]

const thLocale = new Intl.Locale("th-TH");
console.log(thLocale.getNumberingSystems());
// ["latn"]

L'anglais américain utilise les chiffres latins. L'hindi en Inde utilise également les chiffres latins par défaut dans les contextes modernes, bien que les chiffres devanagari existent. Le thaï utilise les chiffres latins par défaut dans la plupart des contextes modernes.

De nombreuses locales modernes utilisent par défaut les chiffres latins même lorsque des systèmes de numération traditionnels existent, reflétant les modèles d'usage actuels.

Lire le calendrier actif d'une locale

La propriété calendar renvoie le système de calendrier explicitement défini pour une locale. Si aucun calendrier n'est spécifié, elle renvoie undefined.

const locale = new Intl.Locale("en-US");
console.log(locale.calendar);
// undefined

Une locale de base sans extensions de calendrier renvoie undefined. La locale utilisera son calendrier par défaut lors du formatage des dates.

Vous pouvez créer des locales avec des préférences de calendrier explicites en utilisant les extensions Unicode :

const locale = new Intl.Locale("en-US-u-ca-buddhist");
console.log(locale.calendar);
// "buddhist"

L'extension -u-ca-buddhist spécifie le calendrier bouddhiste. La propriété calendar renvoie "buddhist".

Vous pouvez également définir le calendrier lors de la création de la locale :

const locale = new Intl.Locale("en-US", { calendar: "islamic" });
console.log(locale.calendar);
// "islamic"

L'objet options a la priorité sur tout calendrier spécifié dans la chaîne de locale.

Lire le système de numération actif d'une locale

La propriété numberingSystem renvoie le système de numération explicitement défini pour une locale. Si aucun système de numération n'est spécifié, elle renvoie undefined.

const locale = new Intl.Locale("en-US");
console.log(locale.numberingSystem);
// undefined

Une locale de base sans extensions de système de numération renvoie undefined. La locale utilisera son système de numération par défaut lors du formatage des nombres.

Vous pouvez créer des locales avec des préférences de système de numération explicites :

const locale = new Intl.Locale("en-US-u-nu-arab");
console.log(locale.numberingSystem);
// "arab"

L'extension -u-nu-arab spécifie les chiffres arabo-indiens. La propriété numberingSystem renvoie "arab".

Vous pouvez également définir le système de numération lors de la création de la locale :

const locale = new Intl.Locale("ar-SA", { numberingSystem: "latn" });
console.log(locale.numberingSystem);
// "latn"

Cela crée une locale arabe qui utilise les chiffres latins au lieu des chiffres arabo-indiens par défaut.

Détecter quand une locale a un calendrier explicite

Pour vérifier si une locale a un calendrier explicitement défini plutôt que d'utiliser son calendrier par défaut, vérifiez si la propriété calendar est définie :

function hasExplicitCalendar(localeString) {
  const locale = new Intl.Locale(localeString);
  return locale.calendar !== undefined;
}

console.log(hasExplicitCalendar("en-US"));
// false

console.log(hasExplicitCalendar("en-US-u-ca-buddhist"));
// true

Cette distinction est importante lorsque vous devez déterminer si l'utilisateur a explicitement choisi une préférence de calendrier ou si vous devez utiliser le calendrier par défaut de la locale.

Détecter quand une locale a un système de numération explicite

De même, vérifiez si la propriété numberingSystem est définie pour détecter les préférences de système de numération explicites :

function hasExplicitNumberingSystem(localeString) {
  const locale = new Intl.Locale(localeString);
  return locale.numberingSystem !== undefined;
}

console.log(hasExplicitNumberingSystem("ar-EG"));
// false

console.log(hasExplicitNumberingSystem("ar-EG-u-nu-latn"));
// true

La première locale utilisera le système de numération par défaut pour l'arabe égyptien. La seconde locale demande explicitement les chiffres latins.

Utiliser les informations de calendrier pour formater les dates

Une fois que vous savez quel calendrier utilise une locale, appliquez-le lors du formatage des dates avec Intl.DateTimeFormat :

const date = new Date("2025-03-15");

const gregorianLocale = new Intl.Locale("en-US");
const gregorianFormatter = new Intl.DateTimeFormat(gregorianLocale, {
  year: "numeric",
  month: "long",
  day: "numeric"
});
console.log(gregorianFormatter.format(date));
// "March 15, 2025"

const buddhistLocale = new Intl.Locale("th-TH");
const buddhistFormatter = new Intl.DateTimeFormat(buddhistLocale, {
  year: "numeric",
  month: "long",
  day: "numeric"
});
console.log(buddhistFormatter.format(date));
// "15 มีนาคม 2568"

Le calendrier bouddhiste thaïlandais affiche la même date en tant qu'année 2568, soit 543 ans d'avance sur le calendrier grégorien.

Vous pouvez également remplacer explicitement le calendrier :

const date = new Date("2025-03-15");

const locale = new Intl.Locale("en-US", { calendar: "hebrew" });
const formatter = new Intl.DateTimeFormat(locale, {
  year: "numeric",
  month: "long",
  day: "numeric"
});
console.log(formatter.format(date));
// "15 Adar II 5785"

Cela formate la date dans le calendrier hébraïque, affichant l'année et le mois hébraïques correspondants.

Utiliser les informations de système de numération pour formater les nombres

Appliquez les informations de système de numération lors du formatage des nombres avec Intl.NumberFormat :

const number = 123456;

const latinLocale = new Intl.Locale("ar-EG", { numberingSystem: "latn" });
const latinFormatter = new Intl.NumberFormat(latinLocale);
console.log(latinFormatter.format(number));
// "123,456"

const arabicLocale = new Intl.Locale("ar-EG", { numberingSystem: "arab" });
const arabicFormatter = new Intl.NumberFormat(arabicLocale);
console.log(arabicFormatter.format(number));
// "١٢٣٬٤٥٦"

Le même nombre s'affiche avec différents symboles de chiffres en fonction du système de numération.

Créer un sélecteur de calendrier

Utilisez les informations de calendrier pour créer des interfaces utilisateur permettant aux utilisateurs de choisir leur calendrier préféré :

function getCalendarOptions(localeString) {
  const locale = new Intl.Locale(localeString);
  const calendars = locale.getCalendars();

  return calendars.map(calendar => ({
    value: calendar,
    label: calendar.charAt(0).toUpperCase() + calendar.slice(1)
  }));
}

const options = getCalendarOptions("ar-SA");
console.log(options);
// [
//   { value: "gregory", label: "Gregory" },
//   { value: "islamic", label: "Islamic" },
//   { value: "islamic-civil", label: "Islamic-civil" }
// ]

Cela crée une liste d'options de calendrier appropriées pour les utilisateurs arabophones d'Arabie saoudite, qui utilisent couramment plusieurs calendriers.

Créer un sélecteur de système de numération

Créez des interfaces utilisateur pour les préférences de système de numération :

function getNumberingSystemOptions(localeString) {
  const locale = new Intl.Locale(localeString);
  const systems = locale.getNumberingSystems();

  const labels = {
    latn: "Western (0-9)",
    arab: "Arabic-Indic (٠-٩)",
    arabext: "Eastern Arabic (۰-۹)",
    deva: "Devanagari (०-९)",
    beng: "Bengali (০-৯)"
  };

  return systems.map(system => ({
    value: system,
    label: labels[system] || system
  }));
}

const options = getNumberingSystemOptions("ar-EG");
console.log(options);
// [{ value: "arab", label: "Arabic-Indic (٠-٩)" }]

Cela fournit des libellés clairs pour les options de système de numération, montrant aux utilisateurs à quoi ressemble chaque choix.

Valider la compatibilité du calendrier

Avant d'appliquer un calendrier à une locale, vérifiez que la locale prend en charge ce calendrier :

function supportsCalendar(localeString, calendar) {
  const locale = new Intl.Locale(localeString);
  const supportedCalendars = locale.getCalendars();
  return supportedCalendars.includes(calendar);
}

console.log(supportsCalendar("th-TH", "buddhist"));
// true

console.log(supportsCalendar("en-US", "buddhist"));
// false

Les locales thaïlandaises prennent en charge le calendrier bouddhiste, mais les locales anglaises américaines ne l'utilisent pas couramment.

Valider la compatibilité du système de numération

Vérifiez si une locale prend en charge un système de numération spécifique :

function supportsNumberingSystem(localeString, numberingSystem) {
  const locale = new Intl.Locale(localeString);
  const supportedSystems = locale.getNumberingSystems();
  return supportedSystems.includes(numberingSystem);
}

console.log(supportsNumberingSystem("ar-EG", "arab"));
// true

console.log(supportsNumberingSystem("en-US", "arab"));
// false

L'arabe égyptien prend en charge les chiffres arabo-indiens, mais l'anglais américain ne les utilise pas.

Déterminer le calendrier effectif pour le formatage

Lors du formatage des dates, déterminez quel calendrier sera réellement utilisé :

function getEffectiveCalendar(localeString) {
  const locale = new Intl.Locale(localeString);

  if (locale.calendar) {
    return locale.calendar;
  }

  const defaultCalendars = locale.getCalendars();
  return defaultCalendars[0];
}

console.log(getEffectiveCalendar("th-TH"));
// "buddhist"

console.log(getEffectiveCalendar("en-US-u-ca-islamic"));
// "islamic"

Cette fonction renvoie le calendrier explicitement défini s'il existe, sinon elle renvoie le calendrier par défaut pour la locale.

Déterminer le système de numération effectif pour le formatage

Déterminez quel système de numération sera utilisé lors du formatage des nombres :

function getEffectiveNumberingSystem(localeString) {
  const locale = new Intl.Locale(localeString);

  if (locale.numberingSystem) {
    return locale.numberingSystem;
  }

  const defaultSystems = locale.getNumberingSystems();
  return defaultSystems[0];
}

console.log(getEffectiveNumberingSystem("ar-EG"));
// "arab"

console.log(getEffectiveNumberingSystem("ar-EG-u-nu-latn"));
// "latn"

Cela renvoie le système de numération explicitement défini s'il est présent, sinon celui par défaut pour la locale.

Stocker les préférences de calendrier de l'utilisateur

Lorsque les utilisateurs sélectionnent une préférence de calendrier, stockez-la sous forme de chaîne de locale avec des extensions :

function setUserCalendarPreference(baseLocale, calendar) {
  const locale = new Intl.Locale(baseLocale, { calendar });
  return locale.toString();
}

const preference = setUserCalendarPreference("en-US", "buddhist");
console.log(preference);
// "en-US-u-ca-buddhist"

Cela crée une chaîne de locale complète qui préserve la préférence de calendrier. Stockez cette chaîne dans les paramètres utilisateur ou les cookies.

Stocker les préférences de système de numération de l'utilisateur

Stockez les préférences de système de numération de la même manière :

function setUserNumberingPreference(baseLocale, numberingSystem) {
  const locale = new Intl.Locale(baseLocale, { numberingSystem });
  return locale.toString();
}

const preference = setUserNumberingPreference("ar-SA", "latn");
console.log(preference);
// "ar-SA-u-nu-latn"

La chaîne de locale inclut la préférence de système de numération et peut être utilisée directement avec les API de formatage.

Gérer plusieurs préférences simultanément

Les utilisateurs peuvent avoir à la fois des préférences de calendrier et de système de numération :

function createLocaleWithPreferences(baseLocale, options) {
  const locale = new Intl.Locale(baseLocale, {
    calendar: options.calendar,
    numberingSystem: options.numberingSystem
  });
  return locale.toString();
}

const preference = createLocaleWithPreferences("ar-SA", {
  calendar: "islamic",
  numberingSystem: "latn"
});
console.log(preference);
// "ar-SA-u-ca-islamic-nu-latn"

Cela combine plusieurs préférences de formatage dans une seule chaîne de locale.

Vérifier les options de formatage résolues

Après avoir créé un formateur, vérifiez quel calendrier et système de numération il utilise :

const locale = new Intl.Locale("th-TH");
const formatter = new Intl.DateTimeFormat(locale, {
  year: "numeric",
  month: "long",
  day: "numeric"
});

const options = formatter.resolvedOptions();
console.log(options.calendar);
// "buddhist"
console.log(options.numberingSystem);
// "latn"

La méthode resolvedOptions() indique quel calendrier et système de numération le formateur utilise réellement après résolution des valeurs par défaut et des préférences utilisateur.

Compatibilité des navigateurs

L'API Intl.Locale est prise en charge par tous les navigateurs modernes. Les méthodes getCalendars() et getNumberingSystems() nécessitent des versions récentes de navigateurs. Chrome 99, Firefox 99, Safari 15.4 et Edge 99 prennent en charge ces méthodes. Node.js les prend en charge à partir de la version 18.

Les propriétés calendar et numberingSystem bénéficient d'une compatibilité plus large, disponibles depuis l'introduction de Intl.Locale dans Chrome 74, Firefox 75, Safari 14 et Node.js 12.

Vérifiez la prise en charge de la méthode avant utilisation :

const locale = new Intl.Locale("th-TH");

if (typeof locale.getCalendars === "function") {
  const calendars = locale.getCalendars();
  console.log(calendars);
}

Cela garantit que votre code fonctionne dans les environnements qui prennent en charge Intl.Locale mais ne disposent pas des méthodes plus récentes.

Résumé

JavaScript fournit des outils pour détecter quel calendrier et quels systèmes de numération une locale utilise via l'API Intl.Locale. Ces outils vous aident à formater correctement les dates et les nombres pour différentes cultures sans coder en dur des hypothèses.

Concepts clés :

  • Utilisez getCalendars() pour obtenir un tableau des calendriers couramment utilisés pour une locale
  • Utilisez getNumberingSystems() pour obtenir un tableau des systèmes de numération couramment utilisés pour une locale
  • La propriété calendar renvoie le calendrier explicitement défini ou undefined
  • La propriété numberingSystem renvoie le système de numération explicitement défini ou undefined
  • Différentes locales utilisent par défaut différents calendriers et systèmes de numération
  • Appliquez les informations de calendrier et de système de numération lors de la création de formateurs
  • Stockez les préférences utilisateur sous forme de chaînes de locale avec des extensions Unicode
  • Validez que les locales prennent en charge des calendriers et systèmes de numération spécifiques avant de les appliquer

Utilisez ces méthodes lors de la création de sélecteurs de langue, du stockage des préférences utilisateur, de la validation des options de formatage ou de la création d'applications internationalisées qui respectent les conventions culturelles pour les dates et les nombres.