Zeitspannen wie 2 Stunden 30 Minuten formatieren
Dauern in der Sprache der Benutzer mit automatischer Lokalisierung anzeigen
Einführung
Wenn Sie anzeigen, wie lange etwas dauert, müssen Sie diese Dauer so darstellen, dass Benutzer sie verstehen. Ein Video zeigt eine Laufzeit von 2 Stunden 30 Minuten, eine Workout-App erfasst die Trainingsdauer, ein Projektmanagement-Tool zeigt die Aufgabenerledigungszeit an. Ohne Lokalisierung könnten Sie Code wie diesen schreiben:
const hours = 2;
const minutes = 30;
const timeSpan = `${hours}h ${minutes}m`;
Dies erzeugt "2h 30m" für alle Benutzer unabhängig von der Sprache. Französische Benutzer sehen "2h 30m", wenn sie "2 h 30 min" erwarten. Deutsche Benutzer sehen englische Abkürzungen anstelle von "2 Std. 30 Min.". Spanische Benutzer erhalten keine "y"-Konjunktion zwischen den Einheiten.
JavaScript stellt die Intl.DurationFormat-API bereit, um Zeitspannen entsprechend der Sprache und den kulturellen Konventionen der Benutzer zu formatieren. Diese Lektion erklärt, wie Sie Dauerformatierer erstellen, Dauerobjekte aufbauen und Zeitspannen für jedes Gebietsschema korrekt anzeigen.
Was Zeitspannen sind
Eine Zeitspanne stellt eine Zeitdauer dar, nicht einen Zeitpunkt. Die Zahl 150 Minuten ist eine Dauer. Der 15. März 2025 um 14:30 Uhr ist ein Datum und eine Uhrzeit.
Diese Unterscheidung ist wichtig, weil Daten Kalender, Zeitzonen und historische Regeln beinhalten. Zeitspannen messen verstrichene Zeit ohne Kalenderkontext. Sie können einer Dauer keine Zeitzone hinzufügen, weil Dauern unabhängig von einem bestimmten Moment existieren.
Verwenden Sie Intl.DurationFormat für Zeitspannen. Verwenden Sie Intl.DateTimeFormat für Daten und Uhrzeiten. Verwenden Sie Intl.RelativeTimeFormat für relative Ausdrücke wie "vor 2 Stunden".
Einen Dauerformatierer erstellen
Der Intl.DurationFormat-Konstruktor nimmt ein Gebietsschema und ein Optionsobjekt entgegen. Das Gebietsschema bestimmt die Ausgabesprache. Die Optionen steuern den Formatierungsstil und die Einheitendarstellung.
const formatter = new Intl.DurationFormat('en', { style: 'long' });
Rufen Sie format() mit einem Dauerobjekt auf, um eine formatierte Zeichenkette zu erzeugen. Das Dauerobjekt enthält numerische Eigenschaften für Zeiteinheiten.
const duration = { hours: 2, minutes: 30 };
formatter.format(duration);
// "2 hours and 30 minutes"
Die API behandelt Abkürzungen, Konjunktionen, Wortreihenfolge und Abstände automatisch basierend auf dem Gebietsschema.
Dauerobjekte erstellen
Ein Dauerobjekt ist ein einfaches JavaScript-Objekt mit Eigenschaften für Zeiteinheiten. Fügen Sie nur die Einheiten hinzu, die Sie anzeigen möchten.
const duration1 = { hours: 2, minutes: 30 };
const duration2 = { minutes: 5, seconds: 45 };
const duration3 = { hours: 1, minutes: 15, seconds: 30 };
Die API unterstützt diese Zeiteinheiten: years, months, weeks, days, hours, minutes, seconds, milliseconds, microseconds, nanoseconds.
Sie müssen nicht alle Einheiten angeben. Lassen Sie jede Einheit weg, die Sie nicht anzeigen möchten.
const formatter = new Intl.DurationFormat('en', { style: 'long' });
formatter.format({ hours: 2, minutes: 30 });
// "2 hours and 30 minutes"
formatter.format({ minutes: 30 });
// "30 minutes"
formatter.format({ hours: 2 });
// "2 hours"
Einen Formatierungsstil wählen
Die style-Option steuert die Ausgabedichte. Vier Stile sind verfügbar: long, short, narrow und digital.
Der lange Stil verwendet vollständige Wörter. Verwenden Sie diesen für Fließtext und Hauptinhaltsbereiche.
const duration = { hours: 2, minutes: 30 };
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// "2 hours and 30 minutes"
Der kurze Stil verwendet gängige Abkürzungen. Verwenden Sie diesen, wenn der Platz begrenzt ist, aber die Lesbarkeit wichtig bleibt.
new Intl.DurationFormat('en', { style: 'short' }).format(duration);
// "2 hr and 30 min"
Der schmale Stil verwendet minimale Zeichen. Verwenden Sie diesen für kompakte Anzeigen wie mobile Benutzeroberflächen oder Datentabellen.
new Intl.DurationFormat('en', { style: 'narrow' }).format(duration);
// "2h 30m"
Der digitale Stil erzeugt eine timer-ähnliche Ausgabe mit Doppelpunkten. Verwenden Sie diesen für Mediaplayer und Countdown-Anzeigen.
new Intl.DurationFormat('en', { style: 'digital' }).format(duration);
// "2:30:00"
Der digitale Stil erfordert, dass Sie alle Einheiten von der größten bis zur kleinsten angeben. Wenn Sie Stunden und Minuten formatieren, müssen Sie auch Sekunden einschließen.
Zeitspannen in verschiedenen Sprachen formatieren
Dieselbe Zeitspanne wird in jeder Sprache unterschiedlich formatiert. Die API übernimmt die gesamte Lokalisierung automatisch.
const duration = { hours: 2, minutes: 30 };
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// "2 hours and 30 minutes"
new Intl.DurationFormat('fr', { style: 'long' }).format(duration);
// "2 heures et 30 minutes"
new Intl.DurationFormat('de', { style: 'long' }).format(duration);
// "2 Stunden und 30 Minuten"
new Intl.DurationFormat('es', { style: 'long' }).format(duration);
// "2 horas y 30 minutos"
new Intl.DurationFormat('ja', { style: 'long' }).format(duration);
// "2時間30分"
Beachten Sie, wie jede Locale unterschiedliche Wörter und Konjunktionen verwendet. Französisch verwendet "et", Deutsch verwendet "und", Spanisch verwendet "y", Japanisch verwendet keine Konjunktionen. Die API kennt diese Regeln für jede Locale.
Kurze und schmale Stile werden ebenfalls korrekt lokalisiert.
new Intl.DurationFormat('fr', { style: 'short' }).format(duration);
// "2 h et 30 min"
new Intl.DurationFormat('de', { style: 'narrow' }).format(duration);
// "2 Std. 30 Min."
Zeitspannen für die Locale des Benutzers formatieren
Anstatt eine Locale fest zu codieren, verwenden Sie die bevorzugte Sprache des Benutzers aus dem Browser. Die Eigenschaft navigator.language gibt die bevorzugte Sprache des Benutzers zurück.
const userLocale = navigator.language;
const formatter = new Intl.DurationFormat(userLocale, { style: 'short' });
const duration = { hours: 2, minutes: 30 };
formatter.format(duration);
// Output varies by user's locale
// For en-US: "2 hr and 30 min"
// For de-DE: "2 Std. und 30 Min."
// For fr-FR: "2 h et 30 min"
Dies zeigt Zeitspannen entsprechend den Erwartungen jedes Benutzers an, ohne dass eine manuelle Locale-Auswahl erforderlich ist.
Millisekunden in Duration-Objekte konvertieren
Zeitberechnungen erzeugen häufig Millisekunden. Konvertieren Sie Millisekunden in Duration-Objekte, indem Sie durch die entsprechenden Faktoren dividieren.
const milliseconds = 9000000; // 2 hours 30 minutes
const hours = Math.floor(milliseconds / 3600000);
const minutes = Math.floor((milliseconds % 3600000) / 60000);
const seconds = Math.floor((milliseconds % 60000) / 1000);
const duration = { hours, minutes, seconds };
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// "2 hours, 30 minutes and 0 seconds"
Lassen Sie Nullwerte weg, es sei denn, Sie möchten sie ausdrücklich anzeigen.
const duration = {};
if (hours > 0) duration.hours = hours;
if (minutes > 0) duration.minutes = minutes;
if (seconds > 0) duration.seconds = seconds;
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// "2 hours and 30 minutes"
Zeitspannen aus zwei Daten berechnen
Berechnen Sie die Dauer zwischen zwei Daten, indem Sie Zeitstempel subtrahieren und das Ergebnis dann in ein Duration-Objekt konvertieren.
const startTime = new Date('2025-10-15T10:00:00');
const endTime = new Date('2025-10-15T12:30:00');
const diffMs = endTime - startTime;
const hours = Math.floor(diffMs / 3600000);
const minutes = Math.floor((diffMs % 3600000) / 60000);
const duration = { hours, minutes };
new Intl.DurationFormat('en', { style: 'short' }).format(duration);
// "2 hr and 30 min"
Dieser Ansatz funktioniert für jede Zeitberechnung, die Millisekunden erzeugt.
Videoplayer-Dauern formatieren
Videoplayer zeigen die Dauer in den Steuerelementen an. Verwenden Sie den digitalen oder schmalen Stil für eine kompakte Anzeige.
function formatVideoDuration(totalSeconds) {
const hours = Math.floor(totalSeconds / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = Math.floor(totalSeconds % 60);
const duration = hours > 0
? { hours, minutes, seconds }
: { minutes, seconds };
const locale = navigator.language;
return new Intl.DurationFormat(locale, { style: 'digital' }).format(duration);
}
formatVideoDuration(9000); // "2:30:00"
formatVideoDuration(330); // "5:30"
Dies schließt Stunden nur bei Bedarf ein und zeigt "5:30" für kurze Videos und "2:30:00" für längere Inhalte an.
Trainingszeiten formatieren
Fitness-Apps erfassen die Trainingsdauer. Verwenden Sie den langen Stil für Sitzungszusammenfassungen und den schmalen Stil für kompakte Listenansichten.
function formatWorkoutDuration(startTime, endTime, locale) {
const diffMs = endTime - startTime;
const hours = Math.floor(diffMs / 3600000);
const minutes = Math.floor((diffMs % 3600000) / 60000);
const duration = hours > 0
? { hours, minutes }
: { minutes };
return new Intl.DurationFormat(locale, { style: 'long' }).format(duration);
}
const workoutStart = new Date('2025-10-15T07:00:00');
const workoutEnd = new Date('2025-10-15T09:30:00');
formatWorkoutDuration(workoutStart, workoutEnd, 'en');
// "2 hours and 30 minutes"
formatWorkoutDuration(workoutStart, workoutEnd, 'es');
// "2 horas y 30 minutos"
Projektaufgaben-Dauern formatieren
Projektmanagement-Tools zeigen an, wie lange Aufgaben dauern. Verwenden Sie den kurzen Stil für Dashboard-Anzeigen.
function formatTaskDuration(minutes, locale) {
const hours = Math.floor(minutes / 60);
const mins = minutes % 60;
const duration = {};
if (hours > 0) duration.hours = hours;
if (mins > 0) duration.minutes = mins;
return new Intl.DurationFormat(locale, { style: 'short' }).format(duration);
}
formatTaskDuration(150, 'en');
// "2 hr and 30 min"
formatTaskDuration(45, 'en');
// "45 min"
formatTaskDuration(150, 'de');
// "2 Std. und 30 Min."
Verschiedene Zeiteinheiten formatieren
Zeitspannen sind nicht auf Stunden und Minuten beschränkt. Formatieren Sie jede Kombination unterstützter Einheiten.
const formatter = new Intl.DurationFormat('en', { style: 'long' });
formatter.format({ days: 3, hours: 2 });
// "3 days and 2 hours"
formatter.format({ minutes: 45, seconds: 30 });
// "45 minutes and 30 seconds"
formatter.format({ hours: 1, minutes: 30, seconds: 45 });
// "1 hour, 30 minutes and 45 seconds"
Die API verarbeitet die entsprechenden Konjunktionen und Trennzeichen für jede Kombination von Einheiten.
Zeitspannen nur mit Sekunden formatieren
Wenn Ihre Dauer weniger als eine Minute beträgt, geben Sie nur Sekunden an.
const formatter = new Intl.DurationFormat('en', { style: 'short' });
formatter.format({ seconds: 45 });
// "45 sec"
formatter.format({ seconds: 5 });
// "5 sec"
Bei sehr kurzen Dauern können Sie Millisekunden einbeziehen.
formatter.format({ seconds: 5, milliseconds: 500 });
// "5 sec and 500 ms"
Formatter-Instanzen für bessere Performance wiederverwenden
Das Erstellen eines neuen Formatters erfordert das Laden von Locale-Daten und die Verarbeitung von Optionen. Wenn Sie mehrere Zeitspannen mit demselben Locale und Stil formatieren, erstellen Sie den Formatter einmal und verwenden Sie ihn wieder.
const formatter = new Intl.DurationFormat('en', { style: 'short' });
const durations = [
{ hours: 1, minutes: 30 },
{ hours: 2, minutes: 15 },
{ minutes: 45 }
];
durations.map(d => formatter.format(d));
// ["1 hr and 30 min", "2 hr and 15 min", "45 min"]
Dieses Muster verbessert die Performance beim Formatieren vieler Dauern in Schleifen oder wiederholten Renderings.
Browser-Unterstützung
Die Intl.DurationFormat-API wurde im März 2025 zur Baseline. Sie funktioniert in den neuesten Versionen von Chrome, Edge, Firefox und Safari. Ältere Browser unterstützen diese API nicht.
Prüfen Sie die Unterstützung, bevor Sie die API verwenden.
if (typeof Intl.DurationFormat !== 'undefined') {
const formatter = new Intl.DurationFormat('en', { style: 'short' });
return formatter.format(duration);
} else {
return `${duration.hours}h ${duration.minutes}m`;
}
Dies bietet einen Fallback für ältere Browser und nutzt gleichzeitig die native API, wenn verfügbar.