So zeigen Sie relative Zeitangaben in kurzer oder langer Form an

Einführung

Wenn Sie relative Zeitangaben wie „vor 2 Stunden“ oder „in 3 Monaten“ anzeigen, nimmt das Format unterschiedlich viel Platz ein. Ein Zeitstempel, der das Alter von Inhalten anzeigt, kann als „vor 2 Stunden“, „vor 2 Std.“ oder „vor 2h“ erscheinen – je nachdem, wie viel Platz zur Verfügung steht und wie klar die Angabe sein soll. Jedes Format stellt einen Kompromiss zwischen Lesbarkeit und horizontalem Platzbedarf dar.

Verschiedene Kontexte erfordern unterschiedliche Formatierungsentscheidungen. Ein Social-Media-Feed mit Zeitstempeln profitiert von klaren Angaben wie „vor 2 Stunden“. Ein mobiles Dashboard mit mehreren Aktivitätsindikatoren benötigt kompakte Angaben wie „vor 2h“. Eine Datenvisualisierung mit Timeline-Events verwendet die kompakteste Form, um möglichst viele Informationen auf dem Bildschirm unterzubringen.

JavaScripts Intl.RelativeTimeFormat bietet die style-Option, um diese Auswahl zu steuern. Sie können zwischen einer langen Darstellung mit ausgeschriebenen Wörtern, einer kurzen Darstellung mit Standardabkürzungen oder einer schmalen Darstellung mit der kompaktesten Form wählen. Diese Option gibt Ihnen präzise Kontrolle darüber, wie relative Zeitangaben für Nutzer:innen erscheinen.

Was die Option "style" steuert

Die style-Option in Intl.RelativeTimeFormat akzeptiert drei Werte: "long", "short" und "narrow". Jeder Wert erzeugt einen anderen Detaillierungsgrad für die relative Zeitangabe.

Der Wert "long" schreibt vollständige Wörter wie „vor 2 Stunden“ aus. Der Wert "short" verwendet Standardabkürzungen wie „vor 2 Std.“. Der Wert "narrow" erzeugt die kompakteste Darstellung wie „vor 2h“, entfernt oft Leerzeichen und nutzt minimale Symbole.

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

console.log(longFormatter.format(-2, "hour"));
// Output: "2 hours ago"

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

console.log(shortFormatter.format(-2, "hour"));
// Output: "2 hr. ago"

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

console.log(narrowFormatter.format(-2, "hour"));
// Output: "2h ago"

Die Option style verwendet standardmäßig "long", wenn sie weggelassen wird. Das bedeutet, dass die Formatierung relativer Zeiten vollständige Wörter verwendet, es sei denn, ein anderer Anzeigestil wird explizit angefordert.

Relative Zeit mit langem Stil formatieren

Der lange Stil schreibt vollständige Wörter aus. Dieses Format bietet maximale Klarheit auf Kosten von zusätzlichem horizontalen Platz.

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

console.log(formatter.format(-2, "hour"));
// Output: "2 hours ago"

console.log(formatter.format(3, "day"));
// Output: "in 3 days"

Der Formatierer behandelt automatisch Singular- und Pluralformen. Eine Stunde verwendet den Singular "Stunde", während mehrere Stunden den Plural "Stunden" verwenden. Es ist nicht erforderlich, manuell zu bestimmen, welche Form verwendet werden soll.

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

console.log(formatter.format(-1, "hour"));
// Output: "1 hour ago"

console.log(formatter.format(-2, "hour"));
// Output: "2 hours ago"

console.log(formatter.format(1, "day"));
// Output: "in 1 day"

console.log(formatter.format(5, "day"));
// Output: "in 5 days"

Jede Zeiteinheit wird vollständig ausgeschrieben, unabhängig davon, welche Einheit verwendet wird.

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

console.log(formatter.format(-30, "second"));
// Output: "30 seconds ago"

console.log(formatter.format(-5, "minute"));
// Output: "5 minutes ago"

console.log(formatter.format(-3, "month"));
// Output: "3 months ago"

console.log(formatter.format(2, "year"));
// Output: "in 2 years"

Der lange Stil macht relative Zeiten sofort klar, ohne dass Benutzer Abkürzungen interpretieren müssen. Benutzer, die mit Zeitabkürzungen nicht vertraut sind, finden ausgeschriebene Wörter zugänglicher.

Relative Zeit mit kurzem Stil formatieren

Der kurze Stil verwendet Standardabkürzungen, die die meisten Menschen erkennen. Dieses Format balanciert Lesbarkeit mit Platzeffizienz.

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

console.log(formatter.format(-2, "hour"));
// Output: "2 hr. ago"

console.log(formatter.format(3, "day"));
// Output: "in 3 days"

Der Formatierer verwendet allgemein anerkannte Abkürzungen. Stunden werden zu "Std.", Minuten werden zu "Min." und Sekunden werden zu "Sek.". Diese Abkürzungen bewahren die Lesbarkeit und reduzieren gleichzeitig die Zeichenanzahl.

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

console.log(formatter.format(-30, "second"));
// Output: "30 sec. ago"

console.log(formatter.format(-5, "minute"));
// Output: "5 min. ago"

console.log(formatter.format(-3, "month"));
// Output: "3 mo. ago"

console.log(formatter.format(2, "year"));
// Output: "in 2 yr."

Jede Zeiteinheit verwendet ihre Standardabkürzung. Sekunden verwenden "Sek.", Minuten verwenden "Min.", Monate verwenden "Mon." und Jahre verwenden "J.". Diese Abkürzungen sind weithin anerkannt und funktionieren in den meisten Kontexten gut.

Sowohl vergangene als auch zukünftige Zeiten können mit dem kurzen Stil formatiert werden.

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

console.log(formatter.format(-7, "day"));
// Output: "7 days ago"

console.log(formatter.format(2, "week"));
// Output: "in 2 wk."

console.log(formatter.format(-1, "quarter"));
// Output: "1 qtr. ago"

Der Formatierer behandelt beide Richtungen konsistent. Vergangene Zeiten verwenden "vor", während zukünftige Zeiten "in" verwenden. Die Abkürzungen bleiben unabhängig von der Richtung gleich.

Relative Zeitangaben im Narrow-Stil formatieren

Der Narrow-Stil erzeugt die kompakteste Darstellung. Dieses Format verzichtet auf Leerzeichen und verwendet minimale Symbole, um jeden Zeichenplatz zu sparen.

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

console.log(formatter.format(-2, "hour"));
// Output: "2h ago"

console.log(formatter.format(3, "day"));
// Output: "in 3 days"

Der Formatter nutzt Ein-Buchstaben-Abkürzungen und minimales Spacing für die meisten Einheiten. Stunden werden zu "h", Minuten zu "m" und Sekunden zu "s". Das Ergebnis ist kompakter als im Short- oder Long-Stil.

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

console.log(formatter.format(-30, "second"));
// Output: "30s ago"

console.log(formatter.format(-5, "minute"));
// Output: "5m ago"

console.log(formatter.format(-3, "month"));
// Output: "3mo ago"

console.log(formatter.format(2, "year"));
// Output: "in 2y"

Der Narrow-Stil variiert je nach Sprache und Einheit. Manche Einheiten werden deutlich kürzer dargestellt, andere ähneln dem Short-Stil. Im Englischen bleibt "days" ausgeschrieben, während Stunden, Minuten und Sekunden auf einen Buchstaben abgekürzt werden.

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

console.log(formatter.format(-7, "day"));
// Output: "7 days ago"

console.log(formatter.format(2, "week"));
// Output: "in 2w"

console.log(formatter.format(-1, "quarter"));
// Output: "1q ago"

Der Narrow-Stil eignet sich am besten, wenn der Platz extrem begrenzt ist und die Nutzer:innen mit dem Kontext der Zeiteinheiten vertraut sind. Das komprimierte Format setzt voraus, dass die Einheiten ohne weitere Erklärung erkannt werden.

Vergleich: Long-, Short- und Narrow-Stil

Die Unterschiede zwischen den drei Stiloptionen werden deutlich, wenn Sie dieselben relativen Zeiten mit jeder Option formatieren.

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

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

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

const value = -2;
const unit = "hour";

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

// Output:
// Long:   2 hours ago
// Short:  2 hr. ago
// Narrow: 2h ago

Der Long-Stil verwendet vollständige Wörter und klare Abstände. Der Short-Stil nutzt Standardabkürzungen mit Punkten. Der Narrow-Stil verwendet Ein-Buchstaben-Abkürzungen mit minimalem Abstand. Diese Entwicklung zeigt den Kompromiss zwischen Lesbarkeit und Platzersparnis.

Sie können verschiedene relative Zeitwerte vergleichen, um zu sehen, wie jeder Stil mit unterschiedlichen Zeitspannen umgeht.

const times = [
  { value: -30, unit: "second" },
  { value: -5, unit: "minute" },
  { value: -2, unit: "hour" },
  { value: 3, unit: "day" },
  { value: 2, unit: "week" },
  { value: -3, unit: "month" }
];

times.forEach(time => {
  const long = new Intl.RelativeTimeFormat("en-US", {
    style: "long"
  }).format(time.value, time.unit);

  const short = new Intl.RelativeTimeFormat("en-US", {
    style: "short"
  }).format(time.value, time.unit);

  const narrow = new Intl.RelativeTimeFormat("en-US", {
    style: "narrow"
  }).format(time.value, time.unit);

  console.log(`${time.value} ${time.unit}:`);
  console.log(`  Long:   ${long}`);
  console.log(`  Short:  ${short}`);
  console.log(`  Narrow: ${narrow}`);
  console.log("");
});

// Output:
// -30 second:
//   Long:   30 seconds ago
//   Short:  30 sec. ago
//   Narrow: 30s ago
//
// -5 minute:
//   Long:   5 minutes ago
//   Short:  5 min. ago
//   Narrow: 5m ago
//
// -2 hour:
//   Long:   2 hours ago
//   Short:  2 hr. ago
//   Narrow: 2h ago
//
// 3 day:
//   Long:   in 3 days
//   Short:  in 3 days
//   Narrow: in 3 days
//
// 2 week:
//   Long:   in 2 weeks
//   Short:  in 2 wk.
//   Narrow: in 2w
//
// -3 month:
//   Long:   3 months ago
//   Short:  3 mo. ago
//   Narrow: 3mo ago

Der Unterschied in der Zeichenzahl wird bei mehreren Zeitstempeln deutlich. In einem Feed oder einer Liste mit vielen relativen Zeiten spart der Narrow-Stil im Vergleich zum Long-Stil erheblich Platz in der Breite.

Wie sich relative Zeitstile zwischen Sprachen unterscheiden

Alle drei Stiloptionen passen sich an die gewählte Sprache an. Verschiedene Sprachen nutzen unterschiedliche Abkürzungen, Wörter und Abstandsregeln.

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

const value = -2;
const unit = "hour";

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

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

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

// Output:
// en-US:
//   Long:  2 hours ago
//   Short: 2 hr. ago
// de-DE:
//   Long:  vor 2 Stunden
//   Short: vor 2 Std.
// fr-FR:
//   Long:  il y a 2 heures
//   Short: il y a 2 h
// ja-JP:
//   Long:  2 時間前
//   Short: 2 時間前

Der lange Stil variiert erheblich zwischen den Locales, da jede Sprache eigene Wörter für Zeiteinheiten und eine unterschiedliche Wortstellung verwendet. Deutsch verwendet "vor" vor der Zeitangabe, Französisch verwendet "il y a" vor der Angabe und Japanisch platziert den Zeitindikator nach der Zahl. Der Formatter handhabt die Wortstellung automatisch.

Der kurze Stil passt sich ebenfalls an die Locale-Konventionen an. Deutsch verwendet "Std." für Stunden, Französisch verwendet "h" und Japanisch verwendet dasselbe Format wie der lange Stil. Diese locale-spezifischen Abkürzungen spiegeln wider, wie jede Kultur relative Zeiten in abgekürzter Form schreibt.

Der Formatter handhabt grammatikalische Variationen automatisch. Jedes Locale erzeugt eine natürlich wirkende Ausgabe für seine Sprache.

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

const value = -3;
const unit = "month";

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

  console.log(locale + ": " + narrowFormatter.format(value, unit));
});

// Output:
// en-US: 3mo ago
// es-ES: hace 3 m
// pt-BR: há 3 meses

Der schmale Stil zeigt Variationen zwischen den Locales. Englisch verwendet "mo" für Monate, Spanisch verwendet "m" und Portugiesisch schreibt "meses" aus. Diese Unterschiede spiegeln locale-spezifische Konventionen für kompakte Zeitnotation wider.

Wann der lange Stil verwendet werden sollte

Der lange Stil funktioniert am besten, wenn Klarheit und Barrierefreiheit wichtiger sind als Platzeffizienz. Diese Wahl macht relative Zeiten sofort verständlich, ohne dass eine Interpretation erforderlich ist.

Barrierefreiheitsorientierte Interfaces profitieren vom langen Stil, da Screenreader ausgeschriebene Wörter natürlicher aussprechen. Ein Screenreader, der "vor 2 Stunden" ankündigt, klingt natürlicher als "vor 2 Std.", was möglicherweise ungeschickt gelesen wird oder spezielle Ausspracheregeln erfordert.

Bildungsinhalte profitieren vom langen Stil, da Lernende möglicherweise nicht mit Zeitabkürzungen vertraut sind. Lehrmaterialien, die Zeitstempel erklären, sollten Einheiten ausschreiben, um Verwirrung zu vermeiden.

Activity-Feeds und Timelines verwenden den langen Stil, um einen klaren, gesprächigen Ton beizubehalten. Ein Social-Media-Post, der "vor 3 Stunden" anzeigt, liest sich natürlicher als "vor 3 Std." in fließendem Text.

Formale Berichte und Dokumentationen verwenden den ausgeschriebenen Stil, um einheitliche Schreibstandards zu gewährleisten. Geschäftsberichte, Prüfungsprotokolle und offizielle Dokumente schreiben relative Zeitangaben in der Regel aus, anstatt sie abzukürzen.

Internationale Zielgruppen profitieren vom ausgeschriebenen Stil, insbesondere wenn Nutzer die Sprache noch lernen. Ausgeschriebene Einheiten wie „Stunden“ und „Tage“ sind für Nicht-Muttersprachler leichter verständlich als Abkürzungen.

function formatActivityTimestamp(date, locale) {
  const formatter = new Intl.RelativeTimeFormat(locale, {
    style: "long",
    numeric: "auto"
  });

  const now = new Date();
  const diffInMs = date - now;
  const diffInHours = Math.round(diffInMs / (1000 * 60 * 60));

  return formatter.format(diffInHours, "hour");
}

const threeHoursAgo = new Date(Date.now() - 3 * 60 * 60 * 1000);

console.log("Activity: " + formatActivityTimestamp(threeHoursAgo, "en-US"));
// Output: "Activity: 3 hours ago"

Der ausgeschriebene Stil stellt das Verständnis über die Kürze. Verwenden Sie ihn immer dann, wenn Nutzer die relative Zeit ohne jegliche Mehrdeutigkeit oder Interpretationsaufwand erfassen müssen.

Wann Kurzstil verwenden

Der Kurzstil eignet sich am besten in Kontexten, in denen Platz eine Rolle spielt, Abkürzungen aber allgemein bekannt sind. Dieses Format balanciert Klarheit und Effizienz.

Mobile Oberflächen profitieren vom Kurzstil, da die Bildschirmbreite begrenzt ist. Dashboard-Karten mit mehreren Zeitstempeln benötigen kompakte relative Zeitangaben, um Informationen unterzubringen. Die Verwendung von „vor 2 Std.“ statt „vor 2 Stunden“ spart Zeichen pro Zeitstempel, was sich bei mehreren Werten summiert.

Kommentarsektionen nutzen den Kurzstil, um anzuzeigen, wann Kommentare gepostet wurden, ohne die Oberfläche zu überladen. Die Anzeige von „vor 5 Min.“ neben einem Kommentar ist kompakter als „vor 5 Minuten“ und bleibt dennoch verständlich.

Datentabellen mit Zeitstempeln in Spalten benötigen eine einheitliche Spaltenbreite. Kurze Abkürzungen wie „Std.“, „Min.“ und „Sek.“ halten die Spalten schmal. Lange Einheiten wie „Stunden“, „Minuten“ und „Sekunden“ verbreitern die Spalten unnötig.

Benachrichtigungs-Panels verwenden den Kurzstil, da Nutzer mit Zeitabkürzungen vertraut sind, wenn sie Benachrichtigungen prüfen. Eine Benachrichtigung mit „vor 1 Std.“ bietet eine gute Balance zwischen Klarheit und effizienter Platzausnutzung.

E-Mail-Clients nutzen den Kurzstil, um das Alter von Nachrichten anzuzeigen. Die Darstellung von „vor 2 Tagen“ in einer Nachrichtenliste ist klarer als „vor 2 T.“ und kompakter als die komplett ausgeschriebene Variante „vor 2 Tagen“.

function formatCommentTimestamp(date, locale) {
  const formatter = new Intl.RelativeTimeFormat(locale, {
    style: "short",
    numeric: "auto"
  });

  const now = new Date();
  const diffInMs = date - now;
  const diffInMinutes = Math.round(diffInMs / (1000 * 60));

  return formatter.format(diffInMinutes, "minute");
}

const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000);

console.log(formatCommentTimestamp(fiveMinutesAgo, "en-US"));
// Output: "5 min. ago"

Der kurze Stil schafft ein Gleichgewicht zwischen Klarheit und Effizienz. Die meisten Benutzer erkennen Standardabkürzungen ohne Verwirrung.

Wann der schmale Stil verwendet werden sollte

Der schmale Stil funktioniert am besten in extrem platzbeschränkten Kontexten, in denen jedes Zeichen zählt und Benutzer mit der Zeitnotation sehr vertraut sind.

Kompakte Widgets, die einzelne Metriken anzeigen, können den schmalen Stil verwenden, wenn die Anzeigegröße minimal ist. Ein Timer-Widget, das "5 Min. her" in kleiner Schrift anzeigt, passt besser als "5 Minuten her".

Datenvisualisierungen mit dichten Informationen profitieren vom schmalen Stil. Diagrammbeschriftungen, Graphannotationen und Zeitleistenmarkierungen benötigen minimalen Text, um den zugrunde liegenden visuellen Inhalt nicht zu verdecken. Die Verwendung von "2 Std. her" anstelle von "2 Stunden her" spart Zeichen und bleibt für Benutzer lesbar, die den Kontext verstehen.

Mobile Startbildschirm-Widgets mit begrenztem Platz verwenden den schmalen Stil, um die Informationsdichte zu maximieren. Ein Aktivitätsverfolgungswidget, das mehrere aktuelle Ereignisse in einer kleinen Kachel anzeigt, profitiert von kompakter relativer Zeitnotation.

Smartwatch-Oberflächen verwenden den schmalen Stil, da der Bildschirmplatz extrem begrenzt ist. Die Anzeige von "1 Std. her" auf einem kleinen runden Bildschirm funktioniert besser als längere Formate.

Listenansichten, die viele Elemente mit Zeitstempeln anzeigen, können den schmalen Stil verwenden, um jede Zeile kompakt zu halten. Eine Musik-App, die kürzlich gespielte Titel anzeigt, eine Video-App, die den Wiedergabeverlauf anzeigt, oder eine Fitness-App, die den Trainingsverlauf anzeigt, profitieren alle von minimaler Zeitstempelformatierung.

function formatCompactTimestamp(date, locale) {
  const formatter = new Intl.RelativeTimeFormat(locale, {
    style: "narrow",
    numeric: "auto"
  });

  const now = new Date();
  const diffInMs = date - now;
  const diffInHours = Math.round(diffInMs / (1000 * 60 * 60));

  return formatter.format(diffInHours, "hour");
}

const twoHoursAgo = new Date(Date.now() - 2 * 60 * 60 * 1000);

console.log(formatCompactTimestamp(twoHoursAgo, "en-US"));
// Output: "2h ago"

Der schmale Stil setzt voraus, dass Benutzer mit der Zeitnotation vertraut sind und Einheiten ohne Hilfe interpretieren können. Diese Option tauscht Klarheit gegen maximale Platzeffizienz.

Stil mit numerischer Option kombinieren

Die Option style funktioniert mit der Option numeric. Die Option numeric steuert, ob Sie natürliche Sprache wie "gestern" oder numerische Ausgabe wie "vor 1 Tag" erhalten. Die Option style steuert die Ausführlichkeit der numerischen Ausgabe, wenn sie erscheint.

const autoLong = new Intl.RelativeTimeFormat("en-US", {
  numeric: "auto",
  style: "long"
});

console.log(autoLong.format(-1, "day"));
// Output: "yesterday"

console.log(autoLong.format(-2, "day"));
// Output: "2 days ago"

const autoShort = new Intl.RelativeTimeFormat("en-US", {
  numeric: "auto",
  style: "short"
});

console.log(autoShort.format(-1, "day"));
// Output: "yesterday"

console.log(autoShort.format(-2, "day"));
// Output: "2 days ago"

Wenn numeric "auto" ist und der Formatter natürliche Sprache wie „gestern“ verwendet, hat die Option style keine Auswirkung, da keine numerische Ausgabe zum Stylen vorhanden ist. Der Formatter liefert unabhängig vom Stil das gleiche Ergebnis.

Wenn der Formatter eine numerische Ausgabe erzeugt, steuert die Option style die Ausführlichkeit.

const alwaysLong = new Intl.RelativeTimeFormat("en-US", {
  numeric: "always",
  style: "long"
});

console.log(alwaysLong.format(-1, "day"));
// Output: "1 day ago"

const alwaysShort = new Intl.RelativeTimeFormat("en-US", {
  numeric: "always",
  style: "short"
});

console.log(alwaysShort.format(-1, "day"));
// Output: "1 day ago"

const alwaysNarrow = new Intl.RelativeTimeFormat("en-US", {
  numeric: "always",
  style: "narrow"
});

console.log(alwaysNarrow.format(-1, "day"));
// Output: "1 day ago"

Für Tage liefern alle drei Stile im Deutschen ähnliche Ausgaben. Die Unterschiede zwischen den Stilen werden bei anderen Zeiteinheiten deutlicher.

const alwaysLong = new Intl.RelativeTimeFormat("en-US", {
  numeric: "always",
  style: "long"
});

const alwaysShort = new Intl.RelativeTimeFormat("en-US", {
  numeric: "always",
  style: "short"
});

const alwaysNarrow = new Intl.RelativeTimeFormat("en-US", {
  numeric: "always",
  style: "narrow"
});

console.log("Long:   " + alwaysLong.format(-2, "hour"));
console.log("Short:  " + alwaysShort.format(-2, "hour"));
console.log("Narrow: " + alwaysNarrow.format(-2, "hour"));

// Output:
// Long:   2 hours ago
// Short:  2 hr. ago
// Narrow: 2h ago

Mit dieser Kombination haben Sie die volle Kontrolle darüber, ob natürliche Sprache verwendet wird und wie numerische Ausgaben dargestellt werden.

Was Sie sich merken sollten

Die Option style steuert, wie relative Zeiten beim Formatieren mit Intl.RelativeTimeFormat angezeigt werden. Setzen Sie sie auf "long" für ausgeschriebene Varianten wie „vor 2 Stunden“, auf "short" für Standardabkürzungen wie „vor 2 Std.“ oder auf "narrow" für kompakte Formen wie „2h“. Wird die Option nicht gesetzt, ist der Standardwert "long".

Verwenden Sie den langen Stil, wenn Klarheit und Barrierefreiheit wichtiger sind als Platz oder wenn Nutzer mit Zeitabkürzungen nicht vertraut sind. Verwenden Sie den kurzen Stil für allgemeine Anwendungen, bei denen Platz eine Rolle spielt und Nutzer Standardabkürzungen kennen. Der schmale Stil ist nur für extrem platzbeschränkte Kontexte geeignet, in denen Nutzer mit Zeitnotationen sehr vertraut sind.

Der Formatter berücksichtigt automatisch lokale Unterschiede, einschließlich verschiedener Wörter, Abkürzungen, Wortstellung und Leerzeichen. Kombinieren Sie style mit der Option numeric, um sowohl die Verwendung natürlicher Sprache als auch die Darstellung numerischer Ausgaben zu steuern.