Signatur
Beschreibung
Der Konstruktor Intl.DurationFormat() erzeugt einen wiederverwendbaren Formatierer für Zeitdauern, also nicht für Zeitpunkte. Übergeben wird ein Dauer-Objekt wie { hours: 1, minutes: 46, seconds: 40 }. Daraus wird eine Zeichenkette gemäß der gewählten Sprache, etwa „1 Std., 46 Min. und 40 Sek.“ oder im Digitalformat „1:46:40“.
Sinnvoll ist das überall, wo Dauern für Menschen lesbar erscheinen sollen: Videolänge, Laufzeit eines Uploads, Restzeit einer Aufgabe, Trainingszeiten oder Lieferfristen. Eigene Mehrzahlregeln, Einheitenkürzel und Listentrenner („und“, „,“) musst du nicht selbst schreiben, denn die Sprachdaten aus CLDR liefern das automatisch.
Über options steuerst du den Gesamtstil (long, short, narrow, digital) und bei Bedarf jede Einheit einzeln, zum Beispiel hours: "numeric" oder secondsDisplay: "always". Das Erzeugen eines Formatierers kostet Rechenzeit. Lege ihn deshalb einmal an und nutze ihn mit format() bzw. formatToParts() mehrfach.
Der Konstruktor muss mit new aufgerufen werden. Ein Aufruf ohne new löst einen TypeError aus. Ungültige Sprach-Tags führen zu einem RangeError, ebenso ungültige Optionswerte.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $locales | string | string[] | Intl.Locale | undefined | Standardsprache der Laufzeitumgebung | BCP-47-Sprach-Tag (z. B. "de", "de-AT") oder eine Liste davon, nach Priorität geordnet. Die Unicode-Erweiterung -u-nu- (Zahlensystem) wird unterstützt. |
| $options | object | {} | Konfigurationsobjekt mit folgenden Eigenschaften:
style ab. |
Rückgabewert
Intl.DurationFormat-Instanz mit den Methoden format(), formatToParts() und resolvedOptions().Beispiele
Formatierer anlegen und Stile vergleichen
const dauer = { hours: 1, minutes: 46, seconds: 40 };
for (const style of ["long", "short", "narrow", "digital"]) {
const df = new Intl.DurationFormat("en", { style });
console.log(style, "→", df.format(dauer));
}
Videolänge auf Deutsch aus Sekunden anzeigen
const df = new Intl.DurationFormat("de", { style: "long" });
const sekundenZuDauer = (total) => ({
hours: Math.floor(total / 3600),
minutes: Math.floor((total % 3600) / 60),
seconds: total % 60,
});
console.log(df.format(sekundenZuDauer(6400)));
console.log(df.format(sekundenZuDauer(125))); // Stunden = 0 wird weggelassen
Stoppuhr im Digitalformat mit Nachkommastellen
const stoppuhr = new Intl.DurationFormat("de", {
style: "digital",
hoursDisplay: "always",
fractionalDigits: 2,
});
console.log(stoppuhr.format({ minutes: 3, seconds: 7, milliseconds: 450 }));
console.log(stoppuhr.resolvedOptions().style);
Funktionsprüfung mit Rückfall
const formatiereDauer = (dauer, locale = "de") => {
if (typeof Intl.DurationFormat === "function") {
return new Intl.DurationFormat(locale, { style: "short" }).format(dauer);
}
// Einfacher Rückfall für ältere Browser
return `${dauer.minutes ?? 0} min ${dauer.seconds ?? 0} s`;
};
console.log(Intl.DurationFormat.supportedLocalesOf(["de", "fr", "xx"]));
console.log(formatiereDauer({ minutes: 12, seconds: 30 }));