Comment afficher les durées en version courte ou longue
Utilisez l’option de style pour choisir entre abréviations, mots complets ou symboles compacts pour vos durées
Introduction
Lorsque vous indiquez combien de temps une activité prend, le format occupe plus ou moins d’espace. Une séance d’entraînement d’1 heure et 30 minutes peut s’afficher « 1 heure et 30 minutes », « 1 h et 30 min » ou « 1h30 min », selon l’espace disponible et la clarté souhaitée. Chaque format fait un compromis entre lisibilité et place occupée.
Chaque contexte nécessite un format différent. Par exemple, dans une barre de contrôle vidéo, on préfère un texte compact comme « 1h30 ». Un écran récapitulant la durée d’une séance privilégie une phrase claire comme « 1 heure et 30 minutes ». Un tableau de bord mobile affichant plusieurs minuteries adopte la forme la plus concise pour faire tenir l’information à l’écran.
La fonction Intl.DurationFormat de JavaScript propose l’option style pour contrôler cet affichage. Vous pouvez choisir une présentation longue avec les noms complets, courte avec des abréviations standard, ou étroite pour une version ultra compacte. Cette option vous permet d’ajuster précisément l’apparence des durées pour vos utilisateurs.
Ce que contrôle l’option de style
L’option style dans Intl.DurationFormat accepte trois valeurs pour le formatage en texte : "long", "short", et "narrow". Chaque valeur produit un niveau de détail différent pour l’affichage de la durée.
La valeur « long » écrit les unités en toutes lettres, comme « 1 heure et 30 minutes ». La valeur « short » utilise des abréviations courantes comme « 1 h et 30 min ». La valeur « narrow » propose la version la plus compacte possible, par exemple « 1h30 min », en supprimant souvent les espaces et en utilisant des symboles minimaux.
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"
L’option style est définie par défaut sur "short" si vous ne la précisez pas. Cela signifie que le formatage de la durée utilise les abréviations standard sauf si vous demandez explicitement un autre style d’affichage.
Formater les durées en style long
Le style long écrit le nom complet de chaque unité. Ce format apporte une clarté maximale au prix de l’utilisation de plus d’espace horizontal.
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"
Le formateur gère automatiquement les formes singulier et pluriel. Une heure utilise le singulier « heure » tandis que plusieurs heures utilisent le pluriel « heures ». Vous n’avez pas à vous soucier de choisir la forme appropriée.
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"
Chaque type d’unité est entièrement écrit, quel que soit le nombre d’unités affichées dans la durée.
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"
Le formateur ajoute les conjonctions appropriées entre les unités. L’anglais utilise des virgules et « and » pour séparer les unités. La conjonction apparaît avant la dernière unité de la liste.
Le style long rend les durées immédiatement compréhensibles, sans exiger des utilisateurs d’interpréter des abréviations. Les utilisateurs peu familiers avec les abréviations de temps trouvent les unités écrites en toutes lettres plus accessibles.
Formater les durées en style court
Le style court utilise des abréviations standard reconnues par la plupart des gens. Ce format équilibre lisibilité et gain de place.
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"
Le formateur utilise les abréviations les plus courantes. « heures » devient « h », « minutes » devient « min » et « secondes » devient « s ». Ces abréviations restent lisibles tout en réduisant le nombre de caractères.
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"
Le style court est le comportement par défaut. Si vous ne précisez pas l’option style, le formateur utilise automatiquement le style court.
const formatter = new Intl.DurationFormat("en-US");
console.log(formatter.format({ hours: 2, minutes: 30 }));
// Output: "2 hr and 30 min"
Ce choix par défaut rend le style court pratique lorsque vous souhaitez obtenir des durées abrégées standard sans spécifier explicitement l’option de style.
Vous pouvez formater différents types de durées en style court pour voir les abréviations standard.
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"
Chaque type d’unité utilise son abréviation standard. Les jours restent « j », les semaines deviennent « sem » et les millisecondes « ms ». Ces abréviations sont largement reconnues et fonctionnent bien dans la plupart des cas.
Formater des durées en style étroit
Le style étroit offre la présentation la plus compacte possible. Ce format supprime les espaces et n'utilise que les symboles essentiels pour économiser chaque caractère.
const formatter = new Intl.DurationFormat("en-US", {
style: "narrow"
});
const duration = { hours: 2, minutes: 30 };
console.log(formatter.format(duration));
// Output: "2h 30m"
Le formateur utilise des abréviations d'une seule lettre et un espacement minimal. Les heures deviennent « h », les minutes « m » et les secondes « s ». Le résultat est bien plus compact que les styles court ou long.
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"
Chaque unité a une représentation étroite différente selon les conventions standards.
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"
Le style étroit est idéal lorsque l'espace est très limité et que les utilisateurs sont familiers avec le contexte de mesure du temps. Le format condensé suppose que les utilisateurs sauront interpréter les unités sans séparation ou explication explicite.
Comparer les styles long, court et étroit
Les différences entre les trois styles apparaissent clairement quand on formate les mêmes durées avec chaque option.
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
Le style long utilise des mots complets et des conjonctions explicites. Le style court utilise des abréviations standards avec des conjonctions. Le style étroit n'utilise que des lettres uniques et un espacement minimal. Cette progression illustre le compromis entre clarté et efficacité d'espace.
Vous pouvez comparer différentes durées pour voir comment chaque style gère divers intervalles de temps.
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 différence de nombre de caractères devient importante sur plusieurs durées. Dans un tableau ou une liste avec de nombreuses durées, le style étroit économise beaucoup d'espace horizontal par rapport au style long.
Les styles de durée selon les langues
Les trois styles s'adaptent à la langue spécifiée. Chaque langue utilise ses propres abréviations, noms d'unités, conjonctions et conventions d'espacement.
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 分
Le style long varie beaucoup selon la langue, chaque idiome ayant ses mots pour les unités de temps. L’allemand utilise « Stunden » pour les heures, le français « heures », et le japonais « 時間 ». Le formateur gère automatiquement ces variations grammaticales.
Le style court s’adapte aussi aux conventions locales. L’allemand utilise « Std. » pour les heures, le français préfère « h », et le japonais ajoute des espaces entre les chiffres et les unités. Ces abréviations propres à chaque langue reflètent la façon dont chaque culture écrit la durée en version abrégée.
Le formateur gère les conjonctions selon les règles de chaque langue. L’anglais utilise « and », l’allemand « und », le français « et », et le japonais supprime la conjonction. Chaque langue produit un rendu qui semble naturel pour ses locuteurs.
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
Le style étroit présente aussi des différences selon la langue. L’anglais utilise des lettres seules comme « h », « m » et « s ». L’espagnol et le portugais préfèrent « min » au lieu de « m » pour les minutes. Ces variations reflètent des conventions locales pour l’abréviation du temps.
Quand utiliser le style long
Le style long est à privilégier quand la clarté et l’accessibilité priment sur la place disponible. Il permet de rendre la durée immédiatement compréhensible, sans qu’il faille deviner ce que signifient les unités.
Les interfaces axées sur l’accessibilité bénéficient du style long, car les lecteurs d’écran prononcent plus naturellement les mots en toutes lettres. Par exemple, entendre « 2 heures et 30 minutes » sonne bien plus naturel qu’« 2 h et 30 min », qui peut être mal énoncé ou nécessiter des règles de prononciation particulières.
Pour les contenus éducatifs, le style long est utile car les apprenants ne connaissent pas toujours les abréviations de durée. Les supports pédagogiques doivent écrire les unités en toutes lettres pour éviter toute confusion.
Les résumés d’entraînement et les rapports de session utilisent le style long pour un ton clair et professionnel. Une appli de fitness mettra en avant une durée terminée comme « 1 heure et 15 minutes » plutôt que « 1h 15m ».
Les rapports formels et la documentation optent pour le style long afin de respecter des standards rédactionnels cohérents. Les comptes-rendus professionnels, dossiers médicaux ou documents officiels épellent généralement les durées plutôt que de les abréger.
Les utilisateurs internationaux bénéficient du format long lorsque les utilisateurs sont susceptibles d’apprendre la langue. Des noms d’unités écrits en toutes lettres comme « heures » et « minutes » sont plus faciles à comprendre que les abréviations pour les non-natifs.
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"
Le format long privilégie la compréhension à la concision. Utilisez-le chaque fois que les utilisateurs doivent saisir la durée sans ambiguïté ni effort d’interprétation.
Quand utiliser le format court
Le format court est idéal dans les contextes où l’espace est limité et où les abréviations sont largement comprises. C’est généralement le choix le plus courant pour les applications polyvalentes.
Les interfaces mobiles tirent parti du format court, car la largeur de l’écran est limitée. Les cartes de tableau de bord affichant plusieurs minuteurs nécessitent des durées compactes pour que toutes les informations tiennent à l’écran. Utiliser « 2 h et 30 min » au lieu de « 2 heures et 30 minutes » économise 11 caractères par durée, ce qui compte rapidement si plusieurs valeurs sont affichées.
Les contrôles de lecteurs vidéo utilisent le format court pour afficher la durée sans encombrer l’interface. Afficher « 1 h et 46 min » dans la barre de contrôle est plus compact que « 1 heure et 46 minutes » tout en restant clair.
Les tableaux de données affichant des durées dans des colonnes nécessitent une largeur constante. Des abréviations courtes comme « h », « min » et « s » gardent les colonnes étroites. Des unités longues comme « heures », « minutes » et « secondes » élargissent inutilement les colonnes.
Les applications de minuterie utilisent le format court, car les utilisateurs habitués savent reconnaître les abréviations de temps. Un compte à rebours affichant « 5 min et 30 s » offre un bon équilibre entre clarté et efficacité de l’espace d’affichage.
Les interfaces de réservation de vols utilisent le format court pour indiquer la durée du trajet. Afficher « 8 h et 15 min » dans un résultat de recherche de vol est plus clair que « 8h 15m » mais plus compact que « 8 heures et 15 minutes ».
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"
Le style court trouve un bon équilibre entre clarté et efficacité. La plupart des utilisateurs reconnaissent sans difficulté les abréviations standards comme h, min et s.
Quand utiliser le style étroit
Le style étroit est idéal dans des contextes très contraints en espace, où chaque caractère compte et où les utilisateurs sont très familiers avec la notation temporelle.
Les widgets compacts affichant une seule métrique peuvent utiliser le style étroit quand la taille d'affichage est minimale. Un minuteur affichant « 5m 30s » en gros texte sera plus lisible que « 5 minutes et 30 secondes ».
Les visualisations de données très denses profitent aussi du style étroit. Les étiquettes de graphique, annotations et superpositions privilégient un texte minimal pour éviter de masquer le contenu visuel. Utiliser « 2h 30m » au lieu de « 2 h et 30 min » économise des caractères tout en restant lisible pour ceux qui maîtrisent ce format.
Les widgets pour écrans d'accueil sur mobile, avec un espace limité, utilisent le style étroit pour afficher un maximum d'informations. Un widget de suivi d'entraînement montrant plusieurs sessions récentes sur une petite tuile profite d'une notation de durée compacte.
Les interfaces de montres connectées adoptent le style étroit, car l'écran est extrêmement réduit. Afficher « 1h 15m » sur un petit écran circulaire est plus efficace que de longs formats.
Les vues en liste affichant de nombreux éléments avec des durées peuvent utiliser le style étroit pour garder chaque ligne compacte. Une playlist musicale indiquant la durée des morceaux, une liste de vidéos montrant leur durée, ou une liste d'exercices avec la durée par mouvement sont tous plus lisibles avec un format minimal.
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" }
// ]
Le style étroit part du principe que les utilisateurs maîtrisent la notation du temps et reconnaissent les unités sans aide. Ce choix privilégie l’efficacité de l’espace au détriment de la clarté.
Combiner le style avec d’autres options de formatage
L'option style fonctionne avec toutes les autres options de formatage de durée. Vous pouvez choisir quelles unités afficher tout en sélectionnant le style d'affichage.
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"
Cette combinaison affiche les heures avec le style long mais utilise un format numérique avec des zéros non significatifs pour les minutes et les secondes. Le résultat est un format hybride mêlant texte et chiffres.
Vous pouvez formater seulement certaines unités tout en conservant un style cohérent.
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"
Le formateur affiche uniquement les heures et les minutes même si l'objet durée inclut des secondes. Cela vous permet de contrôler les unités qui apparaissent dans le résultat.
Vous pouvez créer des formats personnalisés en combinant différents styles d'unités.
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"
Cela produit un format mixte où chaque unité utilise un niveau de verbosité différent. Même si c'est inhabituel, cette flexibilité vous permet de créer des formats spécialisés si besoin.
À retenir
L'option style contrôle l'apparence des durées lors du formatage avec Intl.DurationFormat. Réglez-la sur "long" pour des unités entièrement écrites comme « 2 heures et 30 minutes », sur "short" pour des abréviations standards comme « 2 h et 30 min », ou sur "narrow" pour des formes compactes comme « 2h 30m ». Si cette option est omise, la valeur par défaut est "short".
Utilisez le style long quand la clarté et l’accessibilité priment sur l’espace, ou lorsque les utilisateurs ne connaissent pas les abréviations du temps. Utilisez le style court pour des applications générales où l’espace est important et les abréviations standards sont comprises. Servez-vous du style étroit uniquement dans les contextes très limités en place où les utilisateurs ont l’habitude de la notation du temps.
Le formateur gère automatiquement les différences propres à la langue, y compris les noms d’unités, les abréviations, les conjonctions, les conventions d’espacement et les formes plurielles. Associez style à d’autres options de formatage pour contrôler les unités affichées et leur apparence.