Cómo mostrar duraciones en forma corta o larga

Introducción

Cuando muestras cuánto tiempo toma algo, el formato ocupa diferentes cantidades de espacio. Una duración de entrenamiento de 1 hora y 30 minutos puede aparecer como "1 hora y 30 minutos", "1 h y 30 min", o "1h 30m" dependiendo de cuánto espacio tengas y qué tan claro necesites ser. Cada formato equilibra la legibilidad frente al espacio horizontal.

Diferentes contextos requieren diferentes opciones de formato. Una barra de control de reproductor de video que muestra la duración se beneficia de texto compacto como "1h 30m". Una pantalla de resumen de entrenamiento que explica la duración de la sesión necesita texto claro como "1 hora y 30 minutos". Un panel de control móvil que muestra múltiples valores de temporizador utiliza la forma más compacta posible para ajustar la información en la pantalla.

El Intl.DurationFormat de JavaScript proporciona la opción style para 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 las duraciones para los usuarios.

Qué controla la opción style

La opción style en Intl.DurationFormat acepta tres valores para el formato basado en texto: "long", "short" y "narrow". Cada valor produce un nivel diferente de verbosidad para la salida de duración.

El valor long deletrea nombres de unidades completos como "1 hora y 30 minutos". El valor short utiliza abreviaturas estándar como "1 h y 30 min". El valor narrow produce la representación más compacta como "1h 30m", a menudo eliminando espacios y utilizando símbolos mínimos.

const duration = { hours: 1, minutes: 30 };

const longFormatter = new Intl.DurationFormat("en-US", {
  style: "long"
});

console.log(longFormatter.format(duration));
// Salida: "1 hour and 30 minutes"

const shortFormatter = new Intl.DurationFormat("en-US", {
  style: "short"
});

console.log(shortFormatter.format(duration));
// Salida: "1 hr and 30 min"

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

console.log(narrowFormatter.format(duration));
// Salida: "1h 30m"

La opción style tiene como valor predeterminado "short" si la omites. Esto significa que el formato de duración utiliza abreviaturas estándar a menos que solicites explícitamente un estilo de visualización diferente.

Formatear duraciones con estilo largo

El estilo largo escribe los nombres completos de las unidades. Este formato proporciona máxima claridad a costa de espacio horizontal adicional.

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

const duration = { hours: 2, minutes: 30 };

console.log(formatter.format(duration));
// Output: "2 hours and 30 minutes"

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

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

console.log(formatter.format({ hours: 1, minutes: 30 }));
// Output: "1 hour and 30 minutes"

console.log(formatter.format({ hours: 2, minutes: 1 }));
// Output: "2 hours and 1 minute"

Cada tipo de unidad se escribe completamente sin importar cuántas unidades aparezcan en la duración.

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

console.log(formatter.format({ hours: 2, minutes: 30, seconds: 45 }));
// Output: "2 hours, 30 minutes and 45 seconds"

console.log(formatter.format({ minutes: 5, seconds: 30 }));
// Output: "5 minutes and 30 seconds"

console.log(formatter.format({ hours: 1, minutes: 0, seconds: 15 }));
// Output: "1 hour, 0 minutes and 15 seconds"

El formateador añade conjunciones apropiadas entre unidades. El inglés usa comas y "and" para separar unidades. La conjunción aparece antes de la última unidad en la lista.

El estilo largo hace que las duraciones sean inmediatamente claras sin requerir que los usuarios interpreten abreviaturas. Los usuarios no familiarizados con abreviaturas de tiempo encuentran las unidades escritas completamente más accesibles.

Formatear duraciones 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.DurationFormat("en-US", {
  style: "short"
});

const duration = { hours: 2, minutes: 30 };

console.log(formatter.format(duration));
// Output: "2 hr and 30 min"

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.DurationFormat("en-US", {
  style: "short"
});

console.log(formatter.format({ hours: 1, minutes: 46, seconds: 40 }));
// Output: "1 hr, 46 min and 40 sec"

console.log(formatter.format({ minutes: 5, seconds: 30 }));
// Output: "5 min and 30 sec"

console.log(formatter.format({ hours: 3, minutes: 15 }));
// Output: "3 hr and 15 min"

El estilo corto es el comportamiento predeterminado. Si omites la opción style, el formateador utiliza automáticamente el estilo corto.

const formatter = new Intl.DurationFormat("en-US");

console.log(formatter.format({ hours: 2, minutes: 30 }));
// Output: "2 hr and 30 min"

Este valor predeterminado hace que el estilo corto sea conveniente cuando deseas duraciones abreviadas estándar sin especificar explícitamente la opción de estilo.

Puedes formatear diferentes tipos de duración con estilo corto para ver las abreviaturas estándar.

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

console.log(formatter.format({ days: 2, hours: 5 }));
// Output: "2 days and 5 hr"

console.log(formatter.format({ weeks: 1, days: 3 }));
// Output: "1 wk and 3 days"

console.log(formatter.format({ hours: 1, minutes: 30, seconds: 45, milliseconds: 500 }));
// Output: "1 hr, 30 min, 45 sec and 500 ms"

Cada tipo de unidad utiliza su abreviatura estándar. Los días siguen siendo "days", las semanas usan "wk" y los milisegundos usan "ms". Estas abreviaturas son ampliamente reconocidas y funcionan bien en la mayoría de los contextos.

Formatear duraciones 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.DurationFormat("en-US", {
  style: "narrow"
});

const duration = { hours: 2, minutes: 30 };

console.log(formatter.format(duration));
// Output: "2h 30m"

El formateador utiliza abreviaturas de una sola letra y espaciado mínimo. Las horas se convierten en "h", los minutos en "m" y los segundos en "s". El resultado es significativamente más compacto que los estilos largo o corto.

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

console.log(formatter.format({ hours: 1, minutes: 46, seconds: 40 }));
// Output: "1h 46m 40s"

console.log(formatter.format({ minutes: 5, seconds: 30 }));
// Output: "5m 30s"

console.log(formatter.format({ hours: 3, minutes: 15 }));
// Output: "3h 15m"

Diferentes unidades producen diferentes representaciones estrechas basadas en convenciones estándar.

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

console.log(formatter.format({ days: 2, hours: 5 }));
// Output: "2d 5h"

console.log(formatter.format({ weeks: 1, days: 3 }));
// Output: "1w 3d"

console.log(formatter.format({ hours: 1, minutes: 30, seconds: 45, milliseconds: 500 }));
// Output: "1h 30m 45s 500ms"

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 las mismas duraciones con cada opción.

const longFormatter = new Intl.DurationFormat("en-US", {
  style: "long"
});

const shortFormatter = new Intl.DurationFormat("en-US", {
  style: "short"
});

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

const duration = { hours: 1, minutes: 30, seconds: 45 };

console.log("Long:   " + longFormatter.format(duration));
console.log("Short:  " + shortFormatter.format(duration));
console.log("Narrow: " + narrowFormatter.format(duration));

// Output:
// Long:   1 hour, 30 minutes and 45 seconds
// Short:  1 hr, 30 min and 45 sec
// Long:   1h 30m 45s

El estilo largo utiliza palabras completas y conjunciones explícitas. El estilo corto utiliza abreviaturas estándar con conjunciones. 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 duraciones para ver cómo cada estilo maneja varios intervalos de tiempo.

const durations = [
  { hours: 2, minutes: 15 },
  { minutes: 5, seconds: 30 },
  { hours: 1, minutes: 0, seconds: 10 },
  { days: 1, hours: 3, minutes: 45 }
];

durations.forEach(duration => {
  const long = new Intl.DurationFormat("en-US", {
    style: "long"
  }).format(duration);

  const short = new Intl.DurationFormat("en-US", {
    style: "short"
  }).format(duration);

  const narrow = new Intl.DurationFormat("en-US", {
    style: "narrow"
  }).format(duration);

  console.log("Duration:");
  console.log("  Long:   " + long);
  console.log("  Short:  " + short);
  console.log("  Narrow: " + narrow);
  console.log("");
});

// Output:
// Duration:
//   Long:   2 hours and 15 minutes
//   Short:  2 hr and 15 min
//   Narrow: 2h 15m
//
// Duration:
//   Long:   5 minutes and 30 seconds
//   Short:  5 min and 30 sec
//   Narrow: 5m 30s
//
// Duration:
//   Long:   1 hour, 0 minutes and 10 seconds
//   Short:  1 hr, 0 min and 10 sec
//   Narrow: 1h 0m 10s
//
// Duration:
//   Long:   1 day, 3 hours and 45 minutes
//   Short:  1 day, 3 hr and 45 min
//   Narrow: 1d 3h 45m

La diferencia en el recuento de caracteres se vuelve significativa en múltiples duraciones. En una tabla o lista que muestra muchas duraciones, el estilo estrecho ahorra un espacio horizontal sustancial en comparación con el estilo largo.

Cómo varían los estilos de duración entre idiomas

Las tres opciones de estilo se adaptan al idioma que especifiques. Diferentes idiomas utilizan distintas abreviaturas, nombres de unidades, conjunciones y convenciones de espaciado.

const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];

const duration = { hours: 2, minutes: 30 };

locales.forEach(locale => {
  const longFormatter = new Intl.DurationFormat(locale, {
    style: "long"
  });

  const shortFormatter = new Intl.DurationFormat(locale, {
    style: "short"
  });

  console.log(locale + ":");
  console.log("  Long:  " + longFormatter.format(duration));
  console.log("  Short: " + shortFormatter.format(duration));
});

// Output:
// en-US:
//   Long:  2 hours and 30 minutes
//   Short: 2 hr and 30 min
// de-DE:
//   Long:  2 Stunden und 30 Minuten
//   Short: 2 Std. und 30 Min.
// fr-FR:
//   Long:  2 heures et 30 minutes
//   Short: 2 h et 30 min
// ja-JP:
//   Long:  2時間30分
//   Short: 2 時間 30 分

El estilo largo varía significativamente entre idiomas porque cada lengua tiene sus propias palabras para las unidades de tiempo. El alemán usa "Stunden" para horas, el francés usa "heures" y el japonés usa "時間". El formateador maneja automáticamente las variaciones gramaticales.

El estilo corto también se adapta a las convenciones de cada idioma. El alemán usa "Std." para horas, el francés usa "h" y el japonés añade espacios entre números y caracteres de unidad. Estas abreviaturas específicas de cada idioma reflejan cómo cada cultura escribe las duraciones en forma abreviada.

El formateador maneja las conjunciones según las reglas del idioma. El inglés usa "and", el alemán usa "und", el francés usa "et" y el japonés omite las conjunciones por completo. Cada idioma produce un resultado de aspecto natural para su lengua.

const locales = ["en-US", "es-ES", "pt-BR"];

const duration = { hours: 1, minutes: 30, seconds: 45 };

locales.forEach(locale => {
  const narrowFormatter = new Intl.DurationFormat(locale, {
    style: "narrow"
  });

  console.log(locale + ": " + narrowFormatter.format(duration));
});

// Output:
// en-US: 1h 30m 45s
// es-ES: 1h 30min 45s
// pt-BR: 1h 30min 45s

El estilo estrecho muestra algunas variaciones entre idiomas. El inglés usa letras individuales como "h", "m" y "s". El español y el portugués usan "min" en lugar de solo "m" para los minutos. Estas diferencias reflejan convenciones específicas de cada idioma para la notación compacta del tiempo.

Cuándo usar el estilo largo

El estilo largo funciona mejor cuando la claridad y la accesibilidad son más importantes que la eficiencia del espacio. Esta elección hace que las duraciones 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 forma más natural. Un lector de pantalla que anuncia "2 horas y 30 minutos" suena más natural que "2 h y 30 min", que podría leerse de manera 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 duraciones deben deletrear las unidades para evitar confusiones.

Los resúmenes de entrenamiento y los informes de sesiones utilizan el estilo largo para mantener un tono claro y profesional. Una aplicación de fitness que muestra la duración del entrenamiento completado se lee mejor con "1 hora y 15 minutos" que con "1h 15m".

Los informes formales y la documentación utilizan el estilo largo para mantener estándares de escritura consistentes. Los informes comerciales, registros médicos y documentos oficiales generalmente deletrean las duraciones de tiempo en lugar de abreviarlas.

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

function formatWorkoutSummary(duration, locale) {
  const formatter = new Intl.DurationFormat(locale, {
    style: "long"
  });

  return formatter.format(duration);
}

const workout = { hours: 1, minutes: 15 };

console.log("Workout duration: " + formatWorkoutSummary(workout, "en-US"));
// Output: "Workout duration: 1 hour and 15 minutes"

El estilo largo prioriza la comprensión sobre la brevedad. Úsalo siempre que los usuarios necesiten entender la duración 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 importa pero las abreviaturas son ampliamente comprendidas. Esta es la opción más común para aplicaciones de uso general.

Las interfaces móviles se benefician del estilo corto porque el ancho de pantalla es limitado. Las tarjetas de panel que muestran múltiples temporizadores necesitan duraciones compactas para ajustar la información en pantalla. Usar "2 h y 30 min" en lugar de "2 horas y 30 minutos" ahorra 11 caracteres por duración, sumando en múltiples valores.

Los controles de reproductores de video utilizan estilo corto para mostrar la duración sin saturar la interfaz. Mostrar "1 h y 46 min" en la barra de control es más compacto que "1 hora y 46 minutos" mientras sigue siendo claro.

Las tablas de datos que muestran duraciones en columnas necesitan un ancho consistente. Abreviaturas cortas como "h", "min" y "seg" mantienen los anchos de columna manejables. Unidades largas como "horas", "minutos" y "segundos" ensanchan las columnas innecesariamente.

Las aplicaciones de temporizador utilizan estilo corto porque los usuarios que verifican temporizadores están familiarizados con las abreviaturas de tiempo. Un temporizador de cuenta regresiva que muestra "5 min y 30 seg" equilibra la claridad con el uso eficiente del espacio de visualización.

Las interfaces de reserva de vuelos utilizan estilo corto para mostrar la duración del viaje. Mostrar "8 h y 15 min" en un resultado de búsqueda de vuelo es más claro que "8h 15m" pero más compacto que "8 horas y 15 minutos".

function formatFlightDuration(duration, locale) {
  const formatter = new Intl.DurationFormat(locale, {
    style: "short"
  });

  return formatter.format(duration);
}

const flight = { hours: 8, minutes: 15 };

console.log(formatFlightDuration(flight, "en-US"));
// Output: "8 hr and 15 min"

El estilo corto logra un equilibrio entre claridad y eficiencia. La mayoría de los usuarios reconocen abreviaturas estándar como h, min y seg 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 de tiempo.

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 "5m 30s" en texto grande se ajusta mejor que "5 minutos y 30 segundos".

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

Los widgets de la pantalla de inicio móvil con espacio limitado utilizan el estilo estrecho para maximizar la densidad de información. Un widget de seguimiento de entrenamiento que muestra múltiples sesiones recientes en un pequeño mosaico se beneficia de la notación compacta de duración.

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

Las vistas de lista que muestran muchos elementos con duraciones pueden usar el estilo estrecho para mantener cada fila compacta. Una lista de reproducción de música que muestra duraciones de pistas, una lista de videos que muestra tiempo de reproducción, o una lista de ejercicios que muestra la duración por ejercicio, todos se benefician del formato mínimo.

function formatVideoPlaylist(videos, locale) {
  const formatter = new Intl.DurationFormat(locale, {
    style: "narrow"
  });

  return videos.map(video => ({
    title: video.title,
    duration: formatter.format(video.duration)
  }));
}

const playlist = [
  { title: "Introduction", duration: { minutes: 2, seconds: 30 } },
  { title: "Getting Started", duration: { minutes: 5, seconds: 15 } },
  { title: "Advanced Topics", duration: { hours: 1, minutes: 10 } }
];

console.log(formatVideoPlaylist(playlist, "en-US"));
// Output:
// [
//   { title: "Introduction", duration: "2m 30s" },
//   { title: "Getting Started", duration: "5m 15s" },
//   { title: "Advanced Topics", duration: "1h 10m" }
// ]

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

Combinar estilo con otras opciones de formato

La opción style funciona con todas las demás opciones de formato de duración. Puedes controlar qué unidades aparecen mientras eliges el estilo de visualización.

const formatter = new Intl.DurationFormat("en-US", {
  style: "long",
  hours: "numeric",
  minutes: "2-digit",
  seconds: "2-digit"
});

console.log(formatter.format({ hours: 1, minutes: 5, seconds: 3 }));
// Output: "1:05:03"

Esta combinación muestra las horas con el estilo largo pero utiliza formato numérico con relleno de ceros para minutos y segundos. El resultado es un formato híbrido que mezcla texto y números.

Puedes formatear solo unidades específicas mientras utilizas un estilo consistente.

const formatter = new Intl.DurationFormat("en-US", {
  style: "short",
  hours: "numeric",
  minutes: "numeric"
});

console.log(formatter.format({ hours: 2, minutes: 30, seconds: 45 }));
// Output: "2 hr and 30 min"

El formateador muestra solo horas y minutos aunque el objeto de duración incluye segundos. Esto te da control sobre qué unidades aparecen en la salida.

Puedes crear formatos personalizados mezclando diferentes estilos de unidades.

const formatter = new Intl.DurationFormat("en-US", {
  hours: "long",
  minutes: "short",
  seconds: "narrow"
});

console.log(formatter.format({ hours: 1, minutes: 30, seconds: 45 }));
// Output: "1 hour, 30 min, 45s"

Esto produce un formato mixto donde cada unidad utiliza un nivel de verbosidad diferente. Aunque inusual, esta flexibilidad te permite crear formatos especializados cuando sea necesario.

Qué recordar

La opción style controla cómo aparecen las duraciones al formatear con Intl.DurationFormat. Configúrala como "long" para unidades deletreadas como "2 horas y 30 minutos", "short" para abreviaturas estándar como "2 h y 30 min", o "narrow" para formas compactas como "2h 30m". La opción predeterminada es "short" 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 propósito 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 nombres de unidades, abreviaturas, conjunciones, convenciones de espaciado y formas plurales. Combina style con otras opciones de formato para controlar qué unidades aparecen y cómo se muestran.