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 devez souvent créer des éléments d'interface utilisateur tels que des listes déroulantes, des sélecteurs ou des formulaires permettant aux utilisateurs de choisir des calendriers, des devises, des fuseaux horaires ou d'autres options de localisation. Pour créer ces composants, vous devez savoir quelles valeurs l'environnement JavaScript prend en charge.
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, devises, fuseaux horaires, systèmes de numération, types de classement et 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 le type de valeurs à renvoyer. Elle renvoie un tableau de chaînes représentant les valeurs prises en charge pour ce type.
const calendars = Intl.supportedValuesOf("calendar");
console.log(calendars);
// Output: ["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 aucune valeur en double et utilise des identifiants canoniques conformes aux normes Unicode.
Si vous passez une clé invalide, la méthode lève une RangeError :
try {
Intl.supportedValuesOf("invalid");
} catch (error) {
console.error(error.name);
// Output: "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 de nombreux 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);
// Output: ["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 incluent :
"buddhist"pour le calendrier bouddhiste thaïlandais"chinese"pour le calendrier chinois traditionnel"islamic"pour le calendrier islamique hégirien"hebrew"pour le calendrier hébraïque"japanese"pour le calendrier japonais avec les noms d'ère
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));
// Output: "October 15, 2025"
console.log(islamicFormat.format(date));
// Output: "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 un menu déroulant 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 calendrier lisibles par l'homme :
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);
// Creates options like "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);
// Output: typically over 300
console.log(currencies.slice(0, 10));
// Output: ["ADP", "AED", "AFA", "AFN", "ALK", "ALL", "AMD", "ANG", "AOA", "AOK"]
Les codes de devise utilisent trois lettres majuscules. Les exemples courants incluent :
"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));
// Output: "$1,234.56"
console.log(eurFormat.format(amount));
// Output: "€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 utilisateur
La plupart des applications n'ont besoin d'afficher que les devises actuelles et couramment 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);
// Output: ["USD", "EUR", "GBP", "JPY", "CNY", "INR", "CAD", "AUD"]
Cela garantit que vous ne proposez que les devises qui répondent à la fois à vos exigences et sont prises en charge par le navigateur.
Afficher les noms de devises
Lors de la création d'un sélecteur de devises, affichez des noms descriptifs au lieu de 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}`);
});
// Output:
// USD: US Dollar
// EUR: Euro
// GBP: British Pound
// JPY: Japanese Yen
Cela offre une meilleure expérience utilisateur en montrant ce que chaque code représente.
Obtenir les 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 fuseau horaire basés sur la base de données des fuseaux horaires IANA.
La clé "timeZone" renvoie tous les identifiants de fuseau horaire pris en charge par l'environnement JavaScript :
const timeZones = Intl.supportedValuesOf("timeZone");
console.log(timeZones.length);
// Output: typically over 400
console.log(timeZones.slice(0, 10));
// Output: ["Africa/Abidjan", "Africa/Accra", "Africa/Addis_Ababa",
// "Africa/Algiers", "Africa/Asmara", "Africa/Bamako",
// "Africa/Bangui", "Africa/Banjul", "Africa/Bissau", "Africa/Blantyre"]
Les identifiants de fuseau horaire suivent le format Continent/City, comme "America/New_York" ou "Europe/London". Certains identifiants incluent des composants supplémentaires comme "America/Indiana/Indianapolis".
Lors du formatage des dates et 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));
// Output: "October 15, 2025, 8:00 AM EDT"
console.log(tokyoFormat.format(date));
// Output: "October 15, 2025, 9:00 PM JST"
Le même instant dans le temps apparaît comme des heures locales différentes selon le fuseau horaire.
Créer des sélecteurs de fuseau horaire
Les sélecteurs de fuseau horaire doivent présenter des centaines d'options de 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, ce qui facilite la recherche de leur emplacement par les utilisateurs.
Vous pouvez améliorer davantage l'expérience utilisateur en affichant le décalage actuel pour chaque fuseau horaire :
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 horaire entre les zones.
Obtenir les 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 incluent :
"latn"pour les chiffres latins standard (0-9)"arab"pour les chiffres arabo-indiens"thai"pour les chiffres thaïs"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 des formes de chiffres différentes.
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 des règles différentes 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));
// Output: ["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 emojis
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));
// Output: ["a", "ä", "z"]
console.log(words.sort(phoneticCollator.compare));
// Output: ["a", "ä", "z"]
Différents types de collation peuvent produire des ordres de tri différents 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 le formatage des 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));
// Output: ["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));
// Output: "1,000 m"
console.log(kilometerFormat.format(1));
// Output: "1 km"
L'unité détermine quelle abréviation ou quel 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));
// Output: "100 km/h"
Cela crée des unités composées comme les kilomètres par heure ou les miles par gallon.
Créer des interfaces utilisateur dynamiques
Le cas d'usage principal de Intl.supportedValuesOf() est la création 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");
// Calendar selector
const calendarSelect = buildSelector(
"calendar",
Intl.supportedValuesOf("calendar")
);
form.appendChild(createFormGroup("Calendar", calendarSelect));
// Currency selector
const currencies = ["USD", "EUR", "GBP", "JPY", "CNY"];
const currencySelect = buildSelector("currency", currencies);
form.appendChild(createFormGroup("Currency", currencySelect));
// Time zone selector
const timeZones = Intl.supportedValuesOf("timeZone");
const timeZoneSelect = buildSelector("timeZone", timeZones);
form.appendChild(createFormGroup("Time Zone", 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.
Utiliser les 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 permet d'implémenter des stratégies d'amélioration progressive et de repli.
Vérifier 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("Islamic calendar is supported");
} else {
console.log("Islamic calendar is not supported");
}
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"));
// Output: true
console.log(isValueSupported("timeZone", "America/New_York"));
// Output: 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(`Loading polyfill for ${calendar} calendar`);
await import("./calendar-polyfill.js");
}
}
await ensureCalendarSupport("persian");
Cela charge du code supplémentaire uniquement lorsque nécessaire.