Wie man Zeitspannen wie 2 Stunden 30 Minuten formatiert
Zeige Zeitdauern in der Sprache des Benutzers mit automatischer Lokalisierung an
Einführung
Wenn Sie anzeigen, wie lange etwas dauert, müssen Sie diese Zeitspanne auf eine für Benutzer verständliche Weise darstellen. Ein Video zeigt eine Laufzeit von 2 Stunden 30 Minuten, eine Workout-App verfolgt die Übungsdauer, 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 anstatt "2 Std. 30 Min". Spanische Benutzer erhalten keine "y"-Konjunktion zwischen den Einheiten.
JavaScript bietet die Intl.DurationFormat-API, um Zeitspannen gemäß der Sprache und kulturellen Konventionen des Benutzers zu formatieren. Diese Lektion erklärt, wie man Dauerformatierer erstellt, Dauerobjekte aufbaut und Zeitspannen korrekt für jede Locale anzeigt.
Was Zeitspannen sind
Eine Zeitspanne repräsentiert eine Zeitdauer, 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.
Dieser Unterschied ist wichtig, weil Datumsangaben Kalender, Zeitzonen und historische Regeln beinhalten. Zeitspannen messen verstrichene Zeit ohne Kalenderkontext. Sie können einer Dauer keine Zeitzone hinzufügen, da Dauern unabhängig von einem bestimmten Moment existieren.
Verwenden Sie Intl.DurationFormat für Zeitspannen. Verwenden Sie Intl.DateTimeFormat für Datums- und Zeitangaben. Verwenden Sie Intl.RelativeTimeFormat für relative Ausdrücke wie "vor 2 Stunden".
Einen Dauerformatierer erstellen
Der Intl.DurationFormat-Konstruktor nimmt eine Locale und ein Options-Objekt entgegen. Die Locale bestimmt die Ausgabesprache. Die Optionen steuern den Formatierungsstil und die Einheitenanzeige.
const formatter = new Intl.DurationFormat('en', { style: 'long' });
Rufen Sie format() mit einem Dauerobjekt auf, um eine formatierte Zeichenfolge 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 der Locale.
Dauer-Objekte erstellen
Ein Dauer-Objekt ist ein einfaches JavaScript-Objekt mit Eigenschaften für Zeiteinheiten. Fügen Sie nur die Einheiten ein, 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 folgende 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"
Formatierungsstil auswählen
Die Option style 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 ist.
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
Die gleiche Zeitspanne wird in jeder Sprache unterschiedlich formatiert. Die API übernimmt automatisch die gesamte Lokalisierung.
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);
// Ausgabe variiert je nach Locale des Benutzers
// Für en-US: "2 hr and 30 min"
// Für de-DE: "2 Std. und 30 Min."
// Für 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 Dauer-Objekte umwandeln
Zeitberechnungen erzeugen oft Millisekunden. Konvertieren Sie Millisekunden in Dauer-Objekte, indem Sie durch die entsprechenden Faktoren teilen.
const milliseconds = 9000000; // 2 Stunden 30 Minuten
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 Datumsangaben berechnen
Berechnen Sie die Dauer zwischen zwei Datumsangaben, indem Sie Zeitstempel subtrahieren und dann das Ergebnis in ein Dauer-Objekt umwandeln.
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.
Formatierung von Videoplayer-Dauern
Videoplayer zeigen die Dauer in den Steuerungselementen 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.
Formatierung von Trainingsdauern
Fitness-Apps verfolgen 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"
Formatierung von Projektaufgabendauern
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."
Formatierung verschiedener Zeiteinheiten
Zeitspannen sind nicht auf Stunden und Minuten beschränkt. Formatieren Sie jede Kombination von unterstützten 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 mit nur Sekunden formatieren
Wenn deine Zeitdauer weniger als eine Minute beträgt, gib nur Sekunden an.
const formatter = new Intl.DurationFormat('en', { style: 'short' });
formatter.format({ seconds: 45 });
// "45 sec"
formatter.format({ seconds: 5 });
// "5 sec"
Für sehr kurze Zeitspannen kannst du Millisekunden einbeziehen.
formatter.format({ seconds: 5, milliseconds: 500 });
// "5 sec and 500 ms"
Formatter-Instanzen zur Leistungsoptimierung wiederverwenden
Das Erstellen eines neuen Formatters erfordert das Laden von Gebietsschema-Daten und die Verarbeitung von Optionen. Wenn du mehrere Zeitspannen mit demselben Gebietsschema und Stil formatierst, erstelle den Formatter einmal und verwende 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 Leistung beim Formatieren vieler Zeitspannen in Schleifen oder wiederholten Renderings.
Browser-Unterstützung
Die Intl.DurationFormat API wurde im März 2025 zum Standard. Sie funktioniert in den neuesten Versionen von Chrome, Edge, Firefox und Safari. Ältere Browser unterstützen diese API nicht.
Überprüfe die Unterstützung, bevor du die API verwendest.
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.