¿Cómo formatear el tiempo relativo como ayer o hace 1 día?
Usa la opción numeric para controlar si el tiempo relativo aparece como ayer o hace 1 día
Introducción
Las marcas de tiempo aparecen en todas las aplicaciones web modernas. Una publicación en redes sociales muestra "publicado ayer" mientras que un panel de análisis muestra "hace 1 día". Ambas describen el mismo intervalo de tiempo, pero la redacción crea experiencias diferentes. La primera se siente conversacional y natural. La segunda se siente precisa y formal.
JavaScript proporciona control sobre esta elección de formato a través de la API Intl.RelativeTimeFormat. Tú decides si los usuarios ven expresiones naturales como "ayer" o expresiones numéricas como "hace 1 día". Esta decisión afecta cuán formal o casual se siente tu interfaz.
La opción numeric controla el estilo de formato
La opción numeric en Intl.RelativeTimeFormat determina el formato de salida. Esta opción acepta dos valores.
El valor auto produce expresiones en lenguaje natural cuando existen. El valor always produce expresiones numéricas en todos los casos.
const autoFormatter = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });
const alwaysFormatter = new Intl.RelativeTimeFormat('en-US', { numeric: 'always' });
Estos dos formateadores producen salidas diferentes para los mismos valores de tiempo.
Usa auto para mostrar ayer y mañana
Establece numeric en auto cuando quieras expresiones en lenguaje natural. El formateador produce "ayer", "hoy" y "mañana" para valores de día de -1, 0 y 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"
El formateador cambia a expresiones numéricas cuando no existe un equivalente natural.
rtf.format(-2, 'day'); // "2 days ago"
rtf.format(2, 'day'); // "in 2 days"
Esto crea un estilo mixto donde las referencias de tiempo comunes usan lenguaje natural y las menos comunes usan números.
Usa always para mostrar valores numéricos
Establece numeric en always cuando quieras una salida numérica consistente. El formateador produce expresiones numéricas para todos los valores, incluyendo -1, 0 y 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"
El valor always sirve como predeterminado cuando omites la opción numeric.
const rtf = new Intl.RelativeTimeFormat('en-US');
rtf.format(-1, 'day'); // "1 day ago"
Este valor predeterminado garantiza un formato numérico consistente a menos que elijas explícitamente expresiones naturales.
Las expresiones de tiempo naturales existen en otros idiomas
Los idiomas más allá del inglés tienen sus propias expresiones de tiempo naturales. El francés usa "hier" para ayer, el español usa "ayer", y el japonés usa "昨日".
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'); // "明日"
La opción numeric funciona en todas las configuraciones regionales. Los usuarios ven expresiones naturales en su propio idioma cuando eliges auto. Ven expresiones numéricas en su propio idioma cuando eliges always.
Elige según el estilo de tu interfaz
Las interfaces formales se benefician de numeric: 'always'. Los paneles de análisis, registros del sistema e informes técnicos necesitan un formato preciso y consistente. Los valores numéricos proporcionan esa precisión en todos los rangos de tiempo.
Las interfaces informales se benefician de numeric: 'auto'. Los feeds de redes sociales, aplicaciones de mensajería y foros comunitarios crean conexión a través del lenguaje natural. Expresiones como "ayer" y "mañana" se sienten más humanas.
Considera la consistencia en toda tu interfaz. Mezclar ambos estilos en diferentes partes de la misma aplicación crea confusión. Los usuarios esperan que las marcas de tiempo sigan el mismo patrón en toda su experiencia.
El valor predeterminado de always crea el comportamiento más predecible. Elige auto deliberadamente cuando el lenguaje natural mejore tu interfaz específica.