HTML-Tools

Kostenlose Intl.DurationFormat Generator

Generieren Sie Intl.DurationFormat-Code fur lokalisierte Zeitdauerformatierung mit long/short/narrow/digital Stilen.

Tool wird geladen...

Was ist Intl.DurationFormat Generator?

Intl.DurationFormat ist eine eingebaute Browser-API, die Zeitdauern gemäß lokaler Konventionen formatiert. Mit einem Duration-Objekt mit Feldern wie Stunden, Minuten und Sekunden erzeugt es menschenlesbare Strings wie '1 Std. 30 Min.' (Deutsch kurz) oder '1:30:00' (digital). Es unterstützt vier Stile: long, short, narrow und digital. Verfügbar in Chrome 104+ und Teil von Baseline 2025.

Kurze Antwort

Generieren Sie Code mit Intl.DurationFormat zur Anzeige von Zeitdauern in einem lokalisierungsbewussten Format. Wählen Sie zwischen long-, short-, narrow- und digital-Stilen. Unterstützt Englisch, Deutsch, Französisch, Spanisch, Japanisch und Niederländisch. Ersetzen Sie moment-duration-format und verwenden Sie stattdessen die native API.

Last updated: 2026-06-02

Einschränkungen

Intl.DurationFormat ist Stand Mitte 2026 nicht in Safari verfügbar. Verwenden Sie ein Polyfill oder eine Fallback-Bibliothek für Safari-Benutzer oder implementieren Sie einen einfachen manuellen Formatierer für grundlegende Fälle.
Die API aggregiert Einheiten nicht automatisch - { hours: 1, minutes: 90 } formatiert als '1 Stunde, 90 Minuten', nicht '2 Stunden, 30 Minuten'. Normalisieren Sie Ihre Dauer vor dem Formatieren, wenn Sie automatische Einheitenumrechnung wünschen.
Jedes Gebietsschema bestimmt seine eigenen Formatierungsregeln und Wortwahl. Der digitale Stil erzeugt konsistente numerische Ausgabe, aber long/short/narrow-Stile können in einer Weise variieren, die die Layout-Breite beeinflusst. Testen Sie über Ihre Zielgebietschemata hinweg, um Textüberlauf zu vermeiden.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

Erstellen Sie ein Duration-Objekt mit den Zeitkomponenten, die Sie formatieren möchten: { hours: 1, minutes: 30, seconds: 0 }.
Erstellen Sie eine neue Intl.DurationFormat-Instanz mit Ihrem gewählten Gebietsschema und optionaler Stilkonfiguration.
Rufen Sie format(duration) auf der Instanz auf, um den lokalisierten String zu erhalten, oder formatToParts(duration) für ein Array formatierter Komponenten.
Experimentieren Sie mit verschiedenen Gebietsschemata und Stilen im Tool, um zu sehen, wie sich Dauer-Strings über Sprachen hinweg ändern.

Wofür du es nutzen kannst

Anzeigen der Videolänge oder Podcast-Dauer in einer lokalisierten Mediaplayer-Oberfläche.
Anzeigen der geschätzten Lesezeit oder Verarbeitungszeit im bevorzugten Sprachformat des Benutzers.
Formatieren serverseitiger Dauern (API-Antwortzeiten, Job-Laufzeiten) für internationalisierte Admin-Dashboards.

Anwendungsfalle

Praxisbeispiele

Beispiel

Lokalisierte Videodauer-Anzeige

Ein Streaming-Dienst zeigt Videolängen im Gebietsschema des Betrachters an. Englische Betrachter sehen '1 hour, 30 minutes', deutsche Betrachter sehen '1 Std. 30 Min.' und japanische Betrachter sehen '1時間30分'. Die Verwendung von Intl.DurationFormat mit dem Gebietsschema des Benutzers erledigt alle drei automatisch.

Beispiel

Countdown im Digital-Stil

Ein Event-Countdown-Timer zeigt die verbleibende Zeit im Digitalformat an: '2:15:30' für 2 Stunden, 15 Minuten, 30 Sekunden. Die Verwendung von style 'digital' mit Intl.DurationFormat erzeugt eine konsistente HH:MM:SS-Anzeige über alle Gebietsschemata hinweg.

Haufige Fehler

Ein Date-Objekt oder einen Zeitstempel an Intl.DurationFormat zu übergeben anstelle eines Duration-Objekts - die API erwartet einfache Objekte mit numerischen Dauerfeldern wie { hours: 1, minutes: 30 }, keine Zeitstempel oder Daten.
Anzunehmen, dass alle Gebietsschemata dieselbe Wortreihenfolge oder dasselbe Trennzeichen verwenden - Japanisch setzt Stunden vor Minuten ohne Worttrenner, während Englisch Kommas verwendet. Testen Sie immer Ihre Zielgebietschemata, anstatt englische Muster anzunehmen.
Den Stil 'digital' mit reinen Stunden-Dauern zu verwenden - eine Dauer von { minutes: 45, seconds: 0 } im digitalen Stil kann als '00:45:00' mit führenden Stunden angezeigt werden. Passen Sie das Duration-Objekt an, um Stunden wegzulassen, wenn Sie sie nicht anzeigen möchten.

Überprüfung

Öffnen Sie die Chrome 104+ DevTools-Konsole. Erstellen Sie new Intl.DurationFormat('en', { style: 'long' }). Rufen Sie .format({ hours: 1, minutes: 30, seconds: 15 }) auf und überprüfen Sie, dass es einen String wie '1 hour, 30 minutes, 15 seconds' zurückgibt.
Erstellen Sie eine zweite Instanz mit Gebietsschema 'de' und Stil 'short'. Formatieren Sie dieselbe Dauer und überprüfen Sie, dass die Ausgabe deutsche Abkürzungen wie 'Std.' und 'Min.' verwendet - was das lokalisierungsbewusste Verhalten bestätigt.

FAQ

Fragen zu Intl.DurationFormat Generator

Welche Dauerfelder akzeptiert Intl.DurationFormat?

Intl.DurationFormat akzeptiert ein Duration-Objekt mit den Feldern: years, months, weeks, days, hours, minutes, seconds, milliseconds, microseconds, nanoseconds. Fügen Sie nur die Felder ein, die Sie benötigen - ausgelassene Felder werden nicht angezeigt. Das Objekt kann große und kleine Einheiten mischen (z.B. Stunden und Sekunden ohne Minuten).

Wie unterscheidet sich der digitale Stil von long, short oder narrow?

Der digitale Stil formatiert die Dauer als numerische Zeitanzeige wie '1:30:00' (HH:MM:SS), ähnlich einer Digitaluhr. Der lange Stil verwendet vollständige Wörter ('1 Stunde, 30 Minuten'), kurz verwendet abgekürzte Formen ('1 Std., 30 Min.') und schmal verwendet minimale Notation ('1h 30m'). Jedes Gebietsschema definiert seine eigenen Konventionen für jeden Stil.

Unterstützt Intl.DurationFormat Bruchteile von Dauern?

Dauerwerte können Bruch- oder Dezimalzahlen sein, aber das Formatierungsverhalten variiert je nach Gebietsschema und Stil. Bruchteile von Stunden werden zum Beispiel entsprechend den lokalen Zahlenkonventionen formatiert. Für präzise Formatierung runden Sie Ihre Dauerwerte vor der Übergabe an die API auf ganze Einheiten.

Verwandte Tools