¿Cómo formatear el tiempo relativo como ayer o hace 1 día?
Utiliza la opción numérica 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". Ambos describen el mismo intervalo de tiempo, pero la formulación crea experiencias diferentes. La primera se siente conversacional y natural. La segunda se siente precisa y formal.
JavaScript proporciona control sobre esta opció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 diferentes salidas 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'); // "ayer"
rtf.format(0, 'day'); // "hoy"
rtf.format(1, 'day'); // "mañana"
El formateador cambia a expresiones numéricas cuando no existe un equivalente natural.
rtf.format(-2, 'day'); // "hace 2 días"
rtf.format(2, 'day'); // "en 2 días"
Esto crea un estilo mixto donde las referencias de tiempo comunes utilizan lenguaje natural y las menos comunes utilizan números.
Usar siempre para mostrar valores numéricos
Establece numeric como 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 asegura 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 todos los locales. 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 casuales 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 a lo largo de 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.