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

Einführung

Zeitstempel erscheinen in modernen Webanwendungen überall. Ein Social-Media-Beitrag zeigt "gestern gepostet", während ein Analytics-Dashboard "vor 1 Tag" anzeigt. Beide beschreiben das gleiche Zeitintervall, aber die Formulierung erzeugt unterschiedliche Erfahrungen. Die erste wirkt gesprächig und natürlich. Die zweite wirkt präzise und formal.

JavaScript bietet Kontrolle über diese Formatierungsoption durch die Intl.RelativeTimeFormat-API. Sie entscheiden, ob Benutzer natürliche Ausdrücke wie "gestern" oder numerische Ausdrücke wie "vor 1 Tag" sehen. Diese Entscheidung beeinflusst, wie formell oder lässig Ihre Benutzeroberfläche wirkt.

Die numeric-Option steuert den Formatierungsstil

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

Der Wert auto erzeugt natürlichsprachliche Ausdrücke, wenn diese existieren. Der Wert always erzeugt 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 Formatierer erzeugen unterschiedliche Ausgaben für die gleichen Zeitwerte.

Verwenden Sie auto, um gestern und morgen anzuzeigen

Setzen Sie numeric auf auto, wenn Sie natürlichsprachliche Ausdrücke wünschen. Der Formatierer erzeugt "gestern", "heute" und "morgen" für Tageswerte von -1, 0 und 1.

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 Formatierer wechselt zu numerischen Ausdrücken, wenn kein natürliches Äquivalent existiert.

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

Dies erzeugt einen gemischten Stil, bei dem häufige Zeitreferenzen natürliche Sprache verwenden und weniger häufige Zahlen nutzen.

Immer numerische Werte anzeigen

Setzen Sie numeric auf always, wenn Sie eine konsistente numerische Ausgabe wünschen. Der Formatierer 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 entscheiden sich explizit für natürliche Ausdrücke.

Natürliche Zeitausdrücke existieren in anderen Sprachen

Sprachen außer Englisch 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'. Analyse-Dashboards, Systemprotokolle 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.

Achten Sie auf Konsistenz in Ihrer gesamten Benutzeroberfläche. Das Mischen beider Stile in verschiedenen Teilen derselben Anwendung schafft Verwirrung. Benutzer erwarten, dass Zeitstempel im gesamten Nutzungserlebnis dem gleichen Muster folgen.

Der Standardwert always erzeugt das vorhersehbarste Verhalten. Wählen Sie auto bewusst, wenn natürliche Sprache Ihre spezifische Benutzeroberfläche verbessert.