Wie man eine Liste der unterstützten Kalender, Währungen und Zeitzonen erhält

Entdecken Sie, welche Internationalisierungswerte Ihre JavaScript-Umgebung unterstützt

Einführung

Beim Erstellen internationalisierter Anwendungen müssen Sie oft Benutzeroberflächen-Elemente wie Dropdown-Menüs, Auswahlfelder oder Formulare erstellen, die es Benutzern ermöglichen, Kalender, Währungen, Zeitzonen oder andere Lokalisierungsoptionen auszuwählen. Um diese Komponenten zu erstellen, müssen Sie wissen, welche Werte die JavaScript-Umgebung unterstützt.

Anstatt hartcodierte Listen zu pflegen, die veraltet werden oder Werte enthalten, die der Browser nicht unterstützt, bietet JavaScript eine Methode, um unterstützte Werte zur Laufzeit zu ermitteln. Dies stellt sicher, 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, Nummerierungssysteme, Sortierungstypen und Maßeinheiten zu erhalten, die von der JavaScript-Umgebung unterstützt werden.

Was Intl.supportedValuesOf zurückgibt

Die Methode Intl.supportedValuesOf() akzeptiert einen einzelnen String-Parameter, der angibt, welche Art 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);
// Ausgabe: ["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 Nummerierungssysteme zurück
  • "collation" gibt unterstützte Sortierungstypen 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, wirft die Methode einen RangeError:

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

Dieser Fehler zeigt an, dass Sie einen Schlüssel verwendet haben, den die Methode nicht erkennt.

Unterstützte Kalender abrufen

Kalendersysteme definieren, wie Datumsangaben berechnet und angezeigt werden. Verschiedene Kulturen verwenden unterschiedliche Kalendersysteme, und JavaScript unterstützt viele davon über die Intl-API.

Der Schlüssel "calendar" gibt alle Kalendersysteme zurück, die von der JavaScript-Umgebung unterstützt werden:

const calendars = Intl.supportedValuesOf("calendar");
console.log(calendars);
// Ausgabe: ["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. Andere 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 Datumsangaben formatiert und berechnet werden. Wenn Sie Intl.DateTimeFormat mit einem bestimmten Kalender verwenden, erscheinen Datumsangaben gemäß den Regeln dieses Kalenders:

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));
// Ausgabe: "October 15, 2025"

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

Dasselbe JavaScript-Datum erscheint unterschiedlich, wenn es mit verschiedenen Kalendern formatiert wird.

Verwendung unterstützter Kalender zum Erstellen von Auswahlfeldern

Beim Erstellen eines Kalenderauswahlfelds in Ihrer Benutzeroberfläche können Sie die unterstützten Kalender abfragen und Optionen für jeden erstellen:

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 dieses Auswahlfeld verbessern, indem Sie Intl.DisplayNames verwenden, um benutzerfreundliche 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);
  // Erstellt Optionen wie "Gregorian Calendar", "Islamic Calendar", usw.
});

Dies zeigt beschreibende Namen anstelle von technischen Bezeichnern an.

Unterstützte Währungen abrufen

Währungscodes identifizieren Währungssysteme, die weltweit verwendet werden. JavaScript unterstützt Hunderte von Währungscodes basierend auf dem ISO 4217-Standard.

Der Schlüssel "currency" gibt alle Währungscodes zurück, die von der JavaScript-Umgebung unterstützt werden:

const currencies = Intl.supportedValuesOf("currency");
console.log(currencies.length);
// Ausgabe: typischerweise über 300

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

Währungscodes verwenden drei Großbuchstaben. Häufige Beispiele sind:

  • "USD" für US-Dollar
  • "EUR" für Euro
  • "GBP" für Britisches Pfund
  • "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.

Bei der Formatierung von Währungsbeträgen 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));
// Ausgabe: "$1,234.56"

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

Der Währungscode bestimmt, welches Symbol angezeigt wird und wie der Wert formatiert wird.

Filtern von Währungen für die Benutzerauswahl

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 die für Ihre Benutzer relevanten einzuschließen:

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);
// Ausgabe: ["USD", "EUR", "GBP", "JPY", "CNY", "INR", "CAD", "AUD"]

Dies stellt sicher, dass Sie nur Währungen anbieten, die sowohl Ihren Anforderungen entsprechen als auch vom Browser unterstützt werden.

Anzeigen von Währungsnamen

Beim Erstellen eines Währungsselektors sollten beschreibende Namen anstelle von Drei-Buchstaben-Codes angezeigt werden:

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 gezeigt wird, wofür jeder Code steht.

Abrufen unterstützter Zeitzonen

Zeitzonen repräsentieren geografische Regionen, die dieselbe Standardzeit beobachten. JavaScript unterstützt Hunderte von Zeitzonenidentifikatoren basierend auf der IANA-Zeitzonendatenbank.

Der Schlüssel "timeZone" gibt alle Zeitzonenidentifikatoren zurück, die von der JavaScript-Umgebung unterstützt werden:

const timeZones = Intl.supportedValuesOf("timeZone");
console.log(timeZones.length);
// Output: typischerweise über 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"]

Zeitzonenidentifikatoren folgen dem Format Kontinent/Stadt, wie "America/New_York" oder "Europe/London". Einige Identifikatoren enthalten zusätzliche Komponenten wie "America/Indiana/Indianapolis".

Bei der Formatierung von Datums- und Zeitangaben beeinflusst die Zeitzone, welche lokale Zeit 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 als unterschiedliche lokale Zeiten, abhängig von der Zeitzone.

Zeitzonenauswahl erstellen

Zeitzonenauswahlen müssen Hunderte von Optionen auf eine für Benutzer verständliche Weise präsentieren. Gruppieren Sie Zeitzonen nach Regionen, 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 Kontinenten und erleichtert es Benutzern, ihren Standort zu finden.

Sie können die Benutzererfahrung weiter verbessern, indem Sie die aktuelle Zeitverschiebung 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 Zeitverschiebungen hilft Benutzern, den Zeitunterschied zwischen Zeitzonen 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 Schlüssel "numberingSystem" gibt alle Zahlensysteme zurück, die von der JavaScript-Umgebung unterstützt werden:

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 stellen dieselbe Zahl unterschiedlich dar:

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.

Abrufen unterstützter Kollationstypen

Kollationstypen definieren, wie Zeichenketten sortiert und verglichen werden. Verschiedene Sprachen haben unterschiedliche Regeln für die alphabetische Sortierung.

Der Schlüssel "collation" gibt alle Kollationstypen zurück, die von der JavaScript-Umgebung unterstützt werden:

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

Gängige Kollationstypen umfassen:

  • "standard" für die Standardkollation jeder Sprache
  • "phonetic" für phonetische Sortierung
  • "pinyin" für chinesische Pinyin-Sortierung
  • "emoji" für Emoji-Sortierung

Die Kollation 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));
// Ausgabe: ["a", "ä", "z"]

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

Verschiedene Kollationstypen können unterschiedliche Sortierreihenfolgen für dieselbe Eingabe erzeugen.

Abrufen unterstützter Einheiten

Einheitsbezeichner repräsentieren Maßeinheiten wie Meter, Gallonen oder Grad Celsius. JavaScript unterstützt viele Einheitstypen zur Formatierung von Messungen.

Der Schlüssel "unit" gibt alle Einheitsbezeichner zurück, die von der JavaScript-Umgebung unterstützt werden:

const units = Intl.supportedValuesOf("unit");
console.log(units.slice(0, 10));
// Ausgabe: ["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"

Bei der Formatierung von Messungen geben Sie 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));
// Ausgabe: "1,000 m"

console.log(kilometerFormat.format(1));
// Ausgabe: "1 km"

Die Einheit bestimmt, welche Abkürzung oder welches Symbol mit der Zahl erscheint.

Sie können Einheiten mit dem 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));
// Ausgabe: "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 das Erstellen von Benutzeroberflächen, die sich an die aktuelle JavaScript-Umgebung anpassen. Anstatt Optionen fest zu codieren, werden die unterstützten Werte zur Laufzeit abgefragt.

Dieses Beispiel erstellt ein Einstellungsformular, in dem Benutzer ihren bevorzugten Kalender, Währung und Zeitzone auswählen können:

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

  // Kalenderauswahl
  const calendarSelect = buildSelector(
    "calendar",
    Intl.supportedValuesOf("calendar")
  );
  form.appendChild(createFormGroup("Calendar", calendarSelect));

  // Währungsauswahl
  const currencies = ["USD", "EUR", "GBP", "JPY", "CNY"];
  const currencySelect = buildSelector("currency", currencies);
  form.appendChild(createFormGroup("Currency", currencySelect));

  // Zeitzonenauswahl
  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 vom Browser unterstützt werden.

Verwendung unterstützter Werte für Feature-Erkennung

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 Progressive Enhancement und Fallback-Strategien.

Überprü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.