Wie man relative Zeit in kurzer oder langer Form anzeigt

Einführung

Wenn Sie relative Zeitangaben wie "vor 2 Stunden" oder "in 3 Monaten" anzeigen, nimmt das Format unterschiedlich viel Platz ein. Eine Zeitstempelanzeige, die das Alter von Inhalten angibt, kann je nach verfügbarem Platz und gewünschter Klarheit als "vor 2 Stunden", "vor 2 Std." oder "vor 2h" erscheinen. Jedes Format stellt einen Kompromiss zwischen Lesbarkeit und horizontalem Platz dar.

Verschiedene Kontexte erfordern unterschiedliche Formatierungsentscheidungen. Ein Social-Media-Feed, der Zeitstempel von Beiträgen anzeigt, profitiert von klarem Text wie "vor 2 Stunden". Ein mobiles Dashboard, das mehrere Aktivitätsindikatoren anzeigt, benötigt kompakten Text wie "vor 2h". Eine Datenvisualisierung, die Zeitleistenereignisse anzeigt, verwendet die kompakteste Form, um Informationen auf dem Bildschirm unterzubringen.

JavaScripts Intl.RelativeTimeFormat bietet die Option style, um diese Auswahl zu steuern. Sie können zwischen langer Anzeige mit ausgeschriebenen Wörtern, kurzer Anzeige mit Standardabkürzungen oder schmaler Anzeige mit der kompaktesten Darstellung wählen. Diese Option gibt Ihnen präzise Kontrolle darüber, wie relative Zeiten für Benutzer erscheinen.

Was die style-Option steuert

Die Option style in Intl.RelativeTimeFormat akzeptiert drei Werte: "long", "short" und "narrow". Jeder Wert erzeugt einen unterschiedlichen Grad an Ausführlichkeit für die Ausgabe der relativen Zeit.

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

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 ist standardmäßig auf "long" eingestellt, wenn Sie sie weglassen. Das bedeutet, dass bei der Formatierung relativer Zeiten vollständige Wörter verwendet werden, es sei denn, Sie fordern explizit einen anderen Anzeigestil an.

Relative Zeitformatierung mit langem Stil

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

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 "hour", während mehrere Stunden den Plural "hours" verwenden. Sie müssen nicht manuell bestimmen, welche Form zu verwenden ist.

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 Sie verwenden.

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 Zeitformatierung mit kurzem Stil

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 bekannte Abkürzungen. Stunden werden zu "hr.", Minuten werden zu "min." und Sekunden werden zu "sec.". Diese Abkürzungen bewahren die Lesbarkeit bei gleichzeitiger Reduzierung der 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 "sec.", Minuten verwenden "min.", Monate verwenden "mo." und Jahre verwenden "yr.". Diese Abkürzungen sind weithin bekannt und funktionieren gut in den meisten Kontexten.

Sie können sowohl vergangene als auch zukünftige Zeiten mit kurzem Stil formatieren.

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 "ago", während zukünftige Zeiten "in" verwenden. Die Abkürzungen bleiben unabhängig von der Richtung gleich.

Relative Zeitformatierung mit schmalem Stil

Der schmale Stil erzeugt die kompakteste mögliche Darstellung. Dieses Format entfernt Leerzeichen und verwendet minimale Symbole, um jeden Buchstaben zu sparen.

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

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

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

Der Formatierer verwendet einbuchstabige Abkürzungen und minimale Abstände für die meisten Einheiten. Stunden werden zu "h", Minuten zu "m" und Sekunden zu "s". Die Ausgabe ist kompakter als der kurze oder lange Stil.

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

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

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

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

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

Der schmale Stil variiert je nach Gebietsschema und Einheit. Einige Einheiten erzeugen deutlich kürzere Ausgaben, während andere dem kurzen Stil ähnlich bleiben. Englisch behält "days" ausgeschrieben bei, kürzt aber Stunden, Minuten und Sekunden auf einzelne Buchstaben ab.

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

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

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

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

Der schmale Stil funktioniert am besten, wenn der Platz extrem begrenzt ist und die Benutzer mit dem Kontext der Zeitmessung vertraut sind. Das komprimierte Format setzt voraus, dass Benutzer die Einheiten ohne explizite Trennung oder Erklärung interpretieren können.

Vergleich von langen, kurzen und schmalen Stilen

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));

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

Der lange Stil verwendet vollständige Wörter und explizite Abstände. Der kurze Stil verwendet Standardabkürzungen mit Punkten. Der schmale Stil verwendet einzelne Buchstaben mit minimalen Abständen. Diese Progression zeigt den Kompromiss zwischen Klarheit und Platzeffizienz.

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

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("");
});

// Ausgabe:
// -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 Zeichenanzahl wird bei mehreren Zeitstempeln signifikant. In einem Feed oder einer Liste, die viele relative Zeiten anzeigt, spart der schmale Stil im Vergleich zum langen Stil erheblichen horizontalen Platz.

Wie relative Zeitstile in verschiedenen Sprachen variieren

Alle drei Stiloptionen passen sich dem von Ihnen angegebenen Gebietsschema an. Verschiedene Sprachen verwenden unterschiedliche Abkürzungen, Wörter und Abstandskonventionen.

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));
});

// Ausgabe:
// 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 Gebietsschemas, da jede Sprache eigene Wörter für Zeiteinheiten und unterschiedliche Wortstellungen hat. Deutsch verwendet "vor" vor der Zeitangabe, Französisch verwendet "il y a" vor der Angabe, und Japanisch platziert den Zeitindikator nach der Zahl. Der Formatierer behandelt die Wortreihenfolge automatisch.

Auch der kurze Stil passt sich den Konventionen des Gebietsschemas an. Deutsch verwendet "Std." für Stunden, Französisch verwendet "h", und Japanisch verwendet das gleiche Format wie der lange Stil. Diese gebietsspezifischen Abkürzungen spiegeln wider, wie jede Kultur relative Zeiten in abgekürzter Form schreibt.

Der Formatierer behandelt grammatikalische Variationen automatisch. Jedes Gebietsschema erzeugt natürlich aussehende Ausgaben 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));
});

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

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

Wann der lange Stil verwendet werden sollte

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

Zugänglichkeitsorientierte Benutzeroberflächen 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 umständlich 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.

Aktivitäts-Feeds und Zeitleisten verwenden den langen Stil, um einen klaren, konversationellen Ton beizubehalten. Ein Social-Media-Beitrag mit der Anzeige "vor 3 Stunden" liest sich natürlicher als "vor 3h" im fließenden Text.

Formelle Berichte und Dokumentationen verwenden den langen Stil, um einheitliche Schreibstandards einzuhalten. Geschäftsberichte, Audit-Logs und offizielle Dokumente schreiben relative Zeiten typischerweise aus, anstatt sie abzukürzen.

Internationale Zielgruppen profitieren vom langen Stil, wenn Benutzer möglicherweise die Sprache lernen. Ausgeschriebene Einheitennamen wie "Stunden" und "Tage" sind für Nicht-Muttersprachler leichter zu verstehen 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 lange Stil priorisiert Verständnis über Kürze. Verwenden Sie ihn, wann immer Benutzer die relative Zeit ohne Mehrdeutigkeit oder Interpretationsaufwand erfassen müssen.

Wann der kurze Stil verwendet werden sollte

Der kurze Stil funktioniert am besten in Kontexten, in denen Platz wichtig ist, aber Abkürzungen allgemein verstanden werden. Dieses Format balanciert Klarheit mit Effizienz.

Mobile Benutzeroberflächen profitieren vom kurzen Stil, da die Bildschirmbreite begrenzt ist. Dashboard-Karten, die mehrere Zeitstempel anzeigen, benötigen kompakte relative Zeitangaben, um Informationen auf dem Bildschirm unterzubringen. Die Verwendung von "2 Std. her" anstelle von "vor 2 Stunden" spart Zeichen pro Zeitstempel und summiert sich über mehrere Werte.

Kommentarbereiche verwenden den kurzen Stil, um anzuzeigen, wann Kommentare gepostet wurden, ohne die Benutzeroberfläche zu überladen. Die Anzeige von "5 Min. her" neben einem Kommentar ist kompakter als "vor 5 Minuten" und bleibt dennoch klar.

Datentabellen, die Zeitstempel in Spalten anzeigen, benötigen eine einheitliche Breite. Kurze Abkürzungen wie "Std.", "Min." und "Sek." halten die Spaltenbreiten überschaubar. Lange Einheiten wie "Stunden", "Minuten" und "Sekunden" verbreitern die Spalten unnötig.

Benachrichtigungspanels verwenden den kurzen Stil, da Benutzer, die Benachrichtigungen überprüfen, mit Zeitabkürzungen vertraut sind. Eine Benachrichtigung mit "1 Std. her" balanciert Klarheit mit effizienter Nutzung des Anzeigeplatzes.

E-Mail-Clients verwenden den kurzen Stil, um das Alter von Nachrichten anzuzeigen. Die Anzeige von "2 Tage her" in einer Nachrichtenliste ist klarer als "2T her", aber kompakter als "vor 2 Tagen" vollständig ausgeschrieben.

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 findet eine Balance 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 "5m ago" in kleinem Text anzeigt, passt besser als "5 minutes ago".

Datenvisualisierungen mit dichter Information profitieren vom schmalen Stil. Diagrammbeschriftungen, Graphenanmerkungen und Zeitachsenmarkierungen benötigen minimalen Text, um den zugrundeliegenden visuellen Inhalt nicht zu verdecken. Die Verwendung von "2h ago" anstelle von "2 hr. ago" spart Zeichen und bleibt für Benutzer, die den Kontext verstehen, lesbar.

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-Schnittstellen verwenden den schmalen Stil, da der Bildschirmplatz extrem begrenzt ist. Die Anzeige von "1h ago" auf einem kleinen kreisförmigen 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 abgespielte Titel anzeigt, eine Video-App, die den Verlauf der angesehenen Videos anzeigt, oder eine Fitness-App, die den Trainingsverlauf anzeigt, profitieren alle von einer minimalen 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"));
// Ausgabe: "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.

Kombination von style mit der numeric-Option

Die Option style funktioniert zusammen mit der Option numeric. Die Option numeric steuert, ob Sie natürliche Sprache wie "gestern" oder numerische Ausgaben wie "vor 1 Tag" erhalten. Die Option style steuert die Ausführlichkeit der numerischen Ausgabe, wenn diese 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 auf "auto" gesetzt ist und der Formatierer natürliche Sprache wie "gestern" verwendet, hat die Option style keine Auswirkung, da keine numerische Ausgabe zu formatieren ist. Der Formatierer erzeugt unabhängig vom Stil die gleiche Ausgabe.

Wenn der Formatierer numerische Ausgaben 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 erzeugen alle drei Stile im Englischen ähnliche Ausgaben. Die Stilunterschiede werden bei anderen Zeiteinheiten deutlicher sichtbar.

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

Diese Kombination gibt Ihnen die volle Kontrolle darüber, ob natürliche Sprache erscheint und wie numerische Ausgaben angezeigt werden.

Was zu beachten ist

Die Option style steuert, wie relative Zeitangaben bei der Formatierung mit Intl.RelativeTimeFormat erscheinen. Setzen Sie sie auf "long" für ausgeschriebene Wörter wie "vor 2 Stunden", "short" für Standardabkürzungen wie "vor 2 Std." oder "narrow" für kompakte Formen wie "vor 2h". Die Option ist standardmäßig auf "long" eingestellt, wenn sie weggelassen wird.

Verwenden Sie den langen Stil, wenn Klarheit und Zugänglichkeit wichtiger sind als Platz, oder wenn Benutzer möglicherweise mit Zeitabkürzungen nicht vertraut sind. Verwenden Sie den kurzen Stil für Allzweckanwendungen, bei denen Platz wichtig ist und Benutzer Standardabkürzungen verstehen. Verwenden Sie den schmalen Stil nur in extrem platzbeschränkten Kontexten, in denen Benutzer mit der Zeitnotation sehr vertraut sind.

Der Formatierer behandelt automatisch lokale Variationen, einschließlich verschiedener Wörter, Abkürzungen, Wortstellung und Abstandskonventionen. Kombinieren Sie style mit der Option numeric, um sowohl zu steuern, ob natürliche Sprache erscheint, als auch wie die numerische Ausgabe angezeigt wird.