Comment obtenir la liste des calendriers, devises et fuseaux horaires pris en charge

Découvrez quelles valeurs d'internationalisation votre environnement JavaScript prend en charge

Introduction

Lors de la création d'applications internationalisées, vous avez souvent besoin de créer des éléments d'interface utilisateur comme des menus déroulants, des sélecteurs ou des formulaires qui permettent aux utilisateurs de choisir des calendriers, des devises, des fuseaux horaires ou d'autres options de localisation. Pour construire ces composants, vous devez connaître les valeurs prises en charge par l'environnement JavaScript.

Plutôt que de maintenir des listes codées en dur qui deviennent obsolètes ou contiennent des valeurs que le navigateur ne prend pas en charge, JavaScript fournit une méthode pour découvrir les valeurs prises en charge à l'exécution. Cela garantit que votre application n'offre que des choix qui fonctionnent correctement dans l'environnement de l'utilisateur.

La méthode Intl.supportedValuesOf() renvoie des listes de valeurs d'internationalisation prises en charge. Vous pouvez interroger cette méthode pour obtenir les calendriers, les devises, les fuseaux horaires, les systèmes de numération, les types de classement et les unités de mesure que l'environnement JavaScript prend en charge.

Ce que renvoie Intl.supportedValuesOf

La méthode Intl.supportedValuesOf() accepte un seul paramètre de type chaîne qui spécifie quel type de valeurs renvoyer. Elle retourne un tableau de chaînes représentant les valeurs prises en charge pour ce type.

const calendars = Intl.supportedValuesOf("calendar");
console.log(calendars);
// Sortie : ["buddhist", "chinese", "coptic", "dangi", ...]

La méthode prend en charge six types de clés différents :

  • "calendar" renvoie les systèmes de calendrier pris en charge
  • "currency" renvoie les codes de devise pris en charge
  • "timeZone" renvoie les identifiants de fuseau horaire pris en charge
  • "numberingSystem" renvoie les systèmes de numération pris en charge
  • "collation" renvoie les types de classement pris en charge
  • "unit" renvoie les unités de mesure prises en charge

Le tableau renvoyé est toujours trié par ordre alphabétique croissant, ne contient pas de valeurs en double et utilise des identifiants canoniques conformes aux normes Unicode.

Si vous passez une clé invalide, la méthode génère une RangeError :

try {
  Intl.supportedValuesOf("invalid");
} catch (error) {
  console.error(error.name);
  // Sortie : "RangeError"
}

Cette erreur indique que vous avez utilisé une clé que la méthode ne reconnaît pas.

Obtenir les calendriers pris en charge

Les systèmes de calendrier définissent comment les dates sont calculées et affichées. Différentes cultures utilisent différents systèmes de calendrier, et JavaScript en prend en charge plusieurs via l'API Intl.

La clé "calendar" renvoie tous les systèmes de calendrier pris en charge par l'environnement JavaScript :

const calendars = Intl.supportedValuesOf("calendar");
console.log(calendars);
// Résultat : ["buddhist", "chinese", "coptic", "dangi", "ethioaa",
//          "ethiopic", "gregory", "hebrew", "indian", "islamic",
//          "islamic-civil", "islamic-rgsa", "islamic-tbla",
//          "islamic-umalqura", "iso8601", "japanese", "persian",
//          "roc"]

Le calendrier le plus courant est "gregory", qui représente le calendrier grégorien utilisé dans la majeure partie du monde. Les autres calendriers comprennent :

  • "buddhist" pour le calendrier bouddhiste thaïlandais
  • "chinese" pour le calendrier traditionnel chinois
  • "islamic" pour le calendrier islamique Hijri
  • "hebrew" pour le calendrier hébraïque
  • "japanese" pour le calendrier japonais avec noms d'ères

Chaque calendrier affecte la façon dont les dates sont formatées et calculées. Lorsque vous utilisez Intl.DateTimeFormat avec un calendrier spécifique, les dates apparaissent selon les règles de ce calendrier :

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

const gregorianFormat = new Intl.DateTimeFormat("en-US", {
  calendar: "gregory",
  year: "numeric",
  month: "long",
  day: "numeric"
});

const islamicFormat = new Intl.DateTimeFormat("en-US", {
  calendar: "islamic",
  year: "numeric",
  month: "long",
  day: "numeric"
});

console.log(gregorianFormat.format(date));
// Résultat : "October 15, 2025"

console.log(islamicFormat.format(date));
// Résultat : "Rabi' II 13, 1447 AH"

La même date JavaScript apparaît différemment lorsqu'elle est formatée avec différents calendriers.

Utiliser les calendriers pris en charge pour créer des sélecteurs

Lors de la création d'un sélecteur de calendrier dans votre interface utilisateur, interrogez les calendriers pris en charge et créez des options pour chacun d'eux :

const calendars = Intl.supportedValuesOf("calendar");

const select = document.createElement("select");

calendars.forEach(calendar => {
  const option = document.createElement("option");
  option.value = calendar;
  option.textContent = calendar;
  select.appendChild(option);
});

document.body.appendChild(select);

Cela crée une liste déroulante contenant uniquement les calendriers qui fonctionnent dans l'environnement actuel.

Vous pouvez améliorer ce sélecteur en utilisant Intl.DisplayNames pour afficher des noms de calendriers lisibles par l'humain :

const calendars = Intl.supportedValuesOf("calendar");
const displayNames = new Intl.DisplayNames(["en-US"], { type: "calendar" });

calendars.forEach(calendar => {
  const option = document.createElement("option");
  option.value = calendar;
  option.textContent = displayNames.of(calendar);
  // Crée des options comme "Gregorian Calendar", "Islamic Calendar", etc.
});

Cela affiche des noms descriptifs au lieu d'identifiants techniques.

Obtenir les devises prises en charge

Les codes de devise identifient les systèmes monétaires utilisés dans le monde entier. JavaScript prend en charge des centaines de codes de devise basés sur la norme ISO 4217.

La clé "currency" renvoie tous les codes de devise pris en charge par l'environnement JavaScript :

const currencies = Intl.supportedValuesOf("currency");
console.log(currencies.length);
// Résultat : généralement plus de 300

console.log(currencies.slice(0, 10));
// Résultat : ["ADP", "AED", "AFA", "AFN", "ALK", "ALL", "AMD", "ANG", "AOA", "AOK"]

Les codes de devise utilisent trois lettres majuscules. Voici des exemples courants :

  • "USD" pour le dollar américain
  • "EUR" pour l'euro
  • "GBP" pour la livre sterling britannique
  • "JPY" pour le yen japonais
  • "CNY" pour le yuan chinois

La liste comprend à la fois les devises actuelles et certaines devises historiques qui ne sont plus en circulation.

Lors du formatage des valeurs monétaires, vous devez spécifier quelle devise utiliser :

const amount = 1234.56;

const usdFormat = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD"
});

const eurFormat = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "EUR"
});

console.log(usdFormat.format(amount));
// Résultat : "$1,234.56"

console.log(eurFormat.format(amount));
// Résultat : "€1,234.56"

Le code de devise détermine quel symbole apparaît et comment la valeur est formatée.

Filtrer les devises pour la sélection par l'utilisateur

La plupart des applications n'ont besoin d'afficher que les devises courantes et communément utilisées. Vous pouvez filtrer la liste des devises prises en charge pour n'inclure que celles pertinentes pour vos utilisateurs :

const allCurrencies = Intl.supportedValuesOf("currency");
const commonCurrencies = ["USD", "EUR", "GBP", "JPY", "CNY", "INR", "CAD", "AUD"];

const availableCurrencies = commonCurrencies.filter(currency =>
  allCurrencies.includes(currency)
);

console.log(availableCurrencies);
// Résultat : ["USD", "EUR", "GBP", "JPY", "CNY", "INR", "CAD", "AUD"]

Cela garantit que vous ne proposez que des devises qui répondent à vos exigences et sont prises en charge par le navigateur.

Affichage des noms de devises

Lors de la création d'un sélecteur de devises, affichez des noms descriptifs au lieu des codes à trois lettres :

const currencies = ["USD", "EUR", "GBP", "JPY"];
const displayNames = new Intl.DisplayNames(["en-US"], { type: "currency" });

currencies.forEach(currency => {
  const name = displayNames.of(currency);
  console.log(`${currency}: ${name}`);
});
// Résultat :
// USD: US Dollar
// EUR: Euro
// GBP: British Pound
// JPY: Japanese Yen

Cela offre une meilleure expérience utilisateur en montrant ce que représente chaque code.

Obtention des fuseaux horaires pris en charge

Les fuseaux horaires représentent des régions géographiques qui observent la même heure standard. JavaScript prend en charge des centaines d'identifiants de fuseaux horaires basés sur la base de données de fuseaux horaires IANA.

La clé "timeZone" renvoie tous les identifiants de fuseaux horaires pris en charge par l'environnement JavaScript :

const timeZones = Intl.supportedValuesOf("timeZone");
console.log(timeZones.length);
// Résultat : généralement plus de 400

console.log(timeZones.slice(0, 10));
// Résultat : ["Africa/Abidjan", "Africa/Accra", "Africa/Addis_Ababa",
//          "Africa/Algiers", "Africa/Asmara", "Africa/Bamako",
//          "Africa/Bangui", "Africa/Banjul", "Africa/Bissau", "Africa/Blantyre"]

Les identifiants de fuseaux horaires suivent le format Continent/Ville, comme "America/New_York" ou "Europe/London". Certains identifiants incluent des composants supplémentaires comme "America/Indiana/Indianapolis".

Lors du formatage des dates et des heures, le fuseau horaire affecte l'heure locale qui apparaît :

const date = new Date("2025-10-15T12:00:00Z");

const newYorkFormat = new Intl.DateTimeFormat("en-US", {
  timeZone: "America/New_York",
  year: "numeric",
  month: "long",
  day: "numeric",
  hour: "numeric",
  minute: "numeric",
  timeZoneName: "short"
});

const tokyoFormat = new Intl.DateTimeFormat("en-US", {
  timeZone: "Asia/Tokyo",
  year: "numeric",
  month: "long",
  day: "numeric",
  hour: "numeric",
  minute: "numeric",
  timeZoneName: "short"
});

console.log(newYorkFormat.format(date));
// Résultat : "October 15, 2025, 8:00 AM EDT"

console.log(tokyoFormat.format(date));
// Résultat : "October 15, 2025, 9:00 PM JST"

Le même moment dans le temps apparaît comme différentes heures locales selon le fuseau horaire.

Construction de sélecteurs de fuseaux horaires

Les sélecteurs de fuseaux horaires doivent présenter des centaines d'options d'une manière compréhensible pour les utilisateurs. Regroupez les fuseaux horaires par région pour faciliter la sélection :

const timeZones = Intl.supportedValuesOf("timeZone");

const grouped = timeZones.reduce((groups, tz) => {
  const [region] = tz.split("/");
  if (!groups[region]) {
    groups[region] = [];
  }
  groups[region].push(tz);
  return groups;
}, {});

console.log(Object.keys(grouped));
// Output: ["Africa", "America", "Antarctica", "Arctic", "Asia",
//          "Atlantic", "Australia", "Europe", "Indian", "Pacific", "Etc"]

Cette organisation regroupe les fuseaux horaires par continent, facilitant ainsi la recherche de leur emplacement par les utilisateurs.

Vous pouvez améliorer davantage l'expérience utilisateur en affichant le décalage horaire actuel pour chaque fuseau :

function getTimeZoneOffset(timeZone) {
  const date = new Date();
  const formatter = new Intl.DateTimeFormat("en-US", {
    timeZone,
    timeZoneName: "shortOffset"
  });
  const parts = formatter.formatToParts(date);
  const offsetPart = parts.find(part => part.type === "timeZoneName");
  return offsetPart ? offsetPart.value : "";
}

const timeZones = ["America/New_York", "Europe/London", "Asia/Tokyo"];

timeZones.forEach(tz => {
  const offset = getTimeZoneOffset(tz);
  console.log(`${tz}: ${offset}`);
});
// Output:
// America/New_York: GMT-4
// Europe/London: GMT+1
// Asia/Tokyo: GMT+9

L'affichage des décalages aide les utilisateurs à comprendre la différence de temps entre les zones.

Obtention des systèmes de numération pris en charge

Les systèmes de numération définissent comment les chiffres sont affichés. Bien que la plupart des applications utilisent les chiffres arabes standard (0-9), de nombreuses langues ont leurs propres systèmes de numération traditionnels.

La clé "numberingSystem" renvoie tous les systèmes de numération pris en charge par l'environnement JavaScript :

const numberingSystems = Intl.supportedValuesOf("numberingSystem");
console.log(numberingSystems.slice(0, 10));
// Output: ["adlm", "ahom", "arab", "arabext", "armn", "armnlow",
//          "bali", "beng", "bhks", "brah"]

Les systèmes de numération courants comprennent :

  • "latn" pour les chiffres latins standard (0-9)
  • "arab" pour les chiffres arabo-indiens
  • "thai" pour les chiffres thaïlandais
  • "deva" pour les chiffres devanagari utilisés en hindi

Différents systèmes de numération affichent le même nombre différemment :

const number = 12345;

const latinFormat = new Intl.NumberFormat("en-US", {
  numberingSystem: "latn"
});

const arabFormat = new Intl.NumberFormat("en-US", {
  numberingSystem: "arab"
});

const thaiFormat = new Intl.NumberFormat("en-US", {
  numberingSystem: "thai"
});

console.log(latinFormat.format(number));
// Output: "12,345"

console.log(arabFormat.format(number));
// Output: "١٢٬٣٤٥"

console.log(thaiFormat.format(number));
// Output: "๑๒,๓๔๕"

La même valeur numérique apparaît avec différentes formes de chiffres.

Obtenir les types de collation pris en charge

Les types de collation définissent comment les chaînes sont triées et comparées. Différentes langues ont différentes règles pour l'ordre alphabétique.

La clé "collation" renvoie tous les types de collation pris en charge par l'environnement JavaScript :

const collations = Intl.supportedValuesOf("collation");
console.log(collations.slice(0, 10));
// Résultat : ["big5han", "compat", "dict", "direct", "ducet", "emoji",
//          "eor", "gb2312", "phonebk", "phonetic"]

Les types de collation courants incluent :

  • "standard" pour la collation par défaut de chaque langue
  • "phonetic" pour l'ordre phonétique
  • "pinyin" pour l'ordre pinyin chinois
  • "emoji" pour le tri des emoji

La collation affecte la façon dont les tableaux de chaînes sont triés :

const words = ["ä", "z", "a"];

const standardCollator = new Intl.Collator("de-DE", {
  collation: "standard"
});

const phoneticCollator = new Intl.Collator("de-DE", {
  collation: "phonetic"
});

console.log(words.sort(standardCollator.compare));
// Résultat : ["a", "ä", "z"]

console.log(words.sort(phoneticCollator.compare));
// Résultat : ["a", "ä", "z"]

Différents types de collation peuvent produire différents ordres de tri pour la même entrée.

Obtenir les unités prises en charge

Les identifiants d'unité représentent des unités de mesure comme les mètres, les gallons ou les degrés Celsius. JavaScript prend en charge de nombreux types d'unités pour formater les mesures.

La clé "unit" renvoie tous les identifiants d'unité pris en charge par l'environnement JavaScript :

const units = Intl.supportedValuesOf("unit");
console.log(units.slice(0, 10));
// Résultat : ["acre", "bit", "byte", "celsius", "centimeter", "day",
//          "degree", "fahrenheit", "fluid-ounce", "foot"]

Les unités courantes incluent :

  • Longueur : "meter", "kilometer", "mile", "foot"
  • Poids : "gram", "kilogram", "pound", "ounce"
  • Température : "celsius", "fahrenheit"
  • Volume : "liter", "gallon"
  • Numérique : "byte", "kilobyte", "megabyte"

Lors du formatage des mesures, spécifiez l'unité à utiliser :

const distance = 1000;

const meterFormat = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "meter"
});

const kilometerFormat = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer"
});

console.log(meterFormat.format(distance));
// Résultat : "1,000 m"

console.log(kilometerFormat.format(1));
// Résultat : "1 km"

L'unité détermine quelle abréviation ou symbole apparaît avec le nombre.

Vous pouvez combiner des unités en utilisant le format "unit1-per-unit2" :

const speed = 100;

const speedFormat = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer-per-hour"
});

console.log(speedFormat.format(speed));
// Résultat : "100 km/h"

Cela crée des unités composées comme les kilomètres par heure ou les miles par gallon.

Construction d'interfaces utilisateur dynamiques

Le cas d'utilisation principal de Intl.supportedValuesOf() est la construction d'interfaces utilisateur qui s'adaptent à l'environnement JavaScript actuel. Plutôt que de coder en dur les options, interrogez les valeurs prises en charge au moment de l'exécution.

Cet exemple crée un formulaire de paramètres où les utilisateurs peuvent choisir leur calendrier, devise et fuseau horaire préférés :

function buildSettingsForm() {
  const form = document.createElement("form");

  // Sélecteur de calendrier
  const calendarSelect = buildSelector(
    "calendar",
    Intl.supportedValuesOf("calendar")
  );
  form.appendChild(createFormGroup("Calendrier", calendarSelect));

  // Sélecteur de devise
  const currencies = ["USD", "EUR", "GBP", "JPY", "CNY"];
  const currencySelect = buildSelector("currency", currencies);
  form.appendChild(createFormGroup("Devise", currencySelect));

  // Sélecteur de fuseau horaire
  const timeZones = Intl.supportedValuesOf("timeZone");
  const timeZoneSelect = buildSelector("timeZone", timeZones);
  form.appendChild(createFormGroup("Fuseau horaire", timeZoneSelect));

  return form;
}

function buildSelector(name, values) {
  const select = document.createElement("select");
  select.name = name;

  values.forEach(value => {
    const option = document.createElement("option");
    option.value = value;
    option.textContent = value;
    select.appendChild(option);
  });

  return select;
}

function createFormGroup(label, input) {
  const group = document.createElement("div");
  const labelElement = document.createElement("label");
  labelElement.textContent = label;
  group.appendChild(labelElement);
  group.appendChild(input);
  return group;
}

document.body.appendChild(buildSettingsForm());

Cela crée une interface de paramètres complète en utilisant uniquement les valeurs prises en charge par le navigateur.

Utilisation des valeurs prises en charge pour la détection de fonctionnalités

Vous pouvez utiliser Intl.supportedValuesOf() pour détecter si des valeurs spécifiques sont prises en charge avant de les utiliser. Cela aide à implémenter des stratégies d'amélioration progressive et de repli.

Vérifiez si un calendrier spécifique est pris en charge :

function isCalendarSupported(calendar) {
  const supported = Intl.supportedValuesOf("calendar");
  return supported.includes(calendar);
}

if (isCalendarSupported("islamic")) {
  console.log("Le calendrier islamique est pris en charge");
} else {
  console.log("Le calendrier islamique n'est pas pris en charge");
}

Ce modèle fonctionne pour tout type de valeur :

function isValueSupported(type, value) {
  try {
    const supported = Intl.supportedValuesOf(type);
    return supported.includes(value);
  } catch (error) {
    return false;
  }
}

console.log(isValueSupported("currency", "USD"));
// Sortie : true

console.log(isValueSupported("timeZone", "America/New_York"));
// Sortie : true

Le bloc try-catch gère les environnements où Intl.supportedValuesOf() n'est pas disponible.

Vous pouvez l'utiliser pour le chargement conditionnel de polyfills :

async function ensureCalendarSupport(calendar) {
  if (!isValueSupported("calendar", calendar)) {
    console.log(`Chargement du polyfill pour le calendrier ${calendar}`);
    await import("./calendar-polyfill.js");
  }
}

await ensureCalendarSupport("persian");

Cela charge du code supplémentaire uniquement lorsque nécessaire.