Comment formater des durées comme 2 heures 30 minutes
Afficher les durées dans la langue de l'utilisateur avec localisation automatique
Introduction
Lorsque vous montrez combien de temps quelque chose prend, vous devez afficher cette durée d'une manière compréhensible pour les utilisateurs. Une vidéo affiche une durée de 2 heures 30 minutes, une application de fitness suit la durée d'exercice, un outil de gestion de projet affiche le temps d'achèvement des tâches. Sans localisation, vous pourriez écrire du code comme celui-ci :
const hours = 2;
const minutes = 30;
const timeSpan = `${hours}h ${minutes}m`;
Cela produit "2h 30m" pour tous les utilisateurs, quelle que soit la langue. Les utilisateurs français voient "2h 30m" alors qu'ils s'attendent à "2 h 30 min". Les utilisateurs allemands voient des abréviations anglaises au lieu de "2 Std. 30 Min". Les utilisateurs espagnols n'ont pas de conjonction "y" entre les unités.
JavaScript fournit l'API Intl.DurationFormat pour formater les durées selon la langue et les conventions culturelles de l'utilisateur. Cette leçon explique comment créer des formateurs de durée, construire des objets de durée et afficher correctement les durées pour n'importe quelle locale.
Ce que sont les durées
Une durée représente une période de temps, et non un point dans le temps. Le nombre 150 minutes est une durée. Le 15 mars 2025 à 14h30 est une date et une heure.
Cette distinction est importante car les dates impliquent des calendriers, des fuseaux horaires et des règles historiques. Les durées mesurent le temps écoulé sans contexte de calendrier. Vous ne pouvez pas ajouter un fuseau horaire à une durée car les durées existent indépendamment de tout moment spécifique.
Utilisez Intl.DurationFormat pour les durées. Utilisez Intl.DateTimeFormat pour les dates et heures. Utilisez Intl.RelativeTimeFormat pour les expressions relatives comme "il y a 2 heures".
Créer un formateur de durée
Le constructeur Intl.DurationFormat prend une locale et un objet d'options. La locale détermine la langue de sortie. Les options contrôlent le style de formatage et l'affichage des unités.
const formatter = new Intl.DurationFormat('en', { style: 'long' });
Appelez format() avec un objet de durée pour produire une chaîne formatée. L'objet de durée contient des propriétés numériques pour les unités de temps.
const duration = { hours: 2, minutes: 30 };
formatter.format(duration);
// "2 hours and 30 minutes"
L'API gère automatiquement les abréviations, les conjonctions, l'ordre des mots et l'espacement en fonction de la locale.
Créer des objets de durée
Un objet de durée est un objet JavaScript simple avec des propriétés pour les unités de temps. Incluez uniquement les unités que vous souhaitez afficher.
const duration1 = { hours: 2, minutes: 30 };
const duration2 = { minutes: 5, seconds: 45 };
const duration3 = { hours: 1, minutes: 15, seconds: 30 };
L'API prend en charge ces unités de temps : years, months, weeks, days, hours, minutes, seconds, milliseconds, microseconds, nanoseconds.
Vous n'avez pas besoin d'inclure toutes les unités. Omettez toute unité que vous ne souhaitez pas afficher.
const formatter = new Intl.DurationFormat('en', { style: 'long' });
formatter.format({ hours: 2, minutes: 30 });
// "2 hours and 30 minutes"
formatter.format({ minutes: 30 });
// "30 minutes"
formatter.format({ hours: 2 });
// "2 hours"
Choisir un style de formatage
L'option style contrôle la densité de sortie. Quatre styles sont disponibles : long, short, narrow, et digital.
Le style long utilise des mots complets. Utilisez-le pour la prose et les zones de contenu principales.
const duration = { hours: 2, minutes: 30 };
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// "2 hours and 30 minutes"
Le style court utilise des abréviations courantes. Utilisez-le lorsque l'espace est limité mais que la lisibilité est importante.
new Intl.DurationFormat('en', { style: 'short' }).format(duration);
// "2 hr and 30 min"
Le style étroit utilise un minimum de caractères. Utilisez-le pour les affichages compacts comme les interfaces mobiles ou les tableaux de données.
new Intl.DurationFormat('en', { style: 'narrow' }).format(duration);
// "2h 30m"
Le style digital produit une sortie similaire à un minuteur avec des deux-points. Utilisez-le pour les lecteurs multimédias et les affichages de compte à rebours.
new Intl.DurationFormat('en', { style: 'digital' }).format(duration);
// "2:30:00"
Le style digital nécessite que vous incluiez toutes les unités de la plus grande à la plus petite. Si vous formatez des heures et des minutes, vous devez également inclure les secondes.
Formater les durées dans différentes langues
La même durée se formate différemment dans chaque langue. L'API gère automatiquement toute la localisation.
const duration = { hours: 2, minutes: 30 };
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// "2 hours and 30 minutes"
new Intl.DurationFormat('fr', { style: 'long' }).format(duration);
// "2 heures et 30 minutes"
new Intl.DurationFormat('de', { style: 'long' }).format(duration);
// "2 Stunden und 30 Minuten"
new Intl.DurationFormat('es', { style: 'long' }).format(duration);
// "2 horas y 30 minutos"
new Intl.DurationFormat('ja', { style: 'long' }).format(duration);
// "2時間30分"
Remarquez comment chaque locale utilise des mots et des conjonctions différents. Le français utilise "et", l'allemand utilise "und", l'espagnol utilise "y", le japonais n'utilise pas de conjonctions. L'API connaît ces règles pour chaque locale.
Les styles court et étroit sont également correctement localisés.
new Intl.DurationFormat('fr', { style: 'short' }).format(duration);
// "2 h et 30 min"
new Intl.DurationFormat('de', { style: 'narrow' }).format(duration);
// "2 Std. 30 Min."
Formater les durées selon la locale de l'utilisateur
Au lieu de coder en dur une locale, utilisez la langue préférée de l'utilisateur depuis le navigateur. La propriété navigator.language renvoie la préférence linguistique principale de l'utilisateur.
const userLocale = navigator.language;
const formatter = new Intl.DurationFormat(userLocale, { style: 'short' });
const duration = { hours: 2, minutes: 30 };
formatter.format(duration);
// La sortie varie selon la locale de l'utilisateur
// Pour en-US : "2 hr and 30 min"
// Pour de-DE : "2 Std. und 30 Min."
// Pour fr-FR : "2 h et 30 min"
Cela affiche les durées selon les attentes de chaque utilisateur sans nécessiter de sélection manuelle de la locale.
Convertir des millisecondes en objets de durée
Les calculs de temps produisent souvent des millisecondes. Convertissez les millisecondes en objets de durée en divisant par les facteurs appropriés.
const milliseconds = 9000000; // 2 heures 30 minutes
const hours = Math.floor(milliseconds / 3600000);
const minutes = Math.floor((milliseconds % 3600000) / 60000);
const seconds = Math.floor((milliseconds % 60000) / 1000);
const duration = { hours, minutes, seconds };
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// "2 hours, 30 minutes and 0 seconds"
Omettez les valeurs nulles sauf si vous souhaitez spécifiquement les afficher.
const duration = {};
if (hours > 0) duration.hours = hours;
if (minutes > 0) duration.minutes = minutes;
if (seconds > 0) duration.seconds = seconds;
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// "2 hours and 30 minutes"
Calculer les intervalles de temps entre deux dates
Calculez la durée entre deux dates en soustrayant les timestamps, puis convertissez le résultat en un objet de durée.
const startTime = new Date('2025-10-15T10:00:00');
const endTime = new Date('2025-10-15T12:30:00');
const diffMs = endTime - startTime;
const hours = Math.floor(diffMs / 3600000);
const minutes = Math.floor((diffMs % 3600000) / 60000);
const duration = { hours, minutes };
new Intl.DurationFormat('en', { style: 'short' }).format(duration);
// "2 hr and 30 min"
Cette approche fonctionne pour tout calcul de temps qui produit des millisecondes.
Formater les durées des lecteurs vidéo
Les lecteurs vidéo affichent la durée dans les contrôles. Utilisez le style digital ou narrow pour un affichage compact.
function formatVideoDuration(totalSeconds) {
const hours = Math.floor(totalSeconds / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = Math.floor(totalSeconds % 60);
const duration = hours > 0
? { hours, minutes, seconds }
: { minutes, seconds };
const locale = navigator.language;
return new Intl.DurationFormat(locale, { style: 'digital' }).format(duration);
}
formatVideoDuration(9000); // "2:30:00"
formatVideoDuration(330); // "5:30"
Ceci inclut conditionnellement les heures uniquement lorsque nécessaire, affichant "5:30" pour les vidéos courtes et "2:30:00" pour les contenus plus longs.
Formater les durées d'entraînement
Les applications de fitness suivent la durée d'exercice. Utilisez le style long pour les résumés de séance et le style étroit pour les vues de liste compactes.
function formatWorkoutDuration(startTime, endTime, locale) {
const diffMs = endTime - startTime;
const hours = Math.floor(diffMs / 3600000);
const minutes = Math.floor((diffMs % 3600000) / 60000);
const duration = hours > 0
? { hours, minutes }
: { minutes };
return new Intl.DurationFormat(locale, { style: 'long' }).format(duration);
}
const workoutStart = new Date('2025-10-15T07:00:00');
const workoutEnd = new Date('2025-10-15T09:30:00');
formatWorkoutDuration(workoutStart, workoutEnd, 'en');
// "2 hours and 30 minutes"
formatWorkoutDuration(workoutStart, workoutEnd, 'es');
// "2 horas y 30 minutos"
Formater les durées des tâches de projet
Les outils de gestion de projet affichent la durée des tâches. Utilisez le style court pour les affichages de tableau de bord.
function formatTaskDuration(minutes, locale) {
const hours = Math.floor(minutes / 60);
const mins = minutes % 60;
const duration = {};
if (hours > 0) duration.hours = hours;
if (mins > 0) duration.minutes = mins;
return new Intl.DurationFormat(locale, { style: 'short' }).format(duration);
}
formatTaskDuration(150, 'en');
// "2 hr and 30 min"
formatTaskDuration(45, 'en');
// "45 min"
formatTaskDuration(150, 'de');
// "2 Std. und 30 Min."
Formater différentes unités de temps
Les durées ne se limitent pas aux heures et aux minutes. Formatez n'importe quelle combinaison d'unités prises en charge.
const formatter = new Intl.DurationFormat('en', { style: 'long' });
formatter.format({ days: 3, hours: 2 });
// "3 days and 2 hours"
formatter.format({ minutes: 45, seconds: 30 });
// "45 minutes and 30 seconds"
formatter.format({ hours: 1, minutes: 30, seconds: 45 });
// "1 hour, 30 minutes and 45 seconds"
L'API gère les conjonctions et séparateurs appropriés pour toute combinaison d'unités.
Formater les durées avec uniquement des secondes
Lorsque votre durée est inférieure à une minute, incluez uniquement les secondes.
const formatter = new Intl.DurationFormat('en', { style: 'short' });
formatter.format({ seconds: 45 });
// "45 sec"
formatter.format({ seconds: 5 });
// "5 sec"
Pour les durées très courtes, vous pouvez inclure les millisecondes.
formatter.format({ seconds: 5, milliseconds: 500 });
// "5 sec and 500 ms"
Réutiliser les instances de formateur pour de meilleures performances
La création d'un nouveau formateur implique le chargement des données de localisation et le traitement des options. Lorsque vous formatez plusieurs durées avec la même locale et le même style, créez le formateur une seule fois et réutilisez-le.
const formatter = new Intl.DurationFormat('en', { style: 'short' });
const durations = [
{ hours: 1, minutes: 30 },
{ hours: 2, minutes: 15 },
{ minutes: 45 }
];
durations.map(d => formatter.format(d));
// ["1 hr and 30 min", "2 hr and 15 min", "45 min"]
Ce modèle améliore les performances lors du formatage de nombreuses durées dans des boucles ou des rendus répétés.
Compatibilité des navigateurs
L'API Intl.DurationFormat est devenue une fonctionnalité de base en mars 2025. Elle fonctionne dans les dernières versions de Chrome, Edge, Firefox et Safari. Les navigateurs plus anciens ne prennent pas en charge cette API.
Vérifiez la compatibilité avant d'utiliser l'API.
if (typeof Intl.DurationFormat !== 'undefined') {
const formatter = new Intl.DurationFormat('en', { style: 'short' });
return formatter.format(duration);
} else {
return `${duration.hours}h ${duration.minutes}m`;
}
Cela fournit une solution de repli pour les navigateurs plus anciens tout en utilisant l'API native lorsqu'elle est disponible.