Intl.DurationFormat est désormais disponible en tant que référence

Jeremy Wagner

Publié le 20 mars 2025

Sur une page Web, vous pouvez souvent voir un texte indiquant le temps restant avant un événement ou le temps écoulé depuis un événement. Il s'agit généralement d'une chaîne qui indique la durée en heures, minutes, secondes ou autres unités de temps utiles.

Intl.DurationFormat est une fonctionnalité utile qui effectue cette tâche dans le navigateur, tout en tenant compte de vos besoins d'internationalisation, sans avoir besoin de JavaScript supplémentaire. Depuis mars 2025, il est disponible en tant que référence "Nouveau".

Fonctionnement de Intl.DurationFormat

Intl.DurationFormat est une classe qui, lors de son instanciation, renvoie une chaîne décrivant la durée. Il fonctionne en spécifiant un objet contenant des clés et des valeurs correspondant aux unités de temps pour lesquelles vous souhaitez générer une chaîne:

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

Pour renvoyer une chaîne au format long, transmettez une valeur de 'long' à l'option style dans le deuxième argument du constructeur:

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

Jusqu'à présent, ces exemples génèrent des chaînes en anglais. Étant donné qu'il s'agit d'une fonctionnalité d'internationalisation, son utilité réelle est que vous pouvez transmettre n'importe quelle langue valide et obtenir des chaînes mises en forme dans la langue prise en charge dont vous avez besoin:

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

Ces exemples ne sont qu'un aperçu de ce que vous pouvez faire avec cette nouvelle fonctionnalité. Pour en savoir plus sur ses capacités, consultez la documentation Intl.DurationFormat sur MDN.