Wie formatiert man relative Zeit als „gestern“ oder „vor 1 Tag“?

Einführung

Zeitstempel sind in modernen Webanwendungen allgegenwärtig. Ein Social-Media-Post zeigt „gestern gepostet“ an, während ein Analytics-Dashboard „vor 1 Tag“ anzeigt. Beide Formulierungen beschreiben das gleiche Zeitintervall, erzeugen aber unterschiedliche Nutzererfahrungen. Die erste wirkt gesprächig und natürlich, die zweite präzise und formell.

JavaScript bietet mit der Intl.RelativeTimeFormat-API die Möglichkeit, diese Formatierung gezielt zu steuern. Sie entscheiden, ob Nutzer natürliche Ausdrücke wie „gestern“ oder numerische Angaben wie „vor 1 Tag“ sehen. Diese Entscheidung beeinflusst, ob Ihre Oberfläche eher locker oder formell wirkt.

Die Option numeric steuert den Formatstil

Die Option numeric in Intl.RelativeTimeFormat bestimmt das Ausgabeformat. Diese Option akzeptiert zwei Werte.

Der Wert auto erzeugt, sofern vorhanden, natürliche Sprache. Der Wert always liefert in allen Fällen numerische Ausdrücke.

const autoFormatter = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });
const alwaysFormatter = new Intl.RelativeTimeFormat('en-US', { numeric: 'always' });

Diese beiden Formatter erzeugen für die gleichen Zeitwerte unterschiedliche Ausgaben.

Mit auto werden gestern und morgen angezeigt

Setzen Sie numeric auf auto, wenn Sie natürliche Sprache wünschen. Der Formatter gibt für Tageswerte von -1, 0 und 1 die Begriffe „gestern“, „heute“ und „morgen“ aus.

const rtf = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });

rtf.format(-1, 'day');  // "yesterday"
rtf.format(0, 'day');   // "today"
rtf.format(1, 'day');   // "tomorrow"

Der Formatter wechselt zu numerischen Ausdrücken, wenn keine natürliche Entsprechung existiert.

rtf.format(-2, 'day');  // "2 days ago"
rtf.format(2, 'day');   // "in 2 days"

So entsteht ein gemischter Stil, bei dem gängige Zeitangaben in natürlicher Sprache und weniger gebräuchliche als Zahlen erscheinen.

Mit always werden immer numerische Werte angezeigt

Setzen Sie numeric auf always, wenn Sie eine konsistente numerische Ausgabe wünschen. Der Formatter erzeugt numerische Ausdrücke für alle Werte, einschließlich -1, 0 und 1.

const rtf = new Intl.RelativeTimeFormat('en-US', { numeric: 'always' });

rtf.format(-1, 'day');  // "1 day ago"
rtf.format(0, 'day');   // "in 0 days"
rtf.format(1, 'day');   // "in 1 day"

Der Wert always dient als Standard, wenn Sie die Option numeric weglassen.

const rtf = new Intl.RelativeTimeFormat('en-US');
rtf.format(-1, 'day');  // "1 day ago"

Dieser Standard gewährleistet eine konsistente numerische Formatierung, es sei denn, Sie wählen explizit natürliche Ausdrücke.

Natürliche Zeitausdrücke existieren in anderen Sprachen

Sprachen außerhalb des Englischen haben ihre eigenen natürlichen Zeitausdrücke. Französisch verwendet "hier" für gestern, Spanisch verwendet "ayer" und Japanisch verwendet "昨日".

const frenchRtf = new Intl.RelativeTimeFormat('fr', { numeric: 'auto' });
frenchRtf.format(-1, 'day');  // "hier"
frenchRtf.format(1, 'day');   // "demain"

const spanishRtf = new Intl.RelativeTimeFormat('es', { numeric: 'auto' });
spanishRtf.format(-1, 'day');  // "ayer"
spanishRtf.format(1, 'day');   // "mañana"

const japaneseRtf = new Intl.RelativeTimeFormat('ja', { numeric: 'auto' });
japaneseRtf.format(-1, 'day');  // "昨日"
japaneseRtf.format(1, 'day');   // "明日"

Die Option numeric funktioniert in allen Locales. Benutzer sehen natürliche Ausdrücke in ihrer eigenen Sprache, wenn Sie auto wählen. Sie sehen numerische Ausdrücke in ihrer eigenen Sprache, wenn Sie always wählen.

Wählen Sie basierend auf Ihrem Interface-Stil

Formelle Interfaces profitieren von numeric: 'always'. Analytics-Dashboards, System-Logs und technische Berichte benötigen präzise, konsistente Formatierung. Numerische Werte bieten diese Präzision über alle Zeitbereiche hinweg.

Informelle Interfaces profitieren von numeric: 'auto'. Social-Media-Feeds, Messaging-Apps und Community-Foren schaffen Verbindung durch natürliche Sprache. Ausdrücke wie "gestern" und "morgen" wirken menschlicher.

Berücksichtigen Sie die Konsistenz über Ihr gesamtes Interface hinweg. Das Mischen beider Stile in verschiedenen Teilen derselben Anwendung erzeugt Verwirrung. Benutzer erwarten, dass Zeitstempel im gesamten Erlebnis demselben Muster folgen.

Der Standardwert von always erzeugt das vorhersehbarste Verhalten. Wählen Sie auto bewusst, wenn natürliche Sprache Ihr spezifisches Interface verbessert.