So erhalten Sie eine Liste der unterstützten Kalender, Währungen und Zeitzonen
Entdecken Sie, welche Internationalisierungswerte Ihre JavaScript-Umgebung unterstützt
Einführung
Beim Erstellen internationalisierter Anwendungen müssen Sie häufig Benutzeroberflächenelemente wie Dropdowns, Selektoren oder Formulare erstellen, mit denen Benutzer Kalender, Währungen, Zeitzonen oder andere Lokalisierungsoptionen auswählen können. Um diese Komponenten zu erstellen, müssen Sie wissen, welche Werte die JavaScript-Umgebung unterstützt.
Anstatt hartcodierte Listen zu pflegen, die veraltet sind oder Werte enthalten, die der Browser nicht unterstützt, bietet JavaScript eine Methode, um unterstützte Werte zur Laufzeit zu ermitteln. Dadurch wird sichergestellt, dass Ihre Anwendung nur Auswahlmöglichkeiten anbietet, die in der Umgebung des Benutzers korrekt funktionieren.
Die Methode Intl.supportedValuesOf() gibt Listen unterstützter Internationalisierungswerte zurück. Sie können diese Methode abfragen, um Kalender, Währungen, Zeitzonen, Zahlensysteme, Sortiertypen und Maßeinheiten zu erhalten, die die JavaScript-Umgebung unterstützt.
Was Intl.supportedValuesOf zurückgibt
Die Methode Intl.supportedValuesOf() akzeptiert einen einzelnen String-Parameter, der angibt, welcher Typ von Werten zurückgegeben werden soll. Sie gibt ein Array von Strings zurück, die die unterstützten Werte für diesen Typ darstellen.
const calendars = Intl.supportedValuesOf("calendar");
console.log(calendars);
// Output: ["buddhist", "chinese", "coptic", "dangi", ...]
Die Methode unterstützt sechs verschiedene Schlüsseltypen:
"calendar"gibt unterstützte Kalendersysteme zurück"currency"gibt unterstützte Währungscodes zurück"timeZone"gibt unterstützte Zeitzonenbezeichner zurück"numberingSystem"gibt unterstützte Zahlensysteme zurück"collation"gibt unterstützte Sortiertypen zurück"unit"gibt unterstützte Maßeinheiten zurück
Das zurückgegebene Array ist immer in aufsteigender alphabetischer Reihenfolge sortiert, enthält keine doppelten Werte und verwendet kanonische Bezeichner gemäß Unicode-Standards.
Wenn Sie einen ungültigen Schlüssel übergeben, löst die Methode einen RangeError aus:
try {
Intl.supportedValuesOf("invalid");
} catch (error) {
console.error(error.name);
// Output: "RangeError"
}
Dieser Fehler zeigt an, dass Sie einen Schlüssel verwendet haben, den die Methode nicht erkennt.
Unterstützte Kalender abrufen
Kalendersysteme definieren, wie Daten berechnet und angezeigt werden. Verschiedene Kulturen verwenden unterschiedliche Kalendersysteme, und JavaScript unterstützt viele davon über die Intl-API.
Der "calendar"-Schlüssel gibt alle von der JavaScript-Umgebung unterstützten Kalendersysteme zurück:
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"]
Der gebräuchlichste Kalender ist "gregory", der den gregorianischen Kalender repräsentiert, der in den meisten Teilen der Welt verwendet wird. Weitere Kalender umfassen:
"buddhist"für den thailändischen buddhistischen Kalender"chinese"für den traditionellen chinesischen Kalender"islamic"für den islamischen Hijri-Kalender"hebrew"für den hebräischen Kalender"japanese"für den japanischen Kalender mit Ära-Namen
Jeder Kalender beeinflusst, wie Daten formatiert und berechnet werden. Wenn Sie Intl.DateTimeFormat mit einem bestimmten Kalender verwenden, werden Daten gemäß den Regeln dieses Kalenders angezeigt:
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"
Dasselbe JavaScript-Datum wird unterschiedlich angezeigt, wenn es mit verschiedenen Kalendern formatiert wird.
Unterstützte Kalender zum Erstellen von Selektoren verwenden
Beim Erstellen eines Kalender-Selektors in Ihrer Benutzeroberfläche fragen Sie die unterstützten Kalender ab und erstellen für jeden eine Option:
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);
Dies erstellt ein Dropdown-Menü, das nur die Kalender enthält, die in der aktuellen Umgebung funktionieren.
Sie können diesen Selektor verbessern, indem Sie Intl.DisplayNames verwenden, um lesbare Kalendernamen anzuzeigen:
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.
});
Dies zeigt beschreibende Namen anstelle von technischen Bezeichnern an.
Unterstützte Währungen abrufen
Währungscodes identifizieren weltweit verwendete Währungssysteme. JavaScript unterstützt Hunderte von Währungscodes basierend auf dem ISO 4217-Standard.
Der "currency"-Schlüssel gibt alle von der JavaScript-Umgebung unterstützten Währungscodes zurück:
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"]
Währungscodes verwenden drei Großbuchstaben. Gängige Beispiele sind:
"USD"für US-Dollar"EUR"für Euro"GBP"für Britisches Pfund Sterling"JPY"für Japanischer Yen"CNY"für Chinesischer Yuan
Die Liste enthält sowohl aktuelle Währungen als auch einige historische Währungen, die nicht mehr im Umlauf sind.
Beim Formatieren von Währungswerten müssen Sie angeben, welche Währung verwendet werden soll:
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"
Der Währungscode bestimmt, welches Symbol angezeigt wird und wie der Wert formatiert wird.
Währungen für Benutzerauswahl filtern
Die meisten Anwendungen müssen nur aktuelle, häufig verwendete Währungen anzeigen. Sie können die Liste der unterstützten Währungen filtern, um nur diejenigen einzuschließen, die für Ihre Benutzer relevant sind:
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"]
Dies stellt sicher, dass Sie nur Währungen anbieten, die sowohl Ihre Anforderungen erfüllen als auch vom Browser unterstützt werden.
Währungsnamen anzeigen
Beim Erstellen einer Währungsauswahl zeigen Sie beschreibende Namen anstelle von dreistelligen Codes an:
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
Dies bietet eine bessere Benutzererfahrung, indem angezeigt wird, was jeder Code repräsentiert.
Unterstützte Zeitzonen abrufen
Zeitzonen repräsentieren geografische Regionen, die dieselbe Standardzeit einhalten. JavaScript unterstützt Hunderte von Zeitzonen-Identifikatoren basierend auf der IANA-Zeitzonendatenbank.
Der "timeZone"-Schlüssel gibt alle von der JavaScript-Umgebung unterstützten Zeitzonen-Identifikatoren zurück:
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"]
Zeitzonen-Identifikatoren folgen dem Format Continent/City, wie "America/New_York" oder "Europe/London". Einige Identifikatoren enthalten zusätzliche Komponenten wie "America/Indiana/Indianapolis".
Bei der Formatierung von Datum und Uhrzeit beeinflusst die Zeitzone, welche Ortszeit angezeigt wird:
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"
Derselbe Zeitpunkt erscheint je nach Zeitzone als unterschiedliche Ortszeit.
Zeitzonen-Auswahlfelder erstellen
Zeitzonen-Auswahlfelder müssen Hunderte von Optionen auf eine für Benutzer verständliche Weise darstellen. Gruppieren Sie Zeitzonen nach Region, um die Auswahl zu erleichtern:
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"]
Diese Organisation gruppiert Zeitzonen nach Kontinent und erleichtert es Benutzern, ihren Standort zu finden.
Sie können die Benutzererfahrung weiter verbessern, indem Sie die aktuelle Abweichung für jede Zeitzone anzeigen:
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
Die Anzeige von Abweichungen hilft Benutzern, den Zeitunterschied zwischen Zonen zu verstehen.
Unterstützte Zahlensysteme abrufen
Zahlensysteme definieren, wie Ziffern angezeigt werden. Während die meisten Anwendungen die standardmäßigen arabischen Ziffern (0-9) verwenden, haben viele Sprachen ihre eigenen traditionellen Zahlensysteme.
Der "numberingSystem"-Schlüssel gibt alle von der JavaScript-Umgebung unterstützten Zahlensysteme zurück:
const numberingSystems = Intl.supportedValuesOf("numberingSystem");
console.log(numberingSystems.slice(0, 10));
// Output: ["adlm", "ahom", "arab", "arabext", "armn", "armnlow",
// "bali", "beng", "bhks", "brah"]
Gängige Zahlensysteme umfassen:
"latn"für standardmäßige lateinische Ziffern (0-9)"arab"für arabisch-indische Ziffern"thai"für thailändische Ziffern"deva"für Devanagari-Ziffern, die in Hindi verwendet werden
Verschiedene Zahlensysteme zeigen dieselbe Zahl unterschiedlich an:
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: "๑๒,๓๔๕"
Derselbe numerische Wert erscheint mit unterschiedlichen Ziffernformen.
Unterstützte Sortierungstypen abrufen
Sortierungstypen definieren, wie Zeichenketten sortiert und verglichen werden. Verschiedene Sprachen haben unterschiedliche Regeln für die alphabetische Reihenfolge.
Der "collation"-Schlüssel gibt alle von der JavaScript-Umgebung unterstützten Sortierungstypen zurück:
const collations = Intl.supportedValuesOf("collation");
console.log(collations.slice(0, 10));
// Output: ["big5han", "compat", "dict", "direct", "ducet", "emoji",
// "eor", "gb2312", "phonebk", "phonetic"]
Gängige Sortierungstypen umfassen:
"standard"für die Standardsortierung jeder Sprache"phonetic"für phonetische Sortierung"pinyin"für chinesische Pinyin-Sortierung"emoji"für Emoji-Sortierung
Die Sortierung beeinflusst, wie Arrays von Zeichenketten sortiert werden:
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"]
Unterschiedliche Sortierungstypen können für dieselbe Eingabe unterschiedliche Sortierreihenfolgen erzeugen.
Unterstützte Einheiten abrufen
Einheitenbezeichner repräsentieren Maßeinheiten wie Meter, Gallonen oder Grad Celsius. JavaScript unterstützt viele Einheitentypen zur Formatierung von Messungen.
Der "unit"-Schlüssel gibt alle von der JavaScript-Umgebung unterstützten Einheitenbezeichner zurück:
const units = Intl.supportedValuesOf("unit");
console.log(units.slice(0, 10));
// Output: ["acre", "bit", "byte", "celsius", "centimeter", "day",
// "degree", "fahrenheit", "fluid-ounce", "foot"]
Gängige Einheiten umfassen:
- Länge:
"meter","kilometer","mile","foot" - Gewicht:
"gram","kilogram","pound","ounce" - Temperatur:
"celsius","fahrenheit" - Volumen:
"liter","gallon" - Digital:
"byte","kilobyte","megabyte"
Geben Sie beim Formatieren von Messungen die zu verwendende Einheit an:
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"
Die Einheit bestimmt, welche Abkürzung oder welches Symbol zusammen mit der Zahl erscheint.
Sie können Einheiten im Format "unit1-per-unit2" kombinieren:
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"
Dies erzeugt zusammengesetzte Einheiten wie Kilometer pro Stunde oder Meilen pro Gallone.
Dynamische Benutzeroberflächen erstellen
Der primäre Anwendungsfall für Intl.supportedValuesOf() ist die Erstellung von Benutzeroberflächen, die sich an die aktuelle JavaScript-Umgebung anpassen. Anstatt Optionen fest zu codieren, fragen Sie die unterstützten Werte zur Laufzeit ab.
Dieses Beispiel erstellt ein Einstellungsformular, in dem Benutzer ihren bevorzugten Kalender, ihre Währung und ihre Zeitzone auswählen können:
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());
Dies erstellt eine vollständige Einstellungsoberfläche, die nur Werte verwendet, die der Browser unterstützt.
Unterstützte Werte für Feature-Erkennung verwenden
Sie können Intl.supportedValuesOf() verwenden, um zu erkennen, ob bestimmte Werte unterstützt werden, bevor Sie sie verwenden. Dies hilft bei der Implementierung von progressiver Verbesserung und Fallback-Strategien.
Prüfen Sie, ob ein bestimmter Kalender unterstützt wird:
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");
}
Dieses Muster funktioniert für jeden Werttyp:
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
Der try-catch-Block behandelt Umgebungen, in denen Intl.supportedValuesOf() nicht verfügbar ist.
Sie können dies für das bedingte Laden von Polyfills verwenden:
async function ensureCalendarSupport(calendar) {
if (!isValueSupported("calendar", calendar)) {
console.log(`Loading polyfill for ${calendar} calendar`);
await import("./calendar-polyfill.js");
}
}
await ensureCalendarSupport("persian");
Dies lädt zusätzlichen Code nur bei Bedarf.