Intl.DurationFormat ahora está disponible en Baseline

Jeremy Wagner

Fecha de publicación: 20 de marzo de 2025

Un dato común que puedes ver en una página web es un texto que indica cuánto tiempo falta para un evento determinado o cuánto tiempo transcurrió desde que ocurrió un evento. Por lo general, se representa como una cadena que comunica la duración en horas, minutos, segundos o alguna otra unidad de tiempo útil.

Intl.DurationFormat es una función útil que hace esto por ti en el navegador y, al mismo tiempo, tiene en cuenta cualquier necesidad de internacionalización que puedas tener, sin necesidad de JavaScript adicional. A partir de marzo de 2025, se convirtió en el modelo de referencia recientemente disponible.

Cómo funciona Intl.DurationFormat

Intl.DurationFormat es una clase que, cuando se crea una instancia, muestra una cadena que describe la duración. Para ello, especifica un objeto que contiene claves y valores que corresponden a las unidades de tiempo para las que deseas que se genere una cadena:

// Specify the duration:
const duration = {
  years: 1,
  hours: 20,
  minutes: 15,
  seconds: 35
};

// Output: '1 yr, 20 hr, 15 min, 35 sec'
new Intl.DurationFormat('en').format(duration);

Para mostrar una cadena en formato largo, pasa un valor de 'long' a la opción style en el segundo argumento del constructor:

const duration = {
  years: 1,
  hours: 20,
  minutes: 15,
  seconds: 35
};

// Output: '1 year, 20 hours, 15 minutes, 35 seconds'
new Intl.DurationFormat('en', { style: 'long' }).format(duration);

Hasta ahora, estos ejemplos generan cadenas en inglés. Dado que esta es una función de internacionalización, su verdadera utilidad es que puedes pasar cualquier configuración regional válida y obtener cadenas con formato en cualquier idioma admitido que necesites:

const duration = {
  years: 1,
  hours: 20,
  minutes: 15,
  seconds: 35
};

// Output: '1 Jahr, 20 Stunden, 15 Minuten und 35 Sekunden'
new Intl.DurationFormat('de', { style: 'long' }).format(duration);

// Output: '1 año, 20 horas, 15 minutos y 35 segundos'
new Intl.DurationFormat('es', { style: 'long' }).format(duration);

// Output: '1年20小时15分钟35秒钟'
new Intl.DurationFormat('zh', { style: 'long' }).format(duration);

// Output: '1 år, 20 timer, 15 minutter og 35 sekunder'
new Intl.DurationFormat('no', { style: 'long' }).format(duration);

// Output: 'mwaka 1, saa 20, dakika 15 na sekunde 35'
new Intl.DurationFormat('sw', { style: 'long' }).format(duration);

Estos ejemplos solo muestran lo que puedes hacer con esta nueva función. Para obtener más información sobre sus capacidades, lee la documentación de Intl.DurationFormat en MDN.