Internationalisierung

berblick

Das Intl-Objekt ist stark an Anwendungsfllen orientiert. Es bietet ein separates Objekt fr jeden Anwendungsfall, der lokalisierungsspezifische Logik erfordert. Derzeit bietet es die folgenden Funktionen:

• Informationen ber eine Locale erhalten mittels Intl.Locale.
• Daten formatieren mittels Intl.DateTimeFormat, Intl.DurationFormat, Intl.ListFormat, Intl.NumberFormat und Intl.RelativeTimeFormat.
• Kollation (d.h. Vergleich von Strings zum Sortieren oder Suchen) mittels Intl.Collator.
• Pluralformen auswhlen mittels Intl.PluralRules.
• Text segmentieren in Einheiten wie Wrter, Stze oder Grapheme mittels Intl.Segmenter.
• Den angezeigten Namen erhalten fr Whrungen, Sprachen, Schriften, Regionen und Zeitzonen mittels Intl.DisplayNames.

Die meisten Intl-APIs haben ein hnliches Design (Intl.Locale ist die einzige Ausnahme). Sie beginnen mit der Konstruktion einer Instanz mit der gewnschten Locale und den Optionen. Dies definiert einen Satz von Regeln fr die gewnschte Operation (Formatierung, Kollation, Segmentierung usw.). Dann, wenn Sie die Methode auf der Instanz aufrufen, wie format(), compare() oder segment(), wendet das Objekt die angegebene Regel auf die bergebenen Daten an.

// 1. Construct a formatter object, specifying the locale and formatting options:
const price = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
});

// 2. Use the `format` method of the formatter object to format a number:
console.log(price.format(5.259)); // $5.26

Das allgemeine Signatur des Konstruktors ist:

new Intl.SomeObject(locales, options)

locales Optional

Ein String mit einem BCP 47 Sprach-Tag oder eine Intl.Locale-Instanz oder ein Array solcher Locale-Identifikatoren. Die Standardeinstellung der Laufzeit wird verwendet, wenn undefined bergeben wird oder wenn keiner der angegebenen Locale-Identifikatoren untersttzt wird. Fr die allgemeine Form und Interpretation des locales-Arguments siehe die Parameterbeschreibung auf der Intl-Hauptseite.

options Optional

Ein Objekt, das Eigenschaften enthlt, die spezifische Aspekte der Operation anpassen, was der Schlssel zum Verstndnis der Verwendung jedes Intl-Objekts ist.

Locale-Informationen

Locales liegen allen Verhaltensweisen von Intl zugrunde. Eine Locale ist ein Satz von Konventionen, dargestellt in der Intl-API durch das Intl.Locale-Objekt. Alle Intl-Konstruktoren, die Sprach-Tags akzeptieren, akzeptieren auch Intl.Locale-Objekte.

Jede Locale wird hauptschlich durch vier Dinge definiert: eine language, ein script, eine region und manchmal einige variants. Wenn sie in dieser Reihenfolge verbunden werden, bilden sie ein BCP 47 Sprach-Tag.

• Die Sprache ist der wichtigste Teil der Locale und ist obligatorisch. Wenn eine einzelne Sprache angegeben wird, wie en oder fr, gibt es Algorithmen, um den Rest der Informationen zu folgern (siehe Intl.Locale.prototype.maximize()).
• Oft mchte man jedoch auch die Region angeben, da sich die Konventionen in Regionen, die dieselbe Sprache sprechen, drastisch unterscheiden knnen. Zum Beispiel ist das Datumsformat in den USA MM/TT/JJJJ, whrend es im Vereinigten Knigreich TT/MM/JJJJ lautet, daher ist es wichtig, en-US oder en-GB anzugeben.
• Sie knnen auch ein Script angeben. Das Script ist das Schriftsystem oder die Zeichen, die verwendet werden, um die Sprache zu transkribieren. In der Praxis ist das Script oft unntig, da die in einer bestimmten Region verwendete Sprache normalerweise nur in einem Schriftsystem geschrieben wird. Es gibt jedoch Ausnahmen wie die serbische Sprache, die sowohl in der lateinischen als auch in der kyrillischen Schrift geschrieben werden kann (sr-Latn und sr-Cyrl), oder die chinesische Sprache, die sowohl in der vereinfachten als auch in der traditionellen Schrift geschrieben werden kann (zh-Hans und zh-Hant).
• Die Varianten werden selten verwendet. In der Regel bezeichnen sie unterschiedliche Orthographien; zum Beispiel hat Deutsch die 1901 und 1996 Orthographie-Varianten, die als de-1901 und de-1996 geschrieben werden.

// These two are equivalent when passed to other Intl APIs
const locale1 = new Intl.Locale("en-US");
const locale2 = new Intl.Locale("en-Latn-US");

console.log(locale1.language, locale1.script, locale1.region); // "en", undefined, "US"
console.log(locale2.language, locale2.script, locale2.region); // "en", "Latn", "US"

Eine Locale enthlt auch einen Satz von Konventionen, die von dieser speziellen Kultur verwendet werden:

Diese Eigenschaften knnen explizit angegeben werden, wenn das Intl.Locale-Objekt erstellt oder Sprach-Tags an andere Intl-Konstruktoren bergeben werden. Es gibt zwei Mglichkeiten dies zu tun sie an das Sprach-Tag anhngen oder sie als Optionen angeben.

• Um sie an das Sprach-Tag anzuhngen, fgen Sie zuerst den String -u (was "Unicode-Erweiterung" bedeutet) an, dann das Erweiterungs-Untertitel wie oben angegeben und dann den Wert.
• Um sie als Optionen anzugeben, fgen Sie einfach den Eigenschaftsnamen wie oben angegeben zusammen mit seinem Wert dem options-Objekt hinzu.

Mithilfe von Intl.DateTimeFormat als Beispiel erstellen beide der folgenden Zeilen einen Formatierer, der Daten im hebrischen Kalender formatiert:

const df1 = new Intl.DateTimeFormat("en-US-u-ca-hebrew");
const df2 = new Intl.DateTimeFormat("en-US", { calendar: "hebrew" });

Nicht erkannte Eigenschaften werden ignoriert, sodass Sie die gleiche Syntax wie oben mit Intl.NumberFormat verwenden knnen, aber es wird nichts anderes tun, als einfach en-US zu bergeben, da die Zahlenformatierung die calendar-Eigenschaft nicht verwendet.

Es ist schwierig, die Standardwerte dieser Locale-Konventionen zu ermitteln. new Intl.Locale("en-US").calendar gibt undefined zurck, da das Locale-Objekt nur die Informationen enthlt, die Sie ihm bergeben haben. Der Standardkalender ist theoretisch abhngig von der API, mit der Sie den Kalender verwenden, sodass Sie den Standardkalender von en-US, wie er von Intl.DateTimeFormat verwendet wird, mit seiner resolvedOptions()-Methode ermitteln knnen. Das Gleiche gilt fr andere Eigenschaften.

const locale = new Intl.Locale("en-US");
console.log(locale.calendar); // undefined; it's not provided
console.log(new Intl.DateTimeFormat(locale).resolvedOptions().calendar); // "gregory"

Intl.Locale-Objekte tun zwei Dinge gleichzeitig: Sie reprsentieren ein geparstes BCP 47 Sprach-Tag (wie oben demonstriert) und sie liefern Informationen ber diese Locale. Alle ihre Eigenschaften, wie calendar, werden nur aus der Eingabe extrahiert, ohne dabei eine Datenquelle nach Standardwerten abzufragen. Auf der anderen Seite hat es eine Gruppe von Methoden, um reale Informationen ber die Locale zu erfragen. Zum Beispiel ergnzen die Methoden getCalendars(), getHourCycles(), getNumberingSystems() und getCollations() die Eigenschaften calendar, hourCycle, numberingSystem und collation, und jede gibt ein Array bevorzugter Werte fr diese Eigenschaft zurck.

const locale = new Intl.Locale("ar-EG");
console.log(locale.getCalendars()); // ['gregory', 'coptic', 'islamic', 'islamic-civil', 'islamic-tbla']

Intl.Locale-Instanzen beinhalten auch andere Methoden, die ntzliche Informationen preisgeben, wie getTextInfo(), getTimeZones(), und getWeekInfo().

Die Locale ermitteln

Eine gemeinsame Frage zur Internationalisierung lautet: Wie wei ich, welche Locale ich nutzen soll?

Die offensichtlichste Antwort lautet: "was der Nutzer bevorzugt." Browser stellen die Spracheinstellungen des Nutzers ber die navigator.languages-Eigenschaft zur Verfgung. Dies ist ein Array von Sprach-Identifikatoren, das direkt an den Konstruktor des Formatierers bergeben werden kann mehr dazu spter. Der Nutzer kann diese Liste in seinen Browsereinstellungen konfigurieren. Sie knnen auch ein leeres Array oder undefined bergeben, wodurch die Standardeinstellung des Browsers verwendet wird.

const numberFormatter = new Intl.NumberFormat(navigator.languages);
console.log(numberFormatter.format(1234567.89));

const numberFormatter2 = new Intl.NumberFormat([]);

Allerdings liefert dies mglicherweise nicht immer das wnschenswerteste Ergebnis. Von Intl formatierte Strings stellen einen winzigen Bruchteil des auf Ihrer Website angezeigten Texts dar; die meisten lokalisierten Inhalte werden von Ihnen, dem Website-Entwickler, bereitgestellt. Angenommen, Ihre Website wird nur in zwei Sprachen angeboten: Englisch und Franzsisch. Wenn ein japanischer Nutzer Ihre Website besucht und erwartet, diese auf Englisch zu nutzen, wird er verwirrt sein, wenn er den englischen Text mit Zahlen und Daten auf Japanisch sieht!

In der Regel mchten Sie nicht die Standardsprache des Browsers verwenden. Vielmehr mchten Sie die gleiche Sprache verwenden, in der der Rest Ihrer Website angeboten wird. Angenommen, Ihre Website hat einen Sprachschalter, der die Auswahl des Nutzers irgendwo speichert Sie knnten diese direkt verwenden.

// Suppose this can be changed by some site-wide control
const userSettings = {
  locale: "en-US",
  colorMode: "dark",
};
const numberFormatter = new Intl.NumberFormat(userSettings.locale);
console.log(numberFormatter.format(1234567.89));

Falls Ihre Website ein Backend hat, das die Sprache basierend auf dem Accept-Language-Header des Nutzers dynamisch auswhlt und entsprechend anderes HTML zurcksendet, knnten Sie auch die [HTMLElement.lang]-Eigenschaft des HTML-Elements verwenden: new Intl.NumberFormat(document.documentElement.lang).

Falls Ihre Website nur in einer Sprache angeboten wird, knnten Sie die Locale direkt in Ihrem Code hartkodieren: new Intl.NumberFormat("en-US").

Wie bereits erwhnt, knnen Sie dem Konstruktor auch ein Array von Locales bergeben, das eine Liste von Fallback-Optionen darstellt. Das erste Beispiel mit navigator.languages ist ein Beispiel hierfr: Wenn die erste nutzer-configurierte Locale nicht fr die bestimmte Operation untersttzt wird, wird die nchste versucht, und so weiter, bis eine angeforderte Locale gefunden wird, fr die die Laufzeit Daten hat. Sie knnen dies auch manuell tun. Im nachstehenden Beispiel spezifizieren wir eine Liste von Locales in absteigender Reihenfolge der Spezifitt, die alle Sprachen darstellen, die ein chinesischer Sprecher aus Hongkong wahrscheinlich versteht, sodass der Formatierer die spezifischste von ihm untersttzte Locale auswhlt.

const numberFormatter = new Intl.NumberFormat([
  "yue-Hant",
  "zh-Hant-HK",
  "zh-Hant",
  "zh",
]);

Es gibt keine API, um alle untersttzten Locales aufzulisten, aber es gibt ein paar Methoden zum Umgang mit der Locale-Liste:

• Intl.getCanonicalLocales(): Diese Funktion nimmt eine Liste von Locale-Identifikatoren und gibt eine Liste kanonisierter Locale-Identifikatoren zurck. Dies ist ntzlich, um den Kanonisierungsprozess fr jeden Intl-Konstruktor zu verstehen.
• Die supportedLocalesOf()-statische Methode auf jedem Intl-Objekt (wie Intl.DateTimeFormat.supportedLocalesOf()): Diese Methode nimmt die gleichen Argumente wie der Konstruktor (locales und options) und gibt eine Teilmenge der gegebenen Locale-Tags zurck, die mit den gegebenen Daten bereinstimmen. Dies ist ntzlich, um zu verstehen, welche Locales von der Laufzeit fr eine bestimmte Operation untersttzt werden, zum Beispiel um einen Sprachschalter mit nur den untersttzten Sprachen zu zeigen.

Verstndnis des Rckgabewertes

Die zweite gemeinsame Frage fr alle Objekte lautet "was gibt die Methode zurck?" Diese Frage lsst sich nicht ber den Aufbau oder Typ des zurckgegebenen Wertes hinaus leicht beantworten, da es keine normative Spezifikation gibt, die genau vorschreibt, was genau zurckgegeben werden sollte. Die meiste Zeit ist das Ergebnis einer Methode konsistent. Allerdings kann sich die Ausgabe zwischen Implementierungen unterscheiden, sogar innerhalb derselben Locale Unterschiede in Ausgaben sind ausdrcklich von der Spezifikation vorgesehen und erlaubt. Es ist mglicherweise auch nicht das, was Sie erwarten. Zum Beispiel knnte der von format() zurckgegebene String geschtzte Leerzeichen oder von bidirektionalen Steuerzeichen umgeben sein. Vergleichen Sie die Ergebnisse einer Intl-Methode nie mit fest kodierten Konstanten; sie sollten nur Nutzern angezeigt werden.

Natrlich klingt diese Antwort unbefriedigend, denn die meisten Entwickler wollen durchaus kontrollieren, wie die Ausgabe aussieht zumindest will man nicht, dass Nutzer durch unsinnige Ausgaben verwirrt werden. Hier sind einige Richtlinien, wenn Sie Tests durchfhren mchten, sei es automatisiert oder manuell:

• Testen Sie alle Locales, die Ihr Nutzer mglicherweise verwenden knnte. Dies ist einfacher, wenn Sie eine feste Anzahl von untersttzten Locales haben (zum Beispiel ber einen Sprachschalter). Wenn Sie verwenden, was der Nutzer bevorzugt, knnten Sie einige gngige fr Ihre Nutzer auswhlen. Beachten Sie allerdings, dass das, was der Nutzer sieht, variieren knnte. Normalerweise knnen Sie Benutzerprferenzen ber die Konfiguration des Testrunners simulieren oder die Intl-Konstruktoren mocken.
• Testen Sie es auf mehreren JavaScript-Engines. Die Intl-API wird direkt von der JavaScript-Engine implementiert, erwarten Sie also, dass Node.js und Chrome (die beide V8 verwenden) dasselbe Ergebnis haben, whrend Firefox (das SpiderMonkey verwendet) mglicherweise ein anderes Ergebnis hat. Auch wenn alle Engines wahrscheinlich die CLDR-Daten verwenden, verarbeiten sie diese in der Regel auf verschiedene Weise nach. Einige Browsereinstellungen (zum Beispiel um die Installationsgre zu reduzieren) knnen ebenfalls beeinflussen, welche Locales und Optionen untersttzt werden.
• Gehen Sie nicht von einer bestimmten Ausgabe aus. Das bedeutet, dass Sie die Ausgabe nicht von Hand niederschreiben sollten, wie expect(result).toBe("foo"). Verwenden Sie stattdessen Snapshot-Tests oder kopieren Sie den String-Wert aus der Ausgabe eines Testlaufs.

Daten formatieren

Ein Hauptanwendungsfall von Intl ist das Ausgeben von lokalisierungsspezifischen Texten, die strukturierte Daten darstellen. Dies hnelt bersetzungssoftware, aber anstatt Ihnen die bersetzung beliebigen Textes zu ermglichen, nimmt es Daten wie Daten, Zahlen und Listen und formatiert sie gem lokalisierungsbezogenen Regeln.

Die Objekte Intl.DateTimeFormat, Intl.DurationFormat, Intl.ListFormat, Intl.NumberFormat, und Intl.RelativeTimeFormat formatieren jeweils eine Art von Daten. Jede Instanz bietet zwei Methoden:

• format(): Nimmt ein Stck Daten und gibt einen String zurck, der die Formatierungsregel wie von der Locale und den Optionen bestimmt verwendet.
• formatToParts(): Nimmt dieselben Daten und gibt denselben String zurck, allerdings aufgeteilt in Teile, wobei jeder Teil ein Objekt mit einem type und einem value ist. Dies ist ntzlich fr fortgeschrittene Anwendungsflle, wie das Einfgen des formatierten Textes in andere Texte.

Zum Beispiel hier eine typische Verwendung des Intl.NumberFormat-Objekts:

// 1. Construct a formatter object, specifying the locale and formatting options:
const price = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
});

// 2. Use the `format` method of the formatter object to format a number:
console.log(price.format(5.259)); // $5.26

// Or, use the `formatToParts` method to get the formatted number
// broken down into parts:
console.table(price.formatToParts(5.259));
// |   | type       | value |
// | 0 | "currency" | "$"   |
// | 1 | "integer"  | "5"   |
// | 2 | "decimal"  | "."   |
// | 3 | "fraction" | "26"  |

Sie mssen nicht immer ein Formatierer-Objekt konstruieren, um Strings zu formatieren. Fr gelegentliche Zwecke knnen Sie auch direkt die toLocaleString()-Methode auf den Daten aufrufen, indem Sie die Locale und Optionen als Argumente bergeben. Die toLocaleString()-Methode wird von Temporal.PlainDate.prototype.toLocaleString(), Temporal.Duration.prototype.toLocaleString(), Number.prototype.toLocaleString(), und so weiter implementiert. Lesen Sie die Dokumentation fr die Daten, die Sie formatieren, um zu sehen, ob sie toLocaleString() untersttzen und welche Formatierer-Optionen es entspricht.

console.log(
  (5.259).toLocaleString("en-US", {
    style: "currency",
    currency: "USD",
  }),
); // $5.26

Beachten Sie, dass toLocaleString() potenziell weniger effizient sein kann als die Verwendung eines Formatierer-Objekts, da jedes Mal, wenn toLocaleString aufgerufen wird, eine Suche in einer groen Datenbank von Lokalisierungsstrings durchgefhrt werden muss. Wenn die Methode viele Male mit denselben Argumenten aufgerufen wird, ist es besser, ein Formatierer-Objekt zu erstellen und seine format()-Methode zu verwenden, da ein Formatierer-Objekt die ihm bergebenen Argumente speichert und sich entscheidet, einen Ausschnitt der Datenbank im Cache zu halten, sodass zuknftige format-Aufrufe Lokalisierungsstrings innerhalb eines eingeschrnkteren Kontexts suchen knnen.

Datums- und Uhrzeitformatierung

Intl.DateTimeFormat formatiert Daten und Zeiten sowie Bereiche von Daten und Zeiten. Das DateTimeFormat-Objekt akzeptiert Datum/Zeit-Eingaben in einer der folgenden Formen: Date, Temporal.PlainDateTime, Temporal.PlainTime, Temporal.PlainDate, Temporal.PlainYearMonth, oder Temporal.PlainMonthDay.

Gngige Anwendungsflle fr lokalisierte Datums- und Zeitformatierung sind wie folgt:

• Das gleiche Datum und die gleiche Uhrzeit in einem anderen Kalendersystem ausgeben, wie dem islamischen, hebrischen oder chinesischen Kalender.
• Das gleiche reale Zeitmoment (Moment) ausgeben, jedoch in einer anderen Zeitzone.
• Selektives Ausgeben bestimmter Komponenten des Datums und der Uhrzeit, wie nur des Jahres und des Monats, und deren spezifische Darstellung (wie "Donnerstag" oder "Do").
• Datum gem lokalisierungsbezogenen Konventionen ausgeben, wie MM/TT/JJJJ wie in den USA, TT/MM/JJJJ wie im Vereinigten Knigreich oder JJJJ/MM/TT wie in Japan.
• Uhrzeit gem lokalisierungsbezogenen Konventionen ausgeben, wie 12-Stunden- oder 24-Stunden-Uhr.

Um zu entscheiden, wie der formatierte String aussehen soll, whlen Sie zunchst den Kalender (der Jahr-, Monat-, Wochen-, und Tagesberechnung beeinflusst) und die Zeitzone (die das genaue Zeitmoment sowie mglicherweise das Datum beeinflusst). Dies geschieht mithilfe der zuvor genannten calendar-Option (oder dem -ca- Erweiterungsschlssel im Locale-Identifikator) und der timeZone-Option.

• Date-Objekte reprsentieren ein einzigartiges Moment in der Zeitzone des Nutzers und im ISO 8601-Kalender (wie von Methoden wie Date.prototype.getHours() und Date.prototype.getMonth() berichtet). Sie werden in den angegebenen calendar und die timeZone konvertiert, indem das Moment erhalten bleibt, sodass die Datums- und Zeitkomponenten sich ndern knnen.
• Die verschiedenen Temporal-Objekte besitzen bereits einen eingebauten Kalender, sodass die calendar-Option konsistent mit dem Kalender des Objekts sein musses sei denn, der Kalender des Datums ist "iso8601", in welchem Fall es in den angeforderten calendar konvertiert wird. Diese Objekte besitzen keine Zeitzone, sodass sie direkt in der gegebenen timeZone ohne Konvertierung angezeigt werden.

Hier zeigen wir, wie die Kombination von calendar- und timeZone-Konfigurationen zu unterschiedlichen Darstellungen desselben Moments fhren.

// Assume that the local time zone is UTC
const targetDate = new Date(2022, 0, 1); // 2022-01-01 midnight in the local time zone
const results = [];

for (const calendar of ["gregory", "hebrew"]) {
  for (const timeZone of ["America/New_York", "Asia/Tokyo"]) {
    const df = new Intl.DateTimeFormat("en-US", {
      calendar,
      timeZone,
      // More on these later
      dateStyle: "full",
      timeStyle: "full",
    });
    results.push({ calendar, timeZone, output: df.format(targetDate) });
  }
}

console.table(results);

Die Ausgabe sieht so aus:

Ein Datum/Uhrzeit besteht aus den folgenden Komponenten: weekday, era, year, month, day, dayPeriod, hour, minute, second, fractionalSecondDigits, und timeZoneName. Ihre nchste Entscheidung ist, welche Komponenten in der Ausgabe enthalten sein sollen und welche Formen sie annehmen sollen. Sie haben zwei Mglichkeiten:

• Sie knnen jede Komponente manuell konfigurieren, indem Sie Optionen mit demselben Namen wie die Komponente verwenden. Nur die von Ihnen spezifizierten Komponenten werden in der Ausgabe enthalten sein, mit der angegebenen Form.
• Sie knnen die Abkrzungen dateStyle und timeStyle verwenden, die vordefinierte Stze von Komponenten sind. Sie erweitern sich zu einem Satz von Komponentenoptionen abhngig von der Locale.

Sie sollten eine dieser beiden Methoden whlen, da sie gegenseitig exklusiv sind. Die gleichzeitige Verwendung beider Methoden fhrt zu einem Fehler.

Grundstzlich sucht das DateTimeFormat-Objekt nach Anforderung einer Kombination von Komponenten nach einer "Schablone", die mit den angeforderten Komponenten bereinstimmt, sodass es nur die Werte eins nach dem anderen ausfllen muss. Nicht jede Kombination von Komponenten hat eine vordefinierte Schablone. DateTimeFormat hat eine formatMatcher-Option, die entscheidet, wie zu verhandeln ist, indem Komponenten lnger oder krzer gemacht werden als angefordert, oder indem Komponenten weggelassen oder hinzugefgt werden. Es wird ziemlich technisch, daher sollten Sie das Intl.DateTimeFormat() Nachschlagewerk lesen, um besser zu verstehen, wie es damit umgeht.

Hier, demonstrieren wir einige gngige Methoden zum Formatieren der Komponenten:

const df1 = new Intl.DateTimeFormat("en-US", {
  // Include all components (usually)
  dateStyle: "full",
  timeStyle: "full",
});

const df2 = new Intl.DateTimeFormat("en-US", {
  // Display the calendar date
  era: "short",
  year: "numeric",
  month: "long",
  day: "numeric",
});

const df3 = new Intl.DateTimeFormat("en-US", {
  // Display a time like on a digital clock
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit",
  timeZoneName: "shortOffset",
});

const targetDate = new Date(2022, 0, 1, 12, 34, 56); // 2022-01-01 12:34:56 in the local time zone
console.log(df1.format(targetDate));
// Saturday, January 1, 2022 at 12:34:56 PM Coordinated Universal Time
// January 1, 2022 AD
// 12:34:56 PM GMT

Es gibt weitere Anpassungsoptionen. Beispielsweise knnen Sie die hourCycle-Option verwenden, um die Uhrzeit im 12-Stunden- oder 24-Stunden-Format anzuzeigen und Mitternacht/Mittag als 12:00 oder 0:00 anzuzeigen. Sie knnen auch die numberingSystem-Option verwenden, um Zahlen in einem anderen Zahlensystem anzuzeigen.

Neben format() gibt es eine zweite wichtige Methode, formatRange(), die einen Bereich von Daten oder Zeiten formatiert. Sie nimmt zwei DateTime-Darstellungen des gleichen Typs, formatiert jede einzeln, verbindet sie mit einem Bereichsseparator (wie der en-Dash), und entfernt gegebenenfalls doppelte Teile.

const springBreak = {
  start: new Date(2023, 2, 10),
  end: new Date(2023, 2, 26),
};

const df = new Intl.DateTimeFormat("en-US", { dateStyle: "long" });
console.log(df.formatRange(springBreak.start, springBreak.end));
// March 1026, 2023

Zahlenformatierung

Die Zahlenformatierung erfolgt mit dem Intl.NumberFormat-Objekt. Das NumberFormat-Objekt akzeptiert Eingaben in Form von Zahlen, Strings oder BigInt-Werten. Das bergeben eines Strings oder BigInt anstelle einer Zahl ermglicht Ihnen, Zahlen zu formatieren, die zu gro oder zu klein sind, um als JavaScript-Zahl genau dargestellt zu werden.

Gngige Anwendungsflle fr die lokalisierte Zahlenformatierung sind wie folgt:

• Die Zahl in einem anderen Zahlensystem (Script) ausgeben, wie Chinesisch, Arabisch oder Rmisch.
• Die Zahl mit lokalisierungsbezogenen Konventionen ausgeben, wie dem Dezimaltrennzeichen (".'' in Englisch, aber "," in vielen europischen Kulturen), oder der Zahlenzusammenstellung (3 Ziffern in Englisch, aber in anderen Kulturen knnten es 4 oder 2 sein, und sie knnten ",", " " oder "." verwenden).
• Die Zahl im exponentiellen Notationsformat wie "3,7 Millionen" oder "2 Tausend" ausgeben.
• Die Zahl als Whrung ausgeben und bestimmte Whrungssymbole und Rundungsregeln anwenden. Zum Beispiel sind Geldbetrge unter einem Cent in den USA oder unter einem Yen in Japan mglicherweise nicht sinnvoll anzuzeigen.
• Die Zahl als Prozentsatz ausgeben und lokalisierungsbezogene Umwandlungs- und Formatierungsregeln anwenden.
• Die Zahl mit Einheiten ausgeben, wie "Meter" oder "Liter", mit bersetzten Einheitsnamen.

Um zu entscheiden, wie der formatierte String aussehen soll, whlen Sie zuerst das Zahlensystem (was die Zeichen beeinflusst, die fr die Ziffern verwendet werden). Der Zweck eines Zahlensystems wurde bereits in den Locale-Informationen diskutiert. Eine weitere Option, die Sie entscheiden mssen, ist der style, der den Kontext festlegt, in welchem die Zahl dargestellt wird, und mglicherweise die Standardwerte anderer Optionen beeinflusst. Er ist eines von "decimal", "percent", "currency", oder "unit". Wenn Sie Whrungen formatieren mchten, mssen Sie auch die currency-Option angeben. Wenn Sie Einheiten formatieren mchten, mssen Sie auch die unit-Option angeben.

const results = [];
for (const options of [
  { style: "decimal" }, // Format the number as a dimensionless decimal
  { style: "percent" }, // Format the number as a percentage; it is multiplied by 100
  { style: "currency", currency: "USD" }, // Format the number as a US dollar amount
  { style: "unit", unit: "meter" }, // Format the number as a length in meters
]) {
  const nf = new Intl.NumberFormat("en-US", options);
  results.push({ style: options.style, output: nf.format(1234567.89) });
}
console.table(results);

Die Ausgabe sieht so aus:

Die nchste Gruppe von Optionen spezifizieren alle, wie der numerische Teil aussehen soll. Zunchst mchten Sie mglicherweise extrem groe Werte auf eine lesbarere Weise darstellen. Sie knnen die notation-Option auf "scientific" oder "engineering" setzen, die beide die 1.23e+6-Notation verwenden. Der Unterschied ist, dass letztere Vielfache von 3 fr den Exponenten verwendet, um die Mantisse (den Teil vor dem e-Symbol) zwischen 1 und 1000 zu halten, whrend die Erstere fr den Exponenten jede ganze Zahl verwenden kann und die Mantisse zwischen 1 und 10 hlt. Sie knnen auch notation auf "compact" setzen, um eine fr Menschen lesbarere Notation zu verwenden.

const results = [];
for (const options of [
  { notation: "scientific" },
  { notation: "engineering" },
  { notation: "compact", compactDisplay: "short" }, // "short" is default
  { notation: "compact", compactDisplay: "long" },
]) {
  const nf = new Intl.NumberFormat("en-US", options);
  results.push({
    notation: options.compactDisplay
      ? `${options.notation}-${options.compactDisplay}`
      : options.notation,
    output: nf.format(12000),
  });
}
console.table(results);

Die Ausgabe sieht so aus:

Dann mchten Sie mglicherweise die Zahl runden (falls Sie notation angegeben haben, dann nur den Mantissenteil), sodass Sie keine Zahl anzeigen, die zu lang ist. Dies sind die Ziffernoptionen, die umfassen:

• minimumIntegerDigits
• minimumFractionDigits
• maximumFractionDigits
• minimumSignificantDigits
• maximumSignificantDigits
• roundingPriority
• roundingIncrement
• roundingMode

Die genaue Interaktion dieser Optionen ist recht komplex und es ist nicht lohnenswert, sie hier zu behandeln. Sie sollten die Ziffernoptionen nachlesen, um mehr Details zu erfahren. Dennoch ist das grundstzliche Konzept einfach: Zunchst ermitteln wir die Anzahl der Dezimalstellen, die wir beibehalten mchten, und dann runden wir berzhlige Dezimalstellen ab oder auf, abhngig vom Wert der letzten Ziffer.

const results = [];
for (const options of [
  { minimumFractionDigits: 4, maximumFractionDigits: 4 },
  { minimumSignificantDigits: 4, maximumSignificantDigits: 4 },
  { minimumFractionDigits: 0, maximumFractionDigits: 0, roundingMode: "floor" },
  {
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
    roundingMode: "floor",
    roundingIncrement: 10,
  },
]) {
  const nf = new Intl.NumberFormat("en-US", options);
  results.push({
    options,
    output: nf.format(1234.56789),
  });
}
console.table(results);

Die Ausgabe sieht so aus:

Es gibt weitere Anpassungsoptionen. Beispielsweise knnen Sie die Optionen useGrouping und signDisplay verwenden, um anzupassen, ob und wie die Gruppentrennzeichen (wie "," in "1,234,567.89") und das Vorzeichen angezeigt werden sollen. Beachten Sie jedoch, dass die verwendeten Zeichen fr Gruppentrennzeichen, Dezimaltrennpunkt und Vorzeichen lokalisierungsabhngig sind, sodass Sie sie nicht direkt anpassen knnen.

Neben format() gibt es eine zweite wichtige Methode, formatRange(), die einen Bereich von Zahlen formatiert. Sie nimmt zwei Zahlendarstellungen, formatiert jede einzeln, verbindet sie mit einem Bereichsseparator (wie der en-Dash), und entfernt gegebenenfalls doppelte Teile.

const heightRange = {
  min: 1.63,
  max: 1.95,
};

const nf = new Intl.NumberFormat("en-US", { style: "unit", unit: "meter" });
console.log(nf.formatRange(heightRange.min, heightRange.max));
// 1.631.95 m

Listenformatierung

Sie haben mglicherweise bereits Code geschrieben, der dies tut:

const fruits = ["apple", "banana", "cherry"];
console.log(`I like ${fruits.join(", ")}.`);
// I like apple, banana, cherry.

Dieser Code ist nicht internationalisiert. In einigen Sprachen ist der Listentrenner kein Komma. In den meisten Sprachen (einschlielich Englisch) bentigen Sie eine Konjunktion vor dem letzten Element. Aber auch nur das manuelle Hinzufgen eines "und" macht es nicht korrekt fr alle Englischsprecher, weil es die Debatte um Oxford-Kommas im Englischen gibt: "apple, banana, and cherry" vs. "apple, banana and cherry".

Das Intl.ListFormat-Objekt lst dieses Problem. Es nimmt ein Array von Strings und verbindet sie auf eine lokalisierungsabhngige Weise, sodass das Ergebnis eine Konjunktion (und), Disjunktion (oder) oder eine Liste von Einheiten reprsentiert.

const fruits = ["apple", "banana", "cherry"];
const lf = new Intl.ListFormat("en-US", { style: "long", type: "conjunction" });
console.log(`I like ${lf.format(fruits)}.`);
// I like apple, banana, and cherry.

const lf = new Intl.ListFormat("en-US", { style: "long", type: "disjunction" });
console.log(`I can give you ${lf.format(fruits)}.`);
// I can give you apple, banana, or cherry.

Weitere Beispiele und Optionen finden Sie unter Intl.ListFormat().

Relative Zeitformatierung

Intl.RelativeTimeFormat formatiert einen Zeitunterschied. Das RelativeTimeFormat-Objekt nimmt relative Zeiten in Form von zwei Argumenten: eine Zahl (mit beliebigem Vorzeichen) und eine Zeitffnung, wie "day", "hour", oder "minute".

Es erledigt mehrere Dinge gleichzeitig:

• Es lokalisiert und pluralisiert die Zeitffnung, wie "1 day" vs. "2 days", hnlich wie bei der Zahlenformatierung.
• Es whlt die passende Phrase fr vergangene und zuknftige Zeiten, wie "in 1 day" vs. "1 day ago".
• Es kann eine spezielle Phrase fr einige Zeiteinheiten auswhlen, wie "1 day ago" vs. "yesterday".

const rtf = new Intl.RelativeTimeFormat("en-US", { numeric: "auto" });
console.log(rtf.format(1, "day")); // tomorrow
console.log(rtf.format(2, "day")); // in 2 days
console.log(rtf.format(-1, "hour")); // 1 hour ago

Weitere Beispiele und Optionen finden Sie unter Intl.RelativeTimeFormat().

Dauernformatierung

Intl.DurationFormat bietet die Formatierung von Dauern, wie "3 hours, 4 minutes, 5 seconds". Es ist keine primitive Operation mit eigenem Formatierer: Es verwendet intern Intl.NumberFormat und Intl.ListFormat, um jede Dauereinheit zu formatieren, und fgt sie dann mit einem Listentrenner zusammen. Das DurationFormat-Objekt nimmt Dauern in der Form eines Temporal.Duration-Objekts oder eines einfachen Objekts mit denselben Eigenschaften an.

Abgesehen von der Anpassung des Zahlensystems, entscheidet die Dauernformatierungs-Option, ob jede Komponente angezeigt wird und wie lang sie sein sollen.

console.log(
  new Intl.DurationFormat("en-US", {
    style: "long",
  }).format({ hours: 3, minutes: 4, seconds: 5 }),
);
// 3 hours, 4 minutes, and 5 seconds

Weitere Beispiele und Optionen finden Sie unter Intl.DurationFormat().

Kollation

Das Intl.Collator-Objekt ist ntzlich zum Vergleichen und Sortieren von Strings. Es nimmt zwei Strings und gibt eine Zahl zurck, die ihre relative Ordnung angibt, auf die gleiche Weise wie das compareFn-Argument der Array.prototype.sort-Methode.

Es gibt viele Grnde, warum Sie keine JavaScript-Operatoren wie === oder > verwenden sollten, um benutzerorientierte Strings zu vergleichen:

• Irrelevante orthografische Varianten: Beispielsweise sollten im Englischen "nave" und "naive" als alternative Schreibweisen desselben Wortes behandelt werden und gleich behandelt werden.
• Ignorieren die Groschreibung: Oft mchten Sie die Groschreibung beim Vergleich von Strings ignorieren. Beispielsweise sollten "apple" und "Apple" als gleich behandelt werden.
• Unicode-Codepunkt-Reihenfolge ergibt keinen Sinn: Vergleichsoperatoren wie > vergleichen anhand der Unicode-Codepunkt-Reihenfolge, die nicht dasselbe ist wie die Reihenfolge der Zeichen im Wrterbuch. Beispielsweise kommt "" nach "z" in Codepunktreihenfolge, aber man wrde es im Wrterbuch neben "i" anordnen wollen.
• Unicode-Normalisierung: Dasselbe Zeichen kann in Unicode mehrere Darstellungen haben. Beispielsweise kann "" als einzelnes Zeichen oder als "n" gefolgt von einem kombinierenden Tilde dargestellt werden (siehe String.prototype.normalize()). Diese sollten als gleich behandelt werden.
• Zahlenvergleich: Zahlen in Strings sollten als Zahlen verglichen werden und nicht als Strings. Beispielsweise mchte man, dass "test-10" nach "test-2" kommt.

Es gibt zwei unterschiedliche Anwendungsflle fr Kollation: Sortierung und Suche. Sortierung erfolgt, wenn Sie eine Liste von Strings haben und diese nach einer bestimmten Regel ordnen mchten. Suche erfolgt, wenn Sie eine Liste von Strings haben und einen String finden mchten, der einer Suchanfrage entspricht. Bei der Suche sollten Sie nur darauf achten, ob das Vergleichsergebnis Null (gleich) ist oder nicht, nicht auf das Vorzeichen des Ergebnisses.

Es gibt viele verschiedene Arten zu sortieren, sogar innerhalb derselben Locale. Beispielsweise gibt es im Deutschen zwei verschiedene Sortierreihenfolgen, Telefonbuch und Wrterbuch. Die Telefonbuchsortierung betont den Klangals ob "", "" und so weiter auf "ae", "oe" und so weiter erweitert wrden, bevor sie sortiert werden.

const names = ["Hochberg", "Hnigswald", "Holzman"];

const germanPhonebook = new Intl.Collator("de-DE-u-co-phonebk");

// as if sorting ["Hochberg", "Hoenigswald", "Holzman"]:
console.log(names.sort(germanPhonebook.compare));
// ['Hochberg', 'Hnigswald', 'Holzman']

Einige deutsche Wrter konjugieren mit zustzlichen Umlauten, sodass es in Wrterbchern sinnvoll ist, die Umlaute zu ignorieren (auer beim Sortieren von Wrtern, die sich nur in Umlauten unterscheiden: schon vor schn).

const germanDictionary = new Intl.Collator("de-DE-u-co-dict");

// as if sorting ["Hochberg", "Honigswald", "Holzman"]:
console.log(names.sort(germanDictionary.compare).join(", "));
// "Hochberg, Holzman, Hnigswald"

Pluralregeln

Das Intl.PluralRules-Objekt ist ntzlich, um die korrekte Pluralform eines Wortes auszuwhlen. Es pluralisiert die Wrter nicht automatisch fr Sie (zum Beispiel knnen Sie nicht "apple" bergeben und "apples" erwarten), aber es sagt Ihnen, welche Pluralform basierend auf einer Zahl verwendet werden soll. Sie tun dies mglicherweise bereits:

function formatMessage(n) {
  return `You have ${n} ${n === 1 ? "apple" : "apples"}.`;
}

Aber dies ist schwer auf andere Sprachen zu verallgemeinern, insbesondere auf solche mit vielen Pluralformen. Sie knnen Intl.PluralRules fr eine allgemeine Einfhrung in Pluralregeln einsehen. Hier demonstrieren wir einige gngige Anwendungsflle.

const prCard = new Intl.PluralRules("en-US");
const prOrd = new Intl.PluralRules("en-US", { type: "ordinal" });

const englishOrdinalSuffixes = {
  one: "st",
  two: "nd",
  few: "rd",
  other: "th",
};

const catPlural = {
  one: "cat",
  other: "cats",
};

function formatMessage(n1, n2) {
  return `The ${n1}${englishOrdinalSuffixes[prOrd.select(n1)]} U.S. president had ${n2} ${catPlural[prCard.select(n2)]}.`;
}

console.log(formatMessage(42, 1)); // The 42nd U.S. president had 1 cat.
console.log(formatMessage(45, 0)); // The 45th U.S. president had 0 cats.

Segmentierung

Das Intl.Segmenter-Objekt ist ntzlich, um einen String in Segmente zu teilen. Ohne Intl knnen Sie bereits einen String durch UTF-16 Code-Einheiten und Unicode Code-Punkte teilen:

const str = "";
console.log(str.split(""));
// Array(20) ['\uD83C', '\uDDFA', '\uD83C', ...]
console.log([...str]);
// Array(10) ['', '', '', '', '', '', '', '', '', '']

Aber wie Sie sehen knnen, sind Unicode-Code-Punkte nicht dasselbe wie das, was menschliche Nutzer als diskrete Zeichen wahrnehmen. Dies geschieht oft bei Emojis, wo ein einzelnes Emoji durch mehrere Code-Punkte dargestellt werden kann. Wenn der Nutzer mit Text arbeitet, ist ein Graphem die kleinste Einheit von Text, die sie manipulieren knnen, wie lschen oder auswhlen. Das Segmenter-Objekt ermglicht die Segmentierung auf Graphemebene, was ntzlich ist zum Zhlen von Zeichen, Messen der Textbreite und mehr. Es nimmt einen String und gibt ein iterierbares Segmente-Objekt zurck, wobei jedes Element eine segment-Eigenschaft hat, die den Text des Segments reprsentiert.

const segmenter = new Intl.Segmenter("en-US", { granularity: "grapheme" });
console.log([...segmenter.segment("")].map((s) => s.segment));
// ['', '', '', '', '']

Der Segmentierer kann auch eine hhere Segmentierung durchfhren, einschlielich der Segmentierung auf Wort- und Satzebene. Diese Anwendungsflle sind notwendigerweise sprachspezifisch. Beispielsweise ist das folgende eine sehr schlechte Implementierung der Wortzhlung:

const wordCount = (str) => str.split(/\s+/).length;
console.log(wordCount("Hello, world!")); // 2

Es gibt mehrere Probleme damit: nicht alle Sprachen verwenden Leerzeichen, um Wrter zu trennen, nicht alle Leerzeichen trennen Wrter, und nicht alle Wrter werden durch Leerzeichen getrennt. Um dies zu lsen, verwenden Sie Segmenter mit granularity: "word". Das Ergebnis ist der Eingabestring, getrennt in Segmente von Wrtern und Nicht-Wrtern. Wenn Sie Wrter zhlen, sollten Sie die Nicht-Wrter herausfiltern, indem Sie die isWordLike-Eigenschaft jedes Segments berprfen.

const segmenter = new Intl.Segmenter("en-US", { granularity: "word" });
const str = "It can even split non-space-separated words";
console.table([...segmenter.segment(str)]);
// 
//  segment      index  isWordLike 
// 
//  'It'         0      true       
//  ' '          2      false      
//  'can'        3      true       
//  ' '          6      false      
//  'even'       7      true       
//  ' '          11     false      
//  'split'      12     true       
//  ' '          17     false      
//  'non'        18     true       
//  '-'          21     false      
//  'space'      22     true       
//  '-'          27     false      
//  'separated'  28     true       
//  ' '          37     false      
//  'words'      38     true       
// 

console.log(
  [...segmenter.segment(str)].filter((s) => s.isWordLike).map((s) => s.segment),
);
// ['It', 'can', 'even', 'split', 'non', 'space', 'separated', 'words']

Die Wortsegmentierung funktioniert auch bei zeichenbasierten Sprachen. Beispielsweise knnen im Chinesischen mehrere Zeichen ein einziges Wort darstellen, aber es gibt keinen Leerraum dazwischen. Der Segmentierer implementiert dasselbe Verhalten wie die eingebaute Wortsegmentierung des Browsers, die durch Doppelklicken auf ein Wort ausgelst wird.

const segmenter = new Intl.Segmenter("zh-Hans", { granularity: "word" });
console.log([...segmenter.segment("")].map((s) => s.segment));
// ['', '', '', '', '', '', '']

Die Satzsegmentierung ist hnlich komplex. Beispielsweise gibt es im Englischen viele Satzzeichen, die das Ende eines Satzes markieren knnten (".", "!", "?", und so weiter).

const segmenter = new Intl.Segmenter("en-US", { granularity: "sentence" });
console.log(
  [...segmenter.segment("I ate a sandwich. Then I went to bed.")].map(
    (s) => s.segment,
  ),
);
// ['I ate a sandwich. ', 'Then I went to bed.']

Beachten Sie, dass der Segmentierer keine Zeichen entfernt. Er teilt einfach den String in Segmente, von denen jedes einen Satz darstellt. Sie knnen dann die Satzzeichen entfernen, wenn Sie mchten. Auch die aktuelle Implementierung des Segmentierers untersttzt keine Satzsegmentierung-Unterdrckungen (Verhinderung von Satzumbrchen nach Punkten wie "Mr." oder "Approx."), aber es wird daran gearbeitet, dies zu untersttzen.

Anzeigenamen

Nachdem so viele Optionen und Verhaltensweisen eingefhrt wurden, fragen Sie sich mglicherweise, wie Sie diese dem Nutzer prsentieren knnen. Intl hat zwei ntzliche APIs zum Aufbau von Benutzeroberflchen: Intl.supportedValuesOf() und Intl.DisplayNames.

Die Intl.supportedValuesOf()-Funktion gibt ein Array von untersttzten Werten fr eine gegebene Option zurck. Beispielsweise knnen Sie dies verwenden, um eine Dropdown-Liste untersttzter Kalender zu fllen, aus der Benutzer auswhlen knnen, um Daten anzuzeigen.

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

Diese Bezeichner sind jedoch oft nicht benutzerfreundlich. Beispielsweise mchten Sie mglicherweise die Kalender in der Sprache des Nutzers anzeigen oder sie unabgekrzt darstellen. Das Intl.DisplayNames-Objekt ist dafr ntzlich. Es ist wie ein Formatierer, ist aber nicht schablonenbasiert. Stattdessen ist es eine direkte Zuordnung von sprachunabhngigen Bezeichnern zu lokalisierten Namen. Es untersttzt das Formatieren von Sprachen, Regionen, Schriften (die drei Unterfelder eines BCP 47 Sprach-Tags), Whrung, Kalender und Datum-Zeit-Feldern.

Probieren Sie die untenstehende Demo aus:

<select id="lang"></select>
<select id="calendar"></select>
<output id="output"></output>

output {
  display: block;
  margin: 1em;
  font-size: x-large;
}

rt {
  font-weight: bold;
}

ruby {
  border-bottom: 1px dotted;
  ruby-position: under;
  ruby-align: center;
}

const langSelect = document.getElementById("lang");
const calSelect = document.getElementById("calendar");
const fieldset = document.querySelector("fieldset");
const output = document.getElementById("output");

// A few examples
const langs = [
  "en-US",
  "zh-Hans-CN",
  "ja-JP",
  "ar-EG",
  "ru-RU",
  "es-ES",
  "fr-FR",
  "de-DE",
  "hi-IN",
  "pt-BR",
  "bn-BD",
  "he-IL",
];
const calendars = Intl.supportedValuesOf("calendar");

for (const lang of langs) {
  const option = document.createElement("option");
  option.value = lang;
  option.textContent = new Intl.DisplayNames(lang, { type: "language" }).of(
    lang,
  );
  langSelect.appendChild(option);
}

function renderCalSelect() {
  const lang = langSelect.value;
  calSelect.innerHTML = "";
  const dn = new Intl.DisplayNames(lang, { type: "calendar" });
  const preferredCalendars = new Intl.Locale(lang).getCalendars?.() ?? [
    "gregory",
  ];
  for (const cal of [
    ...preferredCalendars,
    ...calendars.filter((c) => !preferredCalendars.includes(c)),
  ]) {
    const option = document.createElement("option");
    option.value = cal;
    option.textContent = dn.of(cal);
    calSelect.appendChild(option);
  }
}

function renderFieldInputs() {
  const lang = langSelect.value;
  fieldset.querySelectorAll("label").forEach((label) => label.remove());
  const dn = new Intl.DisplayNames(lang, { type: "dateTimeField" });
  for (const field of fields) {
    const label = document.createElement("label");
    label.textContent = dn.of(field);
    const input = document.createElement("input");
    input.type = "checkbox";
    input.value = field;
    label.appendChild(input);
    fieldset.appendChild(label);
  }
}

function renderTime() {
  const lang = langSelect.value;
  const cal = calSelect.value;
  const df = new Intl.DateTimeFormat(lang, {
    calendar: cal,
    dateStyle: "full",
    timeStyle: "full",
  });
  const now = new Date();
  const dn = new Intl.DisplayNames(lang, { type: "dateTimeField" });
  output.innerHTML = "";
  for (const component of df.formatToParts(now)) {
    const text = document.createElement("span");
    text.textContent = component.value;
    if (
      ![
        "era",
        "year",
        "quarter",
        "month",
        "weekOfYear",
        "weekday",
        "day",
        "dayPeriod",
        "hour",
        "minute",
        "second",
        "timeZoneName",
      ].includes(component.type)
    ) {
      output.appendChild(text);
      continue;
    }
    const title = dn.of(component.type);
    const field = document.createElement("ruby");
    field.appendChild(text);
    const rt = document.createElement("rt");
    rt.textContent = title;
    field.appendChild(rt);
    output.appendChild(field);
  }
}

renderCalSelect();
renderTime();
langSelect.addEventListener("change", renderCalSelect);
langSelect.addEventListener("change", renderTime);
calSelect.addEventListener("change", renderTime);
setInterval(renderTime, 500);

• Zurck
• Weiter