So prüfen Sie, welches Kalender- oder Zahlensystem ein Gebietsschema verwendet

Erkennen und validieren Sie Kalendersysteme und Zahlenformate für jedes Gebietsschema mit JavaScript

Einführung

Wenn jemand in Thailand ein Datum in Ihrer Web-App anzeigt, erwartet er Datumsangaben im buddhistischen Kalender und nicht im gregorianischen Kalender, der in westlichen Ländern verwendet wird. Ebenso erwarten arabischsprachige Personen, dass Ziffern als ١٢٣ statt als 123 dargestellt werden. Verschiedene Kulturen verwenden unterschiedliche Kalender- und Zahlensysteme, und JavaScript bietet Tools, um zu erkennen, welche für bestimmte Gebietsschemata gelten.

Die Intl.Locale-API enthält Eigenschaften und Methoden, die offenlegen, welche Kalender- und Zahlensysteme ein Gebietsschema verwendet. Diese Informationen helfen Ihnen, Datumsangaben und Zahlen korrekt zu formatieren, ohne Annahmen darüber zu kodieren, welche Systeme verschiedene Kulturen bevorzugen.

Dieser Leitfaden erklärt, wie Sie Kalender- und Zahlensysteme für Gebietsschemata prüfen, verstehen, was die verschiedenen Systeme bedeuten, und diese Informationen verwenden, um Inhalte angemessen zu formatieren.

Kalendersysteme verstehen

Ein Kalendersystem ist eine Methode zur Organisation von Zeit in Jahre, Monate und Tage. Während der gregorianische Kalender weit verbreitet ist, verwenden viele Kulturen aus religiösen, historischen oder kulturellen Gründen unterschiedliche Kalendersysteme.

Die gängigsten Kalendersysteme umfassen:

  • gregory für den gregorianischen Kalender, der in den meisten westlichen Ländern verwendet wird
  • buddhist für den buddhistischen Kalender, der in Thailand, Kambodscha und Myanmar verwendet wird
  • islamic für den islamischen Mondkalender, der für religiöse Zwecke in muslimischen Ländern verwendet wird
  • hebrew für den hebräischen Kalender, der in Israel und für jüdische religiöse Feiern verwendet wird
  • japanese für den japanischen Kalender, der kaiserliche Ära-Namen verwendet
  • chinese für den chinesischen lunisolaren Kalender, der für traditionelle Feiertage verwendet wird
  • persian für den persischen Sonnenkalender, der im Iran und in Afghanistan verwendet wird
  • indian für den indischen Nationalkalender
  • coptic für den koptischen Kalender, der in Ägypten von koptischen Christen verwendet wird

Verschiedene Regionen verwenden unterschiedliche Kalender als Standard, und einige Regionen nutzen üblicherweise mehrere Kalendersysteme.

Zahlensysteme verstehen

Ein Zahlensystem ist ein Satz von Symbolen, die zur Darstellung von Ziffern verwendet werden. Während westliche Länder lateinische Ziffern (0, 1, 2, 3, 4, 5, 6, 7, 8, 9) verwenden, nutzen andere Kulturen unterschiedliche Symbole zur Darstellung derselben numerischen Werte.

Gängige Zahlensysteme umfassen:

  • latn für lateinische Ziffern: 0 1 2 3 4 5 6 7 8 9
  • arab für arabisch-indische Ziffern: ٠ ١ ٢ ٣ ٤ ٥ ٦ ٧ ٨ ٩
  • arabext für ostarabisch-indische Ziffern: ۰ ۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹
  • deva für Devanagari-Ziffern: ० १ २ ३ ४ ५ ६ ७ ८ ९
  • beng für bengalische Ziffern: ০ ১ ২ ৩ ৪ ৫ ৬ ৭ ৮ ৯
  • thai für thailändische Ziffern: ๐ ๑ ๒ ๓ ๔ ๕ ๖ ๗ ๘ ๙
  • hanidec für chinesische Dezimalzahlen
  • fullwide für vollbreite Ziffern, die in der ostasiatischen Typografie verwendet werden

Alle Zahlensysteme repräsentieren dieselben numerischen Werte, verwenden jedoch unterschiedliche visuelle Symbole basierend auf dem Schriftsystem der Sprache.

Standardkalender für ein Gebietsschema prüfen

Die Methode getCalendars() gibt ein Array von Kalendersystemen zurück, die üblicherweise für ein Gebietsschema verwendet werden, sortiert nach Präferenz. Das erste Element ist der Standardkalender.

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

Thailändische Gebietsschemata verwenden standardmäßig den buddhistischen Kalender, nutzen aber auch häufig den gregorianischen Kalender. Dies zeigt Ihnen, dass bei der Formatierung von Datumsangaben für thailändische Benutzer der buddhistische Kalender bevorzugt wird.

Verschiedene Locales geben unterschiedliche Kalenderpräferenzen zurück:

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"]

Amerikanisches Englisch verwendet ausschließlich den gregorianischen Kalender. Saudi-arabisches Arabisch verwendet häufig sowohl gregorianische als auch islamische Kalender. Japanische Locales verwenden sowohl gregorianische als auch japanische imperiale Kalender.

Das Array enthält alle Kalender, die in diesem Locale häufig verwendet werden, sodass Sie bei Bedarf mehrere Kalenderoptionen anbieten können.

Standardnummerierungssystem für ein Locale prüfen

Die Methode getNumberingSystems() gibt ein Array von Nummerierungssystemen zurück, die für ein Locale häufig verwendet werden. Das erste Element ist das Standardnummerierungssystem.

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

Ägyptisches Arabisch verwendet standardmäßig arabisch-indische Ziffern. Verwenden Sie beim Formatieren von Zahlen für ägyptisch-arabische Benutzer das arabisch-indische Nummerierungssystem, sofern der Benutzer nichts anderes angegeben hat.

Verschiedene Locales verwenden unterschiedliche Standardnummerierungssysteme:

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"]

Amerikanisches Englisch verwendet lateinische Ziffern. Hindi in Indien verwendet in modernen Kontexten standardmäßig ebenfalls lateinische Ziffern, obwohl Devanagari-Ziffern existieren. Thai verwendet in den meisten modernen Kontexten standardmäßig lateinische Ziffern.

Viele moderne Locales verwenden standardmäßig lateinische Ziffern, auch wenn traditionelle Nummerierungssysteme existieren, was aktuelle Nutzungsmuster widerspiegelt.

Aktiven Kalender aus einem Locale auslesen

Die Eigenschaft calendar gibt das Kalendersystem zurück, das explizit für ein Locale festgelegt wurde. Wenn kein Kalender angegeben ist, gibt sie undefined zurück.

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

Ein einfaches Locale ohne Kalendererweiterungen gibt undefined zurück. Das Locale verwendet beim Formatieren von Datumsangaben seinen Standardkalender.

Sie können Locales mit expliziten Kalenderpräferenzen mithilfe von Unicode-Erweiterungen erstellen:

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

Die Erweiterung -u-ca-buddhist gibt den buddhistischen Kalender an. Die Eigenschaft calendar gibt "buddhist" zurück.

Sie können den Kalender auch beim Erstellen des Locale festlegen:

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

Das Options-Objekt hat Vorrang vor jedem im Locale-String angegebenen Kalender.

Aktives Zahlensystem aus einem Locale auslesen

Die Eigenschaft numberingSystem gibt das explizit für ein Locale festgelegte Zahlensystem zurück. Wenn kein Zahlensystem angegeben ist, gibt sie undefined zurück.

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

Ein einfaches Locale ohne Zahlensystem-Erweiterungen gibt undefined zurück. Das Locale verwendet beim Formatieren von Zahlen sein Standard-Zahlensystem.

Sie können Locales mit expliziten Zahlensystem-Präferenzen erstellen:

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

Die Erweiterung -u-nu-arab gibt arabisch-indische Ziffern an. Die Eigenschaft numberingSystem gibt "arab" zurück.

Sie können das Zahlensystem auch beim Erstellen des Locale festlegen:

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

Dies erstellt ein arabisches Locale, das lateinische Ziffern anstelle der standardmäßigen arabisch-indischen Ziffern verwendet.

Erkennen, ob ein Locale einen expliziten Kalender hat

Um zu prüfen, ob ein Locale einen explizit festgelegten Kalender hat oder seinen Standard verwendet, prüfen Sie, ob die Eigenschaft calendar definiert ist:

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

Diese Unterscheidung ist wichtig, wenn Sie feststellen müssen, ob der Benutzer explizit eine Kalender-Präferenz gewählt hat oder ob Sie den Standard des Locale verwenden sollten.

Erkennen, ob ein Locale ein explizites Zahlensystem hat

Prüfen Sie analog, ob die Eigenschaft numberingSystem definiert ist, um explizite Zahlensystem-Präferenzen zu erkennen:

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

Das erste Locale verwendet das Standard-Zahlensystem für ägyptisches Arabisch. Das zweite Locale fordert explizit lateinische Ziffern an.

Kalenderinformationen zur Datumsformatierung verwenden

Sobald Sie wissen, welchen Kalender ein Gebietsschema verwendet, wenden Sie ihn bei der Formatierung von Daten mit Intl.DateTimeFormat an:

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"

Der thailändische buddhistische Kalender zeigt dasselbe Datum als Jahr 2568 an, was 543 Jahre vor dem gregorianischen Kalender liegt.

Sie können den Kalender auch explizit überschreiben:

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"

Dies formatiert das Datum im hebräischen Kalender und zeigt das entsprechende hebräische Jahr und den Monat an.

Zahlensysteminformationen zur Zahlenformatierung verwenden

Wenden Sie Zahlensysteminformationen bei der Formatierung von Zahlen mit Intl.NumberFormat an:

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));
// "١٢٣٬٤٥٦"

Dieselbe Zahl wird mit unterschiedlichen Ziffernsymbolen basierend auf dem Zahlensystem dargestellt.

Einen Kalenderselektor erstellen

Verwenden Sie Kalenderinformationen, um Benutzeroberflächen zu erstellen, mit denen Benutzer ihren bevorzugten Kalender auswählen können:

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" }
// ]

Dies erstellt eine Liste von Kalenderoptionen, die für saudi-arabische arabischsprachige Benutzer geeignet sind, die üblicherweise mehrere Kalender verwenden.

Einen Zahlensystemselektor erstellen

Erstellen Sie Benutzeroberflächen für Zahlensystempräferenzen:

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 (٠-٩)" }]

Dies bietet klare Beschriftungen für Zahlensystemoptionen und zeigt den Benutzern, wie jede Auswahl aussieht.

Kalenderkompatibilität validieren

Bevor Sie einen Kalender auf ein Gebietsschema anwenden, überprüfen Sie, ob das Gebietsschema diesen Kalender unterstützt:

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

Thailändische Gebietsschemata unterstützen den buddhistischen Kalender, aber amerikanische englischsprachige Gebietsschemata verwenden ihn üblicherweise nicht.

Zahlensystemkompatibilität validieren

Überprüfen Sie, ob ein Gebietsschema ein bestimmtes Zahlensystem unterstützt:

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

Ägyptisches Arabisch unterstützt arabisch-indische Ziffern, amerikanisches Englisch verwendet diese jedoch nicht.

Effektiven Kalender für die Formatierung bestimmen

Bestimmen Sie bei der Formatierung von Datumsangaben, welcher Kalender tatsächlich verwendet wird:

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"

Diese Funktion gibt den explizit festgelegten Kalender zurück, falls vorhanden, andernfalls den Standardkalender für das Gebietsschema.

Effektives Zahlensystem für die Formatierung bestimmen

Bestimmen Sie, welches Zahlensystem bei der Formatierung von Zahlen verwendet wird:

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"

Dies gibt das explizit festgelegte Zahlensystem zurück, falls vorhanden, andernfalls das Standardsystem für das Gebietsschema.

Benutzerkalenderpräferenzen speichern

Wenn Benutzer eine Kalenderpräferenz auswählen, speichern Sie diese als Gebietsschema-String mit Erweiterungen:

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"

Dies erstellt einen vollständigen Gebietsschema-String, der die Kalenderpräferenz beibehält. Speichern Sie diesen String in den Benutzereinstellungen oder Cookies.

Benutzerpräferenzen für Zahlensysteme speichern

Speichern Sie Zahlensystempräferenzen auf die gleiche Weise:

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"

Der Gebietsschema-String enthält die Zahlensystempräferenz und kann direkt mit Formatierungs-APIs verwendet werden.

Mehrere Präferenzen gleichzeitig verarbeiten

Benutzer können sowohl Kalender- als auch Zahlensystempräferenzen haben:

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"

Dies kombiniert mehrere Formatierungspräferenzen in einem einzigen Gebietsschema-String.

Aufgelöste Formatierungsoptionen überprüfen

Überprüfen Sie nach dem Erstellen eines Formatters, welchen Kalender und welches Zahlensystem dieser verwendet:

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"

Die resolvedOptions()-Methode zeigt, welchen Kalender und welches Zahlensystem der Formatter nach Auflösung der Standardwerte und Benutzerpräferenzen tatsächlich verwendet.

Browser-Unterstützung

Die Intl.Locale-API wird in allen modernen Browsern unterstützt. Die getCalendars()- und getNumberingSystems()-Methoden erfordern aktuelle Browser-Versionen. Chrome 99, Firefox 99, Safari 15.4 und Edge 99 unterstützen diese Methoden. Node.js unterstützt sie ab Version 18.

Die calendar- und numberingSystem-Properties verfügen über eine breitere Unterstützung und sind seit der Einführung von Intl.Locale in Chrome 74, Firefox 75, Safari 14 und Node.js 12 verfügbar.

Prüfen Sie die Methodenunterstützung vor der Verwendung:

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

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

Dies stellt sicher, dass Ihr Code in Umgebungen funktioniert, die Intl.Locale unterstützen, aber nicht über die neueren Methoden verfügen.

Zusammenfassung

JavaScript bietet Tools zur Erkennung, welche Kalender- und Zahlensysteme ein Locale verwendet, über die Intl.Locale-API. Diese Tools helfen Ihnen, Datumsangaben und Zahlen für verschiedene Kulturen korrekt zu formatieren, ohne Annahmen fest zu codieren.

Wichtige Konzepte:

  • Verwenden Sie getCalendars(), um ein Array der häufig verwendeten Kalender für ein Locale zu erhalten
  • Verwenden Sie getNumberingSystems(), um ein Array der häufig verwendeten Zahlensysteme für ein Locale zu erhalten
  • Die calendar-Property gibt den explizit festgelegten Kalender oder undefined zurück
  • Die numberingSystem-Property gibt das explizit festgelegte Zahlensystem oder undefined zurück
  • Verschiedene Locales verwenden standardmäßig unterschiedliche Kalender und Zahlensysteme
  • Wenden Sie Kalender- und Zahlensysteminformationen beim Erstellen von Formattern an
  • Speichern Sie Benutzerpräferenzen als Locale-Strings mit Unicode-Erweiterungen
  • Validieren Sie, dass Locales bestimmte Kalender und Zahlensysteme unterstützen, bevor Sie diese anwenden

Verwenden Sie diese Methoden beim Erstellen von Locale-Selektoren, beim Speichern von Benutzerpräferenzen, beim Validieren von Formatierungsoptionen oder beim Erstellen internationalisierter Anwendungen, die kulturelle Konventionen für Datumsangaben und Zahlen berücksichtigen.