Comment afficher les durées sous forme courte ou longue
Utilisez l'option de style pour contrôler si les durées apparaissent comme des abréviations, des mots complets ou des symboles compacts
Introduction
Lorsque vous affichez la durée d'une activité, le format occupe différents espaces. Une durée d'entraînement d'1 heure et 30 minutes peut apparaître comme "1 heure et 30 minutes", "1 h et 30 min", ou "1h 30m" selon l'espace disponible et le niveau de clarté nécessaire. Chaque format fait un compromis entre lisibilité et espace horizontal.
Différents contextes nécessitent différents choix de formatage. Une barre de contrôle de lecteur vidéo montrant la durée bénéficie d'un texte compact comme "1h 30m". Un écran récapitulatif d'entraînement expliquant la durée de la session nécessite un texte clair comme "1 heure et 30 minutes". Un tableau de bord mobile affichant plusieurs valeurs de minuterie utilise la forme la plus compacte possible pour adapter l'information à l'écran.
L'API Intl.DurationFormat de JavaScript fournit l'option style pour contrôler ce choix. Vous pouvez sélectionner entre un affichage long avec des mots complets, un affichage court avec des abréviations standard, ou un affichage étroit avec la représentation la plus compacte possible. Cette option vous donne un contrôle précis sur la façon dont les durées apparaissent aux utilisateurs.
Ce que contrôle l'option style
L'option style dans Intl.DurationFormat accepte trois valeurs pour le formatage textuel : "long", "short" et "narrow". Chaque valeur produit un niveau différent de verbosité pour l'affichage de la durée.
La valeur long épelle les noms d'unités complets comme "1 heure et 30 minutes". La valeur short utilise des abréviations standard comme "1 h et 30 min". La valeur narrow produit la représentation la plus compacte comme "1h 30m", supprimant souvent les espaces et 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 l'omettez. Cela signifie que le formatage de la durée utilise des abréviations standard, sauf si vous demandez explicitement un style d'affichage différent.
Formater les durées avec le style long
Le style long épelle les noms d'unités complets. Ce format offre une clarté maximale au prix d'un espace horizontal supplémentaire.
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 singulières et plurielles. Une heure utilise le singulier "hour" tandis que plusieurs heures utilisent le pluriel "hours". Vous n'avez pas besoin de déterminer manuellement quelle forme utiliser.
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 épelé complètement, quel que soit le nombre d'unités présentes 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 claires sans exiger des utilisateurs qu'ils interprètent des abréviations. Les utilisateurs peu familiers avec les abréviations de temps trouvent les unités épelées plus accessibles.
Formater les durées avec le style court
Le style court utilise des abréviations standard que la plupart des gens reconnaissent. Ce format équilibre la lisibilité avec l'efficacité d'espace.
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 des abréviations communément reconnues. Les heures deviennent "hr", les minutes deviennent "min" et les secondes deviennent "sec". Ces abréviations maintiennent la lisibilité 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 omettez 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"
Cette valeur par défaut rend le style court pratique lorsque vous souhaitez des durées abrégées standard sans spécifier explicitement l'option de style.
Vous pouvez formater différents types de durée avec le 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 "days", les semaines utilisent "wk" et les millisecondes utilisent "ms". Ces abréviations sont largement reconnues et fonctionnent bien dans la plupart des contextes.
Formater les durées avec le style étroit
Le style étroit produit la représentation la plus compacte possible. Ce format supprime les espaces et utilise des symboles minimaux 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));
// Résultat : "2h 30m"
Le formateur utilise des abréviations d'une seule lettre et un espacement minimal. Les heures deviennent "h", les minutes deviennent "m" et les secondes deviennent "s". Le résultat est nettement 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 }));
// Résultat : "1h 46m 40s"
console.log(formatter.format({ minutes: 5, seconds: 30 }));
// Résultat : "5m 30s"
console.log(formatter.format({ hours: 3, minutes: 15 }));
// Résultat : "3h 15m"
Différentes unités produisent différentes représentations étroites basées sur les conventions standard.
const formatter = new Intl.DurationFormat("en-US", {
style: "narrow"
});
console.log(formatter.format({ days: 2, hours: 5 }));
// Résultat : "2d 5h"
console.log(formatter.format({ weeks: 1, days: 3 }));
// Résultat : "1w 3d"
console.log(formatter.format({ hours: 1, minutes: 30, seconds: 45, milliseconds: 500 }));
// Résultat : "1h 30m 45s 500ms"
Le style étroit fonctionne mieux lorsque l'espace est extrêmement limité et que les utilisateurs sont familiers avec le contexte de mesure du temps. Le format condensé suppose que les utilisateurs peuvent interpréter les unités sans séparation ou explication explicite.
Comparer les styles long, court et étroit
Les différences entre les trois options de style deviennent claires lorsque vous formatez 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));
// Résultat :
// 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 standard avec des conjonctions. Le style étroit utilise des lettres uniques avec un espacement minimal. Cette progression montre le compromis entre clarté et efficacité d'espace.
Vous pouvez comparer différentes durées pour voir comment chaque style gère diverses périodes 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("");
});
// Résultat :
// 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 significative pour plusieurs durées. Dans un tableau ou une liste affichant de nombreuses durées, le style étroit économise un espace horizontal substantiel par rapport au style long.
Comment les styles de durée varient selon les langues
Les trois options de style s'adaptent à la locale que vous spécifiez. Différentes langues utilisent différentes 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 considérablement selon les locales car chaque langue a ses propres mots pour les unités de temps. L'allemand utilise "Stunden" pour les heures, le français utilise "heures" et le japonais utilise "時間". Le formateur gère automatiquement les variations grammaticales.
Le style court s'adapte également aux conventions locales. L'allemand utilise "Std." pour les heures, le français utilise "h" et le japonais ajoute des espaces entre les nombres et les caractères d'unité. Ces abréviations spécifiques à la locale reflètent la façon dont chaque culture écrit les durées sous forme abrégée.
Le formateur gère les conjonctions selon les règles linguistiques. L'anglais utilise "and", l'allemand utilise "und", le français utilise "et" et le japonais omet complètement les conjonctions. Chaque locale produit un résultat d'apparence naturelle pour sa langue.
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 montre quelques variations selon les locales. L'anglais utilise des lettres uniques comme "h", "m" et "s". L'espagnol et le portugais utilisent "min" au lieu de simplement "m" pour les minutes. Ces différences reflètent les conventions spécifiques à chaque locale pour la notation compacte du temps.
Quand utiliser le style long
Le style long fonctionne mieux lorsque la clarté et l'accessibilité sont plus importantes que l'efficacité spatiale. Ce choix rend les durées immédiatement compréhensibles sans nécessiter d'interprétation.
Les interfaces axées sur l'accessibilité bénéficient du style long car les lecteurs d'écran prononcent les mots écrits en toutes lettres plus naturellement. Un lecteur d'écran annonçant "2 heures et 30 minutes" sonne plus naturel que "2 h et 30 min", qui pourrait être lu maladroitement ou nécessiter des règles de prononciation spéciales.
Le contenu éducatif bénéficie du style long car les apprenants peuvent ne pas être familiers avec les abréviations de temps. Les supports pédagogiques expliquant les durées devraient épeler les unités pour éviter toute confusion.
Les résumés d'entraînement et les rapports de session utilisent le style long pour maintenir un ton clair et professionnel. Une application de fitness montrant la durée d'entraînement terminée se lit mieux avec "1 heure et 15 minutes" qu'avec "1h 15m".
Les rapports formels et la documentation utilisent le style long pour maintenir des normes d'écriture cohérentes. Les rapports d'entreprise, les dossiers médicaux et les documents officiels épellent généralement les durées plutôt que de les abréger.
Les audiences internationales bénéficient du style long lorsque les utilisateurs peuvent être en train d'apprendre la langue. Les noms d'unités écrits en toutes lettres comme "heures" et "minutes" sont plus faciles à comprendre que les abréviations pour les locuteurs 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 style long privilégie la compréhension à la brièveté. Utilisez-le chaque fois que les utilisateurs doivent saisir la durée sans ambiguïté ni effort d'interprétation.
Quand utiliser le style court
Le style court fonctionne mieux dans les contextes où l'espace est important mais où les abréviations sont largement comprises. C'est le choix le plus courant pour les applications à usage général.
Les interfaces mobiles bénéficient du style court car la largeur d'écran est limitée. Les cartes de tableau de bord affichant plusieurs minuteries nécessitent des durées compactes pour adapter les informations à 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 s'accumule avec plusieurs valeurs.
Les contrôles de lecteur vidéo utilisent le style 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 cohérente. Les abréviations courtes comme "h", "min" et "s" maintiennent les largeurs de colonnes gérables. Les unités longues comme "heures", "minutes" et "secondes" élargissent inutilement les colonnes.
Les applications de minuterie utilisent le style court car les utilisateurs qui vérifient les minuteries sont familiers avec les abréviations de temps. Une minuterie de compte à rebours affichant "5 min et 30 s" équilibre la clarté avec une utilisation efficace de l'espace d'affichage.
Les interfaces de réservation de vols utilisent le style court pour montrer la durée du voyage. 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 établit un équilibre entre clarté et efficacité. La plupart des utilisateurs reconnaissent les abréviations standard comme h, min et s sans confusion.
Quand utiliser le style étroit
Le style étroit fonctionne mieux dans des contextes extrêmement contraints en espace où chaque caractère compte et où les utilisateurs sont très familiers avec la notation du temps.
Les widgets compacts affichant des métriques uniques peuvent utiliser le style étroit lorsque la taille d'affichage est minimale. Un widget de minuterie affichant "5m 30s" en grand texte s'adapte mieux que "5 minutes et 30 secondes".
Les visualisations de données avec des informations denses bénéficient du style étroit. Les étiquettes de graphiques, les annotations de graphiques et les superpositions de données nécessitent un texte minimal pour éviter d'obscurcir le contenu visuel sous-jacent. Utiliser "2h 30m" au lieu de "2 h et 30 min" économise des caractères tout en restant lisible pour les utilisateurs qui comprennent le contexte.
Les widgets d'écran d'accueil mobile avec un espace limité utilisent le style étroit pour maximiser la densité d'information. Un widget de suivi d'entraînement affichant plusieurs sessions récentes dans une petite tuile bénéficie d'une notation de durée compacte.
Les interfaces de montres intelligentes utilisent le style étroit car l'espace d'écran est extrêmement limité. Afficher "1h 15m" sur un petit écran circulaire fonctionne mieux que des formats plus longs.
Les vues en liste montrant de nombreux éléments avec des durées peuvent utiliser le style étroit pour garder chaque ligne compacte. Une playlist musicale affichant les durées des pistes, une liste de vidéos montrant la durée d'exécution, ou une liste d'exercices montrant la durée par exercice bénéficient tous d'un formatage 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 suppose que les utilisateurs sont familiers avec la notation du temps et peuvent interpréter les unités sans assistance. Cette option privilégie l'efficacité spatiale maximale 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 contrôler quelles unités apparaissent tout en choisissant 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 formatage numérique avec remplissage de zéros pour les minutes et les secondes. Le résultat est un format hybride mélangeant texte et nombres.
Vous pouvez formater uniquement des unités spécifiques tout en utilisant 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 n'affiche que les heures et les minutes même si l'objet de durée inclut des secondes. Cela vous donne le contrôle sur les unités qui apparaissent dans la sortie.
Vous pouvez créer des formats personnalisés en mélangeant 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. Bien qu'inhabituel, cette flexibilité vous permet de créer des formats spécialisés lorsque nécessaire.
Ce qu'il faut retenir
L'option style contrôle comment les durées apparaissent lors du formatage avec Intl.DurationFormat. Définissez-la sur "long" pour des unités écrites en toutes lettres comme "2 heures et 30 minutes", "short" pour des abréviations standard comme "2 h et 30 min", ou "narrow" pour des formes compactes comme "2h 30m". L'option est définie par défaut sur "short" si elle est omise.
Utilisez le style long lorsque la clarté et l'accessibilité sont plus importantes que l'espace, ou lorsque les utilisateurs peuvent ne pas être familiers avec les abréviations temporelles. Utilisez le style court pour les applications générales où l'espace compte et où les utilisateurs comprennent les abréviations standard. Utilisez le style étroit uniquement dans des contextes extrêmement contraints en espace où les utilisateurs sont très familiers avec la notation temporelle.
Le formateur gère automatiquement les variations spécifiques à la locale, y compris les différents noms d'unités, abréviations, conjonctions, conventions d'espacement et formes plurielles. Combinez style avec d'autres options de formatage pour contrôler quelles unités apparaissent et comment elles s'affichent.