So stellst du Zeitdauern kurz oder lang dar

Einführung

Wenn du darstellst, wie lange etwas dauert, braucht das Format unterschiedlich viel Platz. Eine Trainingsdauer von 1 Stunde und 30 Minuten kann als „1 Stunde und 30 Minuten“, „1 Std. und 30 Min.“ oder „1h 30m“ erscheinen, je nachdem, wie viel Platz du hast und wie deutlich die Anzeige sein soll. Jedes Format balanciert Lesbarkeit gegen Platzbedarf.

Verschiedene Kontexte erfordern unterschiedliche Formatierungen. Eine Videoplayer-Steuerleiste profitiert von kompaktem Text wie „1h 30m“. Ein Trainings-Überblick, der die Sitzungsdauer erklärt, braucht eindeutigen Text wie „1 Stunde und 30 Minuten“. Ein mobiles Dashboard, das mehrere Timerwerte zeigt, verwendet die kompakteste Form, um möglichst viele Infos auf dem Bildschirm unterzubringen.

JavaScripts Intl.DurationFormat stellt die Option style bereit, um diese Auswahl zu steuern. Du kannst zwischen einer langen Schreibweise mit ausgeschriebenen Wörtern, einer kurzen Variante mit Standardabkürzungen oder einer besonders kompakten Darstellung wählen. Diese Option gibt dir die volle Kontrolle darüber, wie Zeitdauern für Nutzer angezeigt werden.

Was die style-Option steuert

Die Option style in Intl.DurationFormat akzeptiert drei Werte für textbasierte Formatierung: "long", "short" und "narrow". Jeder Wert sorgt für einen anderen Grad an Ausführlichkeit in der Anzeige der Zeitdauer.

Der Wert „long“ schreibt komplette Einheitennamen wie „1 Stunde und 30 Minuten“ aus. „short“ verwendet Standardabkürzungen wie „1 Std. und 30 Min.“. „narrow“ liefert die kompakteste Darstellung wie „1h 30m“, oft ohne Leerzeichen und mit minimalen Symbolen.

const duration = { hours: 1, minutes: 30 };

const longFormatter = new Intl.DurationFormat("en-US", {
  style: "long"
});

console.log(longFormatter.format(duration));
// Output: "1 hour and 30 minutes"

const shortFormatter = new Intl.DurationFormat("en-US", {
  style: "short"
});

console.log(shortFormatter.format(duration));
// Output: "1 hr and 30 min"

const narrowFormatter = new Intl.DurationFormat("en-US", {
  style: "narrow"
});

console.log(narrowFormatter.format(duration));
// Output: "1h 30m"

Die Option style ist standardmäßig auf "short" gesetzt, wenn du sie nicht angibst. Das bedeutet, dass die Dauerformatierung standardmäßig Abkürzungen verwendet, sofern du keinen anderen Anzeige-Stil wählst.

Dauern im Langformat darstellen

Das Langformat schreibt die vollständigen Namen der Zeiteinheiten aus. Diese Darstellung bietet maximale Klarheit, benötigt aber mehr Platz in der Zeile.

const formatter = new Intl.DurationFormat("en-US", {
  style: "long"
});

const duration = { hours: 2, minutes: 30 };

console.log(formatter.format(duration));
// Output: "2 hours and 30 minutes"

Der Formatter kümmert sich automatisch um Singular und Plural. Bei einer Stunde wird der Singular "Stunde" verwendet, bei mehreren Stunden der Plural "Stunden". Du musst die richtige Form nicht selbst auswählen.

const formatter = new Intl.DurationFormat("en-US", {
  style: "long"
});

console.log(formatter.format({ hours: 1, minutes: 30 }));
// Output: "1 hour and 30 minutes"

console.log(formatter.format({ hours: 2, minutes: 1 }));
// Output: "2 hours and 1 minute"

Jede Zeiteinheit wird ausgeschrieben, unabhängig davon, wie viele Einheiten im Zeitraum vorkommen.

const formatter = new Intl.DurationFormat("en-US", {
  style: "long"
});

console.log(formatter.format({ hours: 2, minutes: 30, seconds: 45 }));
// Output: "2 hours, 30 minutes and 45 seconds"

console.log(formatter.format({ minutes: 5, seconds: 30 }));
// Output: "5 minutes and 30 seconds"

console.log(formatter.format({ hours: 1, minutes: 0, seconds: 15 }));
// Output: "1 hour, 0 minutes and 15 seconds"

Der Formatter fügt passende Konjunktionen zwischen den Einheiten ein. Im Englischen werden Kommas und "and" genutzt, um Einheiten zu trennen. Die Konjunktion erscheint vor der letzten Einheit in der Aufzählung.

Das Langformat macht Zeitangaben sofort verständlich, ohne dass Nutzer Abkürzungen interpretieren müssen. Anwender, die mit Zeitabkürzungen nicht vertraut sind, finden ausgeschriebene Einheiten leichter zugänglich.

Dauern im Kurzformat darstellen

Das Kurzformat nutzt geläufige Abkürzungen, die den meisten bekannt sind. Diese Variante ist ein guter Kompromiss aus Lesbarkeit und Platzeffizienz.

const formatter = new Intl.DurationFormat("en-US", {
  style: "short"
});

const duration = { hours: 2, minutes: 30 };

console.log(formatter.format(duration));
// Output: "2 hr and 30 min"

Der Formatter verwendet allgemein anerkannte Abkürzungen: Stunden werden zu "Std", Minuten zu "min" und Sekunden zu "s". Diese Kürzel bleiben lesbar und sparen gleichzeitig Zeichen.

const formatter = new Intl.DurationFormat("en-US", {
  style: "short"
});

console.log(formatter.format({ hours: 1, minutes: 46, seconds: 40 }));
// Output: "1 hr, 46 min and 40 sec"

console.log(formatter.format({ minutes: 5, seconds: 30 }));
// Output: "5 min and 30 sec"

console.log(formatter.format({ hours: 3, minutes: 15 }));
// Output: "3 hr and 15 min"

Das Kurzformat ist die Standardeinstellung. Wenn du die Option style weglässt, nutzt der Formatter automatisch das Kurzformat.

const formatter = new Intl.DurationFormat("en-US");

console.log(formatter.format({ hours: 2, minutes: 30 }));
// Output: "2 hr and 30 min"

Durch diese Standardeinstellung kannst du schnell und unkompliziert Abkürzungen nutzen, ohne den Stil explizit angeben zu müssen.

Du kannst verschiedene Dauer-Typen mit dem Kurzformat formatieren und direkt die gängigen Abkürzungen sehen.

const formatter = new Intl.DurationFormat("en-US", {
  style: "short"
});

console.log(formatter.format({ days: 2, hours: 5 }));
// Output: "2 days and 5 hr"

console.log(formatter.format({ weeks: 1, days: 3 }));
// Output: "1 wk and 3 days"

console.log(formatter.format({ hours: 1, minutes: 30, seconds: 45, milliseconds: 500 }));
// Output: "1 hr, 30 min, 45 sec and 500 ms"

Jede Einheit verwendet ihre übliche Abkürzung: Tage bleiben "Tage", Wochen werden zu "Wo", und Millisekunden zu "ms". Diese Abkürzungen sind allgemein verständlich und funktionieren in den meisten Situationen gut.

Zeitdauern mit schmalem Stil formatieren

Der schmale Stil bietet die kompakteste Darstellung. In diesem Format werden Leerzeichen entfernt und minimale Symbole verwendet, um jeden Buchstabenplatz zu sparen.

const formatter = new Intl.DurationFormat("en-US", {
  style: "narrow"
});

const duration = { hours: 2, minutes: 30 };

console.log(formatter.format(duration));
// Output: "2h 30m"

Der Formatter nutzt Ein-Buchstaben-Abkürzungen und minimiert den Abstand. Stunden werden zu "h", Minuten zu "m" und Sekunden zu "s". Das Ergebnis ist deutlich kompakter als der kurze oder lange Stil.

const formatter = new Intl.DurationFormat("en-US", {
  style: "narrow"
});

console.log(formatter.format({ hours: 1, minutes: 46, seconds: 40 }));
// Output: "1h 46m 40s"

console.log(formatter.format({ minutes: 5, seconds: 30 }));
// Output: "5m 30s"

console.log(formatter.format({ hours: 3, minutes: 15 }));
// Output: "3h 15m"

Verschiedene Einheiten erhalten schmale Darstellungen entsprechend den gängigen Standards.

const formatter = new Intl.DurationFormat("en-US", {
  style: "narrow"
});

console.log(formatter.format({ days: 2, hours: 5 }));
// Output: "2d 5h"

console.log(formatter.format({ weeks: 1, days: 3 }));
// Output: "1w 3d"

console.log(formatter.format({ hours: 1, minutes: 30, seconds: 45, milliseconds: 500 }));
// Output: "1h 30m 45s 500ms"

Der schmale Stil eignet sich besonders, wenn sehr wenig Platz verfügbar ist und die Nutzer:innen mit dem Kontext der Zeiteinheit vertraut sind. Das komprimierte Format setzt voraus, dass die Einheiten ohne zusätzliche Trennung oder Erklärung verstanden werden.

Langen, kurzen und schmalen Stil vergleichen

Die Unterschiede zwischen den drei Stiloptionen werden deutlich, wenn du dieselbe Dauer mit jeder Option formatierst.

const longFormatter = new Intl.DurationFormat("en-US", {
  style: "long"
});

const shortFormatter = new Intl.DurationFormat("en-US", {
  style: "short"
});

const narrowFormatter = new Intl.DurationFormat("en-US", {
  style: "narrow"
});

const duration = { hours: 1, minutes: 30, seconds: 45 };

console.log("Long:   " + longFormatter.format(duration));
console.log("Short:  " + shortFormatter.format(duration));
console.log("Narrow: " + narrowFormatter.format(duration));

// Output:
// Long:   1 hour, 30 minutes and 45 seconds
// Short:  1 hr, 30 min and 45 sec
// Long:   1h 30m 45s

Langer Stil verwendet ausgeschriebene Wörter und explizite Bindewörter. Kurzer Stil nutzt gängige Abkürzungen mit Bindewörtern. Schmaler Stil verwendet einzelne Buchstaben mit minimalem Abstand. Diese Entwicklung zeigt die Abwägung zwischen Klarheit und Platzersparnis.

Du kannst verschiedene Dauern vergleichen, um zu sehen, wie jeder Stil mit unterschiedlichen Zeitspannen umgeht.

const durations = [
  { hours: 2, minutes: 15 },
  { minutes: 5, seconds: 30 },
  { hours: 1, minutes: 0, seconds: 10 },
  { days: 1, hours: 3, minutes: 45 }
];

durations.forEach(duration => {
  const long = new Intl.DurationFormat("en-US", {
    style: "long"
  }).format(duration);

  const short = new Intl.DurationFormat("en-US", {
    style: "short"
  }).format(duration);

  const narrow = new Intl.DurationFormat("en-US", {
    style: "narrow"
  }).format(duration);

  console.log("Duration:");
  console.log("  Long:   " + long);
  console.log("  Short:  " + short);
  console.log("  Narrow: " + narrow);
  console.log("");
});

// Output:
// Duration:
//   Long:   2 hours and 15 minutes
//   Short:  2 hr and 15 min
//   Narrow: 2h 15m
//
// Duration:
//   Long:   5 minutes and 30 seconds
//   Short:  5 min and 30 sec
//   Narrow: 5m 30s
//
// Duration:
//   Long:   1 hour, 0 minutes and 10 seconds
//   Short:  1 hr, 0 min and 10 sec
//   Narrow: 1h 0m 10s
//
// Duration:
//   Long:   1 day, 3 hours and 45 minutes
//   Short:  1 day, 3 hr and 45 min
//   Narrow: 1d 3h 45m

Der Unterschied bei der Zeichenzahl wird über mehrere Angaben hinweg deutlich spürbar. In einer Tabelle oder Liste mit vielen Werten spart der schmale Stil erheblich mehr Platz in der Breite als der lange Stil.

Wie sich Zeitstile in verschiedenen Sprachen unterscheiden

Alle drei Stiloptionen passen sich an das gewählte Gebietsschema an. Unterschiedliche Sprachen nutzen verschiedene Abkürzungen, Einheitenbezeichnungen, Bindewörter und Abstandsregeln.

const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];

const duration = { hours: 2, minutes: 30 };

locales.forEach(locale => {
  const longFormatter = new Intl.DurationFormat(locale, {
    style: "long"
  });

  const shortFormatter = new Intl.DurationFormat(locale, {
    style: "short"
  });

  console.log(locale + ":");
  console.log("  Long:  " + longFormatter.format(duration));
  console.log("  Short: " + shortFormatter.format(duration));
});

// Output:
// en-US:
//   Long:  2 hours and 30 minutes
//   Short: 2 hr and 30 min
// de-DE:
//   Long:  2 Stunden und 30 Minuten
//   Short: 2 Std. und 30 Min.
// fr-FR:
//   Long:  2 heures et 30 minutes
//   Short: 2 h et 30 min
// ja-JP:
//   Long:  2時間30分
//   Short: 2 時間 30 分

Langer Stil variiert stark zwischen den Sprachen, da jede Sprache eigene Wörter für Zeiteinheiten hat. Deutsch verwendet "Stunden" für hours, Französisch "heures" und Japanisch "時間". Der Formatter berücksichtigt diese grammatikalischen Unterschiede automatisch.

Auch der Kurzstil passt sich den Konventionen verschiedener Sprachen an. Im Deutschen wird "Std." für Stunden verwendet, im Französischen "h" und im Japanischen werden zwischen Zahlen und Einheitensymbolen Leerzeichen eingefügt. Diese abweichenden Abkürzungen spiegeln wider, wie unterschiedliche Kulturen Zeitangaben in komprimierter Form darstellen.

Der Formatter setzt Konjunktionen entsprechend den Sprachregeln ein. Englisch verwendet "and", Deutsch "und", Französisch "et" und im Japanischen werden Konjunktionen ganz weggelassen. So entsteht immer ein natürlicher Text in der jeweiligen Sprache.

const locales = ["en-US", "es-ES", "pt-BR"];

const duration = { hours: 1, minutes: 30, seconds: 45 };

locales.forEach(locale => {
  const narrowFormatter = new Intl.DurationFormat(locale, {
    style: "narrow"
  });

  console.log(locale + ": " + narrowFormatter.format(duration));
});

// Output:
// en-US: 1h 30m 45s
// es-ES: 1h 30min 45s
// pt-BR: 1h 30min 45s

Der Schmalstil zeigt je nach Sprache einige Unterschiede. Im Englischen werden Einbuchstabenabkürzungen wie "h", "m" und "s" verwendet. Spanisch und Portugiesisch benutzen für Minuten "min" statt nur "m". Diese Unterschiede spiegeln die länderspezifischen Vorgaben für kompakte Zeitangaben wider.

Wann der Langstil sinnvoll ist

Der Langstil ist ideal, wenn Klarheit und Barrierefreiheit wichtiger sind als Platzeffizienz. So sind Zeitangaben sofort verständlich, ohne umständliche Interpretation.

Barrierefreie Oberflächen profitieren vom Langstil, da Screenreader ausgeschriebene Wörter natürlicher wiedergeben. Wenn ein Screenreader "2 Stunden und 30 Minuten" ansagt, klingt das viel natürlicher als "2 Std. und 30 Min.", was eventuell unnatürlich vorgelesen oder einer besonderen Leseanpassung bedarf.

Lerninhalte profitieren vom Langstil, weil nicht jeder Zeitabkürzungen kennt. In Lernmaterialien sollten Einheiten ausgeschrieben werden, um Missverständnisse zu vermeiden.

Trainingszusammenfassungen und Sitzungsberichte setzen auf den Langstil, um einen klaren und professionellen Ton zu wahren. Eine Fitness-App liest sich mit "1 Stunde und 15 Minuten" wesentlich angenehmer als mit "1h 15m".

Formale Berichte und Dokumentationen verwenden den Langstil, um einheitlichen Schreibstil sicherzustellen. Geschäftsberichte, medizinische Akten und offizielle Dokumente schreiben Zeitangaben gewöhnlich aus, statt sie abzukürzen.

Internationale Nutzer profitieren vom Langformat, besonders wenn sie die Sprache gerade lernen. Ausgeschriebene Einheiten wie „Stunden“ und „Minuten“ sind für Nicht-Muttersprachler leichter verständlich als Abkürzungen.

function formatWorkoutSummary(duration, locale) {
  const formatter = new Intl.DurationFormat(locale, {
    style: "long"
  });

  return formatter.format(duration);
}

const workout = { hours: 1, minutes: 15 };

console.log("Workout duration: " + formatWorkoutSummary(workout, "en-US"));
// Output: "Workout duration: 1 hour and 15 minutes"

Das Langformat stellt das Verständnis vor die Kürze. Verwende es immer dann, wenn Nutzer die Dauer eindeutig erkennen sollen – ohne Rätselraten oder Interpretationsaufwand.

Wann das Kurzformat verwenden

Das Kurzformat eignet sich am besten, wenn der Platz knapp ist, Abkürzungen aber allgemein bekannt sind. Es ist die gängigste Wahl für Allzweck-Anwendungen.

Mobile Oberflächen profitieren vom Kurzformat, weil der Platz auf dem Bildschirm begrenzt ist. Dashboard-Karten mit mehreren Timern brauchen kompakte Zeitangaben, damit alle Infos auf dem Display Platz finden. "2 Std. 30 Min." statt "2 Stunden und 30 Minuten" spart pro Angabe 17 Zeichen – das summiert sich bei mehreren Einträgen.

Videoplayer-Steuerelemente nutzen das Kurzformat, um die Dauer anzuzeigen, ohne die Oberfläche zu überladen. "1 Std. 46 Min." in der Steuerleiste ist kompakter als "1 Stunde und 46 Minuten" und bleibt dabei klar verständlich.

Datentabellen mit Dauern in Spalten benötigen gleichmäßige Breiten. Kurze Abkürzungen wie "Std.", "Min." und "Sek." halten die Spalten schmal. Lange Ausdrücke wie "Stunden", "Minuten" und "Sekunden" würden unnötig verbreitern.

Timer-Apps nutzen das Kurzformat, weil die Nutzer die Zeit-Kürzel kennen. Ein Countdown mit "5 Min. 30 Sek." sorgt für Klarheit und schont zugleich den Platz auf dem Display.

Flugbuchungsseiten verwenden das Kurzformat für die Reisezeit. "8 Std. 15 Min." wird in den Suchergebnissen deutlicher dargestellt als "8h 15m" und ist dennoch kürzer als "8 Stunden und 15 Minuten".

function formatFlightDuration(duration, locale) {
  const formatter = new Intl.DurationFormat(locale, {
    style: "short"
  });

  return formatter.format(duration);
}

const flight = { hours: 8, minutes: 15 };

console.log(formatFlightDuration(flight, "en-US"));
// Output: "8 hr and 15 min"

Der kurze Stil bietet eine gute Balance zwischen Verständlichkeit und Effizienz. Die meisten Nutzer erkennen übliche Abkürzungen wie Std., Min. und Sek. problemlos.

Wann sollte der schmale Stil verwendet werden?

Der schmale Stil eignet sich besonders, wenn der Platz extrem begrenzt ist und die Nutzer sehr vertraut mit Zeitangaben sind.

Kompakte Widgets, die nur eine Kennzahl zeigen, können den schmalen Stil nutzen, wenn wirklich wenig Platz zur Verfügung steht. Ein Timer-Widget, das "5m 30s" in großer Schrift zeigt, passt besser als "5 Minuten und 30 Sekunden".

Datenvisualisierungen mit hoher Informationsdichte profitieren vom schmalen Stil. Diagrammbeschriftungen, Graphen-Anmerkungen und Overlays brauchen möglichst wenig Text, um die eigentlichen Inhalte nicht zu verdecken. "2h 30m" statt "2 Std. und 30 Min." spart Zeichen und bleibt trotzdem für Nutzer im Kontext verständlich.

Mobile Startseiten-Widgets mit wenig Platz verwenden den schmalen Stil, um möglichst viele Informationen unterzubringen. Ein Trainings-Widget, das mehrere Sitzungen auf einer kleinen Kachel zeigt, profitiert von einer kompakten Zeitdarstellung.

Smartwatch-Oberflächen setzen auf den schmalen Stil, weil der Bildschirm extrem klein ist. "1h 15m" lässt sich auf einem kleinen, runden Bildschirm besser anzeigen als längere Formate.

Listenansichten mit vielen Elementen und Zeitangaben können durch den schmalen Stil jede Zeile kompakt halten. Musik-Playlists mit Songlängen, Videolisten mit Laufzeiten oder Übungslisten mit Dauer pro Übung profitieren alle von minimalen Angaben.

function formatVideoPlaylist(videos, locale) {
  const formatter = new Intl.DurationFormat(locale, {
    style: "narrow"
  });

  return videos.map(video => ({
    title: video.title,
    duration: formatter.format(video.duration)
  }));
}

const playlist = [
  { title: "Introduction", duration: { minutes: 2, seconds: 30 } },
  { title: "Getting Started", duration: { minutes: 5, seconds: 15 } },
  { title: "Advanced Topics", duration: { hours: 1, minutes: 10 } }
];

console.log(formatVideoPlaylist(playlist, "en-US"));
// Output:
// [
//   { title: "Introduction", duration: "2m 30s" },
//   { title: "Getting Started", duration: "5m 15s" },
//   { title: "Advanced Topics", duration: "1h 10m" }
// ]

Der schmale Stil setzt voraus, dass Nutzer Zeitkürzel kennen und die Einheiten ohne weitere Hilfe verstehen. Dafür wird maximale Platzeffizienz auf Kosten der Klarheit erreicht.

Stil mit anderen Formatierungsoptionen kombinieren

Die Option style funktioniert mit allen anderen Dauer-Formatierungsoptionen. Du kannst steuern, welche Einheiten angezeigt werden, während du den Anzeigestil auswählst.

const formatter = new Intl.DurationFormat("en-US", {
  style: "long",
  hours: "numeric",
  minutes: "2-digit",
  seconds: "2-digit"
});

console.log(formatter.format({ hours: 1, minutes: 5, seconds: 3 }));
// Output: "1:05:03"

Diese Kombination zeigt Stunden im langen Stil an, verwendet aber für Minuten und Sekunden eine numerische Formatierung mit führenden Nullen. Das Ergebnis ist ein hybrides Format aus Text und Zahlen.

Du kannst einzelne Einheiten formatieren und dabei einen konsistenten Stil beibehalten.

const formatter = new Intl.DurationFormat("en-US", {
  style: "short",
  hours: "numeric",
  minutes: "numeric"
});

console.log(formatter.format({ hours: 2, minutes: 30, seconds: 45 }));
// Output: "2 hr and 30 min"

Der Formatter zeigt nur Stunden und Minuten an, auch wenn das Dauer-Objekt Sekunden enthält. So kannst du steuern, welche Einheiten in der Ausgabe erscheinen.

Du kannst eigene Formate erstellen, indem du verschiedene Einheitsstile kombinierst.

const formatter = new Intl.DurationFormat("en-US", {
  hours: "long",
  minutes: "short",
  seconds: "narrow"
});

console.log(formatter.format({ hours: 1, minutes: 30, seconds: 45 }));
// Output: "1 hour, 30 min, 45s"

Dadurch entsteht ein gemischtes Format, bei dem jede Einheit eine andere Ausführlichkeit hat. Das ist zwar ungewöhnlich, bietet dir aber die Flexibilität, spezielle Formate zu gestalten, wenn nötig.

Was du dir merken solltest

Die Option style steuert, wie Dauern beim Formatieren mit Intl.DurationFormat angezeigt werden. Setze sie auf "long" für ausgeschriebene Einheiten wie „2 Stunden und 30 Minuten“, auf "short" für Standardabkürzungen wie „2 Std. und 30 Min.“ oder auf "narrow" für kompakte Formen wie „2h 30m“. Wird die Option weggelassen, ist der Standard "short".

Benutze den langen Stil, wenn Klarheit und Barrierefreiheit wichtiger als Platz sind oder wenn Nutzer:innen mit Zeitabkürzungen nicht vertraut sind. Verwende den kurzen Stil für allgemeine Anwendungen, bei denen der Platz zählt und Standardabkürzungen bekannt sind. Nutze den schmalen Stil nur in extrem platzkritischen Kontexten, in denen die Nutzer:innen sehr vertraut mit Zeitangaben sind.

Der Formatter berücksichtigt automatisch lokale Unterschiede, darunter Einheitsnamen, Abkürzungen, Verbindungswörter, Abstandsregeln und Pluralformen. Kombiniere style mit anderen Formatierungsoptionen, um zu steuern, welche Einheiten angezeigt werden und wie diese aussehen.