„Intl.DurationFormat“ ist jetzt als Baseline verfügbar

Jeremy Wagner

Veröffentlicht: 20. März 2025

Eine häufige Information auf einer Webseite ist ein Text, der angibt, wie lange es noch bis zu einem bestimmten Ereignis dauert oder wie viel Zeit seit einem Ereignis vergangen ist. Dieser wird in der Regel als String dargestellt, der die Zeitdauer in Stunden, Minuten, Sekunden oder anderen nützlichen Zeiteinheiten angibt.

Intl.DurationFormat ist eine nützliche Funktion, die dies für Sie im Browser erledigt und dabei alle Anforderungen an die Internationalisierung berücksichtigt, ohne dass zusätzliches JavaScript erforderlich ist. Seit März 2025 ist er als Baseline Newly verfügbar.

So funktioniert Intl.DurationFormat

Intl.DurationFormat ist eine Klasse, die bei der Instanziierung einen String zurückgibt, der die Zeitdauer beschreibt. Dazu wird ein Objekt mit Schlüsseln und Werten angegeben, die den Zeiteinheiten entsprechen, für die ein String generiert werden soll:

// Specify the duration:
const duration = {
  years: 1,
  hours: 20,
  minutes: 15,
  seconds: 35
};

// Output: '1 yr, 20 hr, 15 min, 35 sec'
new Intl.DurationFormat('en').format(duration);

Wenn Sie einen String im Langformat zurückgeben möchten, übergeben Sie der Option style im zweiten Argument des Konstruktors den Wert 'long':

const duration = {
  years: 1,
  hours: 20,
  minutes: 15,
  seconds: 35
};

// Output: '1 year, 20 hours, 15 minutes, 35 seconds'
new Intl.DurationFormat('en', { style: 'long' }).format(duration);

Bisher werden in diesen Beispielen Strings auf Englisch generiert. Da es sich hierbei um eine Funktion zur Internationalisierung handelt, ist der Vorteil dieser Funktion, dass Sie eine beliebige gültige Sprache übergeben und Strings in der gewünschten unterstützten Sprache formatieren lassen können:

const duration = {
  years: 1,
  hours: 20,
  minutes: 15,
  seconds: 35
};

// Output: '1 Jahr, 20 Stunden, 15 Minuten und 35 Sekunden'
new Intl.DurationFormat('de', { style: 'long' }).format(duration);

// Output: '1 año, 20 horas, 15 minutos y 35 segundos'
new Intl.DurationFormat('es', { style: 'long' }).format(duration);

// Output: '1年20小时15分钟35秒钟'
new Intl.DurationFormat('zh', { style: 'long' }).format(duration);

// Output: '1 år, 20 timer, 15 minutter og 35 sekunder'
new Intl.DurationFormat('no', { style: 'long' }).format(duration);

// Output: 'mwaka 1, saa 20, dakika 15 na sekunde 35'
new Intl.DurationFormat('sw', { style: 'long' }).format(duration);

Diese Beispiele sind nur ein kleiner Ausschnitt dessen, was Sie mit dieser neuen Funktion tun können. Weitere Informationen zu den Funktionen von Intl.DurationFormat finden Sie in der Intl.DurationFormat-Dokumentation auf MDN.