Cómo mostrar el tiempo relativo en forma corta o larga

Introducción

Cuando muestras tiempos relativos como "hace 2 horas" o "en 3 meses", el formato ocupa diferentes cantidades de espacio. Una marca de tiempo que muestra la antigüedad del contenido puede aparecer como "hace 2 horas", "hace 2 h." o "hace 2h" dependiendo de cuánto espacio tengas y cuán claro necesites ser. Cada formato equilibra la legibilidad frente al espacio horizontal.

Diferentes contextos requieren diferentes elecciones de formato. Un feed de redes sociales que muestra marcas de tiempo de publicaciones se beneficia de texto claro como "hace 2 horas". Un panel de control móvil que muestra múltiples indicadores de actividad necesita texto compacto como "hace 2h". Una visualización de datos que muestra eventos en una línea de tiempo utiliza la forma más condensada posible para ajustar la información en la pantalla.

La opción style de Intl.RelativeTimeFormat de JavaScript permite controlar esta elección. Puedes seleccionar entre una visualización larga con palabras completas, una visualización corta con abreviaturas estándar o una visualización estrecha con la representación más compacta posible. Esta opción te da un control preciso sobre cómo aparecen los tiempos relativos para los usuarios.

Qué controla la opción style

La opción style en Intl.RelativeTimeFormat acepta tres valores: "long", "short" y "narrow". Cada valor produce un nivel diferente de verbosidad para la salida de tiempo relativo.

El valor long deletrea palabras completas como "hace 2 horas". El valor short utiliza abreviaturas estándar como "hace 2 h.". El valor narrow produce la representación más compacta como "hace 2h", a menudo eliminando espacios y utilizando símbolos mínimos.

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"

La opción style tiene como valor predeterminado "long" si la omites. Esto significa que el formato de tiempo relativo utiliza palabras completas a menos que solicites explícitamente un estilo de visualización diferente.

Formatear tiempo relativo con estilo largo

El estilo largo escribe palabras completas. Este formato proporciona máxima claridad a costa de espacio horizontal adicional.

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"

El formateador maneja automáticamente las formas singulares y plurales. Una hora utiliza el singular "hour" mientras que múltiples horas utilizan el plural "hours". No necesitas determinar manualmente qué forma usar.

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"

Cada unidad de tiempo se escribe completamente, independientemente de la unidad que utilices.

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"

El estilo largo hace que los tiempos relativos sean inmediatamente claros sin requerir que los usuarios interpreten abreviaturas. Los usuarios no familiarizados con las abreviaturas de tiempo encuentran las palabras completas más accesibles.

Formatear tiempo relativo con estilo corto

El estilo corto utiliza abreviaturas estándar que la mayoría de las personas reconocen. Este formato equilibra la legibilidad con la eficiencia de espacio.

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"

El formateador utiliza abreviaturas comúnmente reconocidas. Las horas se convierten en "hr.", los minutos en "min." y los segundos en "sec.". Estas abreviaturas mantienen la legibilidad mientras reducen el número de caracteres.

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."

Cada unidad de tiempo utiliza su abreviatura estándar. Los segundos usan "sec.", los minutos usan "min.", los meses usan "mo." y los años usan "yr.". Estas abreviaturas son ampliamente reconocidas y funcionan bien en la mayoría de los contextos.

Puedes formatear tiempos pasados y futuros con el estilo corto.

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"

El formateador maneja ambas direcciones de manera consistente. Los tiempos pasados usan "ago" mientras que los tiempos futuros usan "in". Las abreviaturas permanecen iguales independientemente de la dirección.

Formatear tiempo relativo con estilo estrecho

El estilo estrecho produce la representación más compacta posible. Este formato elimina espacios y utiliza símbolos mínimos para ahorrar cada carácter.

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

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

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

El formateador utiliza abreviaturas de una sola letra y espaciado mínimo para la mayoría de las unidades. Las horas se convierten en "h", los minutos en "m" y los segundos en "s". El resultado es más compacto que el estilo corto o largo.

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

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

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

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

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

El estilo estrecho varía según la configuración regional y la unidad. Algunas unidades producen resultados significativamente más cortos mientras que otras permanecen similares al estilo corto. El inglés mantiene "days" escrito completamente pero abrevia horas, minutos y segundos a letras individuales.

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

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

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

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

El estilo estrecho funciona mejor cuando el espacio es extremadamente limitado y los usuarios están familiarizados con el contexto de medición del tiempo. El formato condensado asume que los usuarios pueden interpretar las unidades sin separación o explicación explícita.

Comparar estilos largo, corto y estrecho

Las diferencias entre las tres opciones de estilo se hacen evidentes cuando formateas los mismos tiempos relativos con cada opción.

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

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

El estilo largo utiliza palabras completas y espaciado explícito. El estilo corto utiliza abreviaturas estándar con puntos. El estilo estrecho utiliza letras individuales con espaciado mínimo. Esta progresión muestra el equilibrio entre claridad y eficiencia de espacio.

Puedes comparar diferentes valores de tiempo relativo para ver cómo cada estilo maneja varios intervalos de tiempo.

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

// Output:
// -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

La diferencia en el recuento de caracteres se vuelve significativa en múltiples marcas de tiempo. En un feed o lista que muestra muchos tiempos relativos, el estilo estrecho ahorra un espacio horizontal sustancial en comparación con el estilo largo.

Cómo varían los estilos de tiempo relativo entre idiomas

Las tres opciones de estilo se adaptan a la configuración regional que especifiques. Diferentes idiomas utilizan diferentes abreviaturas, palabras y convenciones de espaciado.

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

// Output:
// 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 時間前

El estilo largo varía significativamente entre configuraciones regionales porque cada idioma tiene sus propias palabras para unidades de tiempo y diferente orden de palabras. El alemán usa "vor" antes de la cantidad de tiempo, el francés usa "il y a" antes de la cantidad, y el japonés coloca el indicador de tiempo después del número. El formateador maneja el orden de las palabras automáticamente.

El estilo corto también se adapta a las convenciones regionales. El alemán usa "Std." para horas, el francés usa "h", y el japonés usa el mismo formato que el estilo largo. Estas abreviaturas específicas de cada configuración regional reflejan cómo cada cultura escribe tiempos relativos en forma abreviada.

El formateador maneja las variaciones gramaticales automáticamente. Cada configuración regional produce un resultado de aspecto natural para su idioma.

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

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

El estilo estrecho muestra variación entre configuraciones regionales. El inglés usa "mo" para meses, el español usa "m", y el portugués escribe completamente "meses". Estas diferencias reflejan convenciones específicas de cada configuración regional para la notación compacta de tiempo.

Cuándo usar el estilo largo

El estilo largo funciona mejor cuando la claridad y la accesibilidad importan más que la eficiencia del espacio. Esta elección hace que los tiempos relativos sean inmediatamente comprensibles sin requerir interpretación.

Las interfaces centradas en la accesibilidad se benefician del estilo largo porque los lectores de pantalla pronuncian las palabras escritas de manera más natural. Un lector de pantalla que anuncia "hace 2 horas" suena más natural que "hace 2 h.", que podría leerse de forma incómoda o requerir reglas especiales de pronunciación.

El contenido educativo se beneficia del estilo largo porque los estudiantes pueden no estar familiarizados con las abreviaturas de tiempo. Los materiales didácticos que explican marcas de tiempo deben deletrear las unidades para evitar confusiones.

Los feeds de actividad y las líneas de tiempo utilizan el estilo largo para mantener un tono claro y conversacional. Una publicación en redes sociales que muestra "hace 3 horas" se lee de forma más natural que "hace 3h" en un texto fluido.

Los informes formales y la documentación utilizan el estilo largo para mantener estándares de escritura consistentes. Los informes comerciales, registros de auditoría y documentos oficiales generalmente deletrean los tiempos relativos en lugar de abreviarlos.

Las audiencias internacionales se benefician del estilo largo cuando los usuarios pueden estar aprendiendo el idioma. Los nombres de unidades deletreados como "horas" y "días" son más fáciles de entender que las abreviaturas para hablantes no nativos.

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"

El estilo largo prioriza la comprensión sobre la brevedad. Úselo siempre que los usuarios necesiten comprender el tiempo relativo sin ningún esfuerzo de ambigüedad o interpretación.

Cuándo usar el estilo corto

El estilo corto funciona mejor en contextos donde el espacio es importante pero las abreviaturas son ampliamente comprendidas. Este formato equilibra la claridad con la eficiencia.

Las interfaces móviles se benefician del estilo corto porque el ancho de pantalla es limitado. Las tarjetas de panel que muestran múltiples marcas de tiempo necesitan tiempos relativos compactos para ajustar la información en pantalla. Usar "hace 2 hr." en lugar de "hace 2 horas" ahorra caracteres por marca de tiempo, sumando a través de múltiples valores.

Las secciones de comentarios utilizan el estilo corto para mostrar cuándo se publicaron los comentarios sin saturar la interfaz. Mostrar "hace 5 min." junto a un comentario es más compacto que "hace 5 minutos" mientras sigue siendo claro.

Las tablas de datos que muestran marcas de tiempo en columnas necesitan un ancho consistente. Abreviaturas cortas como "hr.", "min." y "sec." mantienen los anchos de columna manejables. Unidades largas como "horas", "minutos" y "segundos" amplían las columnas innecesariamente.

Los paneles de notificaciones utilizan el estilo corto porque los usuarios que verifican las notificaciones están familiarizados con las abreviaturas de tiempo. Una notificación que muestra "hace 1 hr." equilibra la claridad con el uso eficiente del espacio de visualización.

Los clientes de correo electrónico utilizan el estilo corto para mostrar la antigüedad del mensaje. Mostrar "hace 2 días" en una lista de mensajes es más claro que "hace 2d" pero más compacto que "hace 2 días" escrito completamente.

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"

El estilo corto logra un equilibrio entre claridad y eficiencia. La mayoría de los usuarios reconocen las abreviaturas estándar sin confusión.

Cuándo usar el estilo estrecho

El estilo estrecho funciona mejor en contextos extremadamente limitados de espacio donde cada carácter importa y los usuarios están muy familiarizados con la notación temporal.

Los widgets compactos que muestran métricas individuales pueden usar el estilo estrecho cuando el tamaño de visualización es mínimo. Un widget de temporizador que muestra "hace 5m" en texto pequeño se ajusta mejor que "hace 5 minutos".

Las visualizaciones de datos con información densa se benefician del estilo estrecho. Las etiquetas de gráficos, anotaciones y marcadores de línea de tiempo necesitan un texto mínimo para evitar oscurecer el contenido visual subyacente. Usar "hace 2h" en lugar de "hace 2 horas" ahorra caracteres mientras sigue siendo legible para usuarios que comprenden el contexto.

Los widgets de pantalla de inicio móvil con espacio limitado utilizan el estilo estrecho para maximizar la densidad de información. Un widget de seguimiento de actividad que muestra múltiples eventos recientes en un pequeño recuadro se beneficia de una notación compacta de tiempo relativo.

Las interfaces de smartwatch utilizan el estilo estrecho porque el espacio de pantalla es extremadamente limitado. Mostrar "hace 1h" en una pequeña pantalla circular funciona mejor que formatos más largos.

Las vistas de lista que muestran muchos elementos con marcas de tiempo pueden usar el estilo estrecho para mantener cada fila compacta. Una aplicación de música que muestra pistas reproducidas recientemente, una aplicación de video que muestra el historial de visualización o una aplicación de fitness que muestra el historial de entrenamientos se benefician del formato mínimo de marcas de tiempo.

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"));
// Output: "2h ago"

El estilo estrecho asume que los usuarios están familiarizados con la notación temporal y pueden interpretar las unidades sin ayuda. Esta opción intercambia claridad por máxima eficiencia de espacio.

Combinar estilo con opción numérica

La opción style funciona con la opción numeric. La opción numeric controla si obtienes lenguaje natural como "ayer" o salida numérica como "hace 1 día". La opción style controla la verbosidad de la salida numérica cuando aparece.

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"

Cuando numeric es "auto" y el formateador utiliza lenguaje natural como "ayer", la opción style no tiene efecto porque no hay salida numérica para aplicar estilo. El formateador produce la misma salida independientemente del estilo.

Cuando el formateador produce salida numérica, la opción style controla la verbosidad.

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"

Para los días, los tres estilos producen una salida similar en inglés. Las diferencias de estilo aparecen más claramente con otras unidades de tiempo.

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

Esta combinación te da control total sobre si aparece el lenguaje natural y cómo se muestra la salida numérica.

Qué recordar

La opción style controla cómo aparecen los tiempos relativos al formatear con Intl.RelativeTimeFormat. Configúrala como "long" para palabras completas como "hace 2 horas", "short" para abreviaturas estándar como "hace 2 h.", o "narrow" para formas compactas como "hace 2h". La opción tiene como valor predeterminado "long" si se omite.

Utiliza el estilo largo cuando la claridad y la accesibilidad son más importantes que el espacio, o cuando los usuarios pueden no estar familiarizados con las abreviaturas de tiempo. Utiliza el estilo corto para aplicaciones de uso general donde el espacio importa y los usuarios entienden las abreviaturas estándar. Utiliza el estilo estrecho solo en contextos extremadamente limitados de espacio donde los usuarios están muy familiarizados con la notación de tiempo.

El formateador maneja automáticamente las variaciones específicas del idioma, incluyendo diferentes palabras, abreviaturas, orden de palabras y convenciones de espaciado. Combina la opción style con la opción numeric para controlar tanto si aparece el lenguaje natural como la forma en que se muestra la salida numérica.