Cómo mostrar duraciones en forma corta o larga

Introducción

Cuando muestras cuánto tiempo tarda 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 legibilidad frente a espacio horizontal.

Diferentes contextos requieren diferentes opciones de formato. Una barra de control de reproductor de vídeo 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 usa la forma más compacta posible para ajustar la información en pantalla.

El Intl.DurationFormat de JavaScript proporciona la opción style para controlar esta elección. Puedes seleccionar entre visualización larga con palabras completas, visualización corta con abreviaturas estándar o visualización estrecha con la representación más compacta posible. Esta opción te da control preciso sobre cómo aparecen las duraciones a los usuarios.

Qué controla la opción style

La opción style en Intl.DurationFormat acepta tres valores para 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 escribe nombres de unidad completos como "1 hora y 30 minutos". El valor short usa 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 usando símbolos mínimos.

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

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

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

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

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

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

console.log(narrowFormatter.format(duration));
// Output: "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 deletrea 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 singular y plural. Una hora utiliza el singular "hora" mientras que varias horas utilizan el plural "horas". 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 deletrea completamente independientemente de 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 las unidades. El español utiliza comas e "y" 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 las abreviaturas de tiempo encuentran las unidades deletreadas 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 legibilidad con 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 "h", los minutos en "min" y los segundos en "s". 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 el estilo corto automáticamente.

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 permanecen como "días", las semanas usan "sem" 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 el estilo corto o largo.

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 de 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 vuelven claras 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 número de caracteres se vuelve significativa a través de 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 a la configuración regional que especifiques. Diferentes idiomas utilizan diferentes 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 configuraciones regionales porque cada idioma tiene sus propias palabras para las unidades de tiempo. El alemán utiliza "Stunden" para horas, el francés utiliza "heures" y el japonés utiliza "時間". El formateador maneja las variaciones gramaticales automáticamente.

El estilo corto también se adapta a las convenciones locales. 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 configuración regional reflejan cómo cada cultura escribe 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 configuración regional produce resultados de aspecto natural para su idioma.

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 cierta variación entre configuraciones regionales. 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 minutos. 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 de espacio. Esta elección hace que las duraciones sean inmediatamente comprensibles sin requerir interpretación.

Las interfaces centradas en accesibilidad se benefician del estilo largo porque los lectores de pantalla pronuncian las palabras completas 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 forma incómoda o requerir reglas de pronunciación especiales.

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 escribir las unidades completas para evitar confusión.

Los resúmenes de entrenamientos e informes de sesiones usan 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 "1 h 15 min".

Los informes formales y la documentación usan el estilo largo para mantener estándares de escritura consistentes. Los informes empresariales, registros médicos y documentos oficiales generalmente escriben las duraciones de tiempo completas 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 completamente 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 captar la duración sin ninguna ambigüedad o esfuerzo de 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 propósito 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 a través de múltiples valores.

Los controles de reproductores de vídeo usan el 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 permanece claro.

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

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

Las interfaces de reserva de vuelos usan el estilo corto para mostrar la duración del viaje. Mostrar "8 h y 15 min" en un resultado de búsqueda de vuelos 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 hr, 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 encaja 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 de gráficas y superposiciones de datos necesitan texto mínimo para evitar ocultar el contenido visual subyacente. Usar "2h 30m" en lugar de "2 hr y 30 min" ahorra caracteres mientras permanece legible para usuarios que entienden el contexto.

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

Las interfaces de smartwatch usan el estilo estrecho porque el espacio de pantalla es extremadamente limitado. Mostrar "1h 15m" en una pantalla circular pequeña 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 vídeos que muestra tiempo de ejecución o una lista de ejercicios que muestra duración por ejercicio se benefician de un 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 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 unidad.

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 es 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. Establécela en "long" para unidades escritas 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 tiene como valor predeterminado "short" si se omite.

Utiliza el estilo largo cuando la claridad y la accesibilidad importen más que el espacio, o cuando los usuarios puedan 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 las variaciones específicas de la configuración regional automáticamente, 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.