Comment afficher le temps relatif en forme courte ou longue
Utilisez l'option style pour contrôler si les temps relatifs apparaissent comme des abréviations, des mots complets ou des symboles compacts
Introduction
Lorsque vous affichez des temps relatifs comme "il y a 2 heures" ou "dans 3 mois", le format occupe différents espaces. Un horodatage indiquant l'âge du contenu peut apparaître comme "il y a 2 heures", "il y a 2 h." ou "il y a 2h" selon l'espace dont vous disposez 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. Un fil d'actualités sur les réseaux sociaux affichant des horodatages bénéficie d'un texte clair comme "il y a 2 heures". Un tableau de bord mobile affichant plusieurs indicateurs d'activité nécessite un texte compact comme "il y a 2h". Une visualisation de données montrant des événements chronologiques utilise la forme la plus condensée possible pour adapter les informations à l'écran.
L'option style de Intl.RelativeTimeFormat en JavaScript permet de 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 temps relatifs apparaissent aux utilisateurs.
Ce que contrôle l'option style
L'option style dans Intl.RelativeTimeFormat accepte trois valeurs : "long", "short" et "narrow". Chaque valeur produit un niveau différent de verbosité pour l'affichage du temps relatif.
La valeur long épelle des mots complets comme "il y a 2 heures". La valeur short utilise des abréviations standard comme "il y a 2 h.". La valeur narrow produit la représentation la plus compacte comme "il y a 2h", supprimant souvent les espaces et utilisant des symboles minimaux.
const longFormatter = new Intl.RelativeTimeFormat("en-US", {
style: "long"
});
console.log(longFormatter.format(-2, "hour"));
// Output: "2 hours ago"
const shortFormatter = new Intl.RelativeTimeFormat("en-US", {
style: "short"
});
console.log(shortFormatter.format(-2, "hour"));
// Output: "2 hr. ago"
const narrowFormatter = new Intl.RelativeTimeFormat("en-US", {
style: "narrow"
});
console.log(narrowFormatter.format(-2, "hour"));
// Output: "2h ago"
L'option style est définie par défaut sur "long" si vous l'omettez. Cela signifie que le formatage du temps relatif utilise des mots complets, sauf si vous demandez explicitement un style d'affichage différent.
Formater le temps relatif avec le style long
Le style long épelle les mots complets. Ce format offre une clarté maximale au prix d'un espace horizontal supplémentaire.
const formatter = new Intl.RelativeTimeFormat("en-US", {
style: "long"
});
console.log(formatter.format(-2, "hour"));
// Output: "2 hours ago"
console.log(formatter.format(3, "day"));
// Output: "in 3 days"
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.RelativeTimeFormat("en-US", {
style: "long"
});
console.log(formatter.format(-1, "hour"));
// Output: "1 hour ago"
console.log(formatter.format(-2, "hour"));
// Output: "2 hours ago"
console.log(formatter.format(1, "day"));
// Output: "in 1 day"
console.log(formatter.format(5, "day"));
// Output: "in 5 days"
Chaque unité de temps est complètement épelée, quelle que soit l'unité que vous utilisez.
const formatter = new Intl.RelativeTimeFormat("en-US", {
style: "long"
});
console.log(formatter.format(-30, "second"));
// Output: "30 seconds ago"
console.log(formatter.format(-5, "minute"));
// Output: "5 minutes ago"
console.log(formatter.format(-3, "month"));
// Output: "3 months ago"
console.log(formatter.format(2, "year"));
// Output: "in 2 years"
Le style long rend les temps relatifs immédiatement clairs sans exiger des utilisateurs qu'ils interprètent des abréviations. Les utilisateurs non familiers avec les abréviations de temps trouvent les mots épelés plus accessibles.
Formater le temps relatif 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.RelativeTimeFormat("en-US", {
style: "short"
});
console.log(formatter.format(-2, "hour"));
// Output: "2 hr. ago"
console.log(formatter.format(3, "day"));
// Output: "in 3 days"
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.RelativeTimeFormat("en-US", {
style: "short"
});
console.log(formatter.format(-30, "second"));
// Output: "30 sec. ago"
console.log(formatter.format(-5, "minute"));
// Output: "5 min. ago"
console.log(formatter.format(-3, "month"));
// Output: "3 mo. ago"
console.log(formatter.format(2, "year"));
// Output: "in 2 yr."
Chaque unité de temps utilise son abréviation standard. Les secondes utilisent "sec.", les minutes utilisent "min.", les mois utilisent "mo." et les années utilisent "yr.". Ces abréviations sont largement reconnues et fonctionnent bien dans la plupart des contextes.
Vous pouvez formater les temps passés et futurs avec le style court.
const formatter = new Intl.RelativeTimeFormat("en-US", {
style: "short"
});
console.log(formatter.format(-7, "day"));
// Output: "7 days ago"
console.log(formatter.format(2, "week"));
// Output: "in 2 wk."
console.log(formatter.format(-1, "quarter"));
// Output: "1 qtr. ago"
Le formateur gère les deux directions de manière cohérente. Les temps passés utilisent "ago" tandis que les temps futurs utilisent "in". Les abréviations restent les mêmes quelle que soit la direction.
Formater le temps relatif 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.RelativeTimeFormat("en-US", {
style: "narrow"
});
console.log(formatter.format(-2, "hour"));
// Résultat : "2h ago"
console.log(formatter.format(3, "day"));
// Résultat : "in 3 days"
Le formateur utilise des abréviations d'une seule lettre et un espacement minimal pour la plupart des unités. Les heures deviennent "h", les minutes deviennent "m" et les secondes deviennent "s". Le résultat est plus compact que les styles long ou court.
const formatter = new Intl.RelativeTimeFormat("en-US", {
style: "narrow"
});
console.log(formatter.format(-30, "second"));
// Résultat : "30s ago"
console.log(formatter.format(-5, "minute"));
// Résultat : "5m ago"
console.log(formatter.format(-3, "month"));
// Résultat : "3mo ago"
console.log(formatter.format(2, "year"));
// Résultat : "in 2y"
Le style étroit varie selon la locale et l'unité. Certaines unités produisent un résultat significativement plus court tandis que d'autres restent similaires au style court. L'anglais conserve "days" écrit en entier mais abrège les heures, minutes et secondes en lettres uniques.
const formatter = new Intl.RelativeTimeFormat("en-US", {
style: "narrow"
});
console.log(formatter.format(-7, "day"));
// Résultat : "7 days ago"
console.log(formatter.format(2, "week"));
// Résultat : "in 2w"
console.log(formatter.format(-1, "quarter"));
// Résultat : "1q ago"
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 explicite ou explication.
Comparer les styles long, court et étroit
Les différences entre les trois options de style deviennent évidentes lorsque vous formatez les mêmes temps relatifs avec chaque option.
const longFormatter = new Intl.RelativeTimeFormat("en-US", {
style: "long"
});
const shortFormatter = new Intl.RelativeTimeFormat("en-US", {
style: "short"
});
const narrowFormatter = new Intl.RelativeTimeFormat("en-US", {
style: "narrow"
});
const value = -2;
const unit = "hour";
console.log("Long: " + longFormatter.format(value, unit));
console.log("Short: " + shortFormatter.format(value, unit));
console.log("Narrow: " + narrowFormatter.format(value, unit));
// Résultat :
// Long: 2 hours ago
// Short: 2 hr. ago
// Narrow: 2h ago
Le style long utilise des mots complets et un espacement explicite. Le style court utilise des abréviations standard avec des points. 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 valeurs de temps relatif pour voir comment chaque style gère diverses périodes de temps.
const times = [
{ value: -30, unit: "second" },
{ value: -5, unit: "minute" },
{ value: -2, unit: "hour" },
{ value: 3, unit: "day" },
{ value: 2, unit: "week" },
{ value: -3, unit: "month" }
];
times.forEach(time => {
const long = new Intl.RelativeTimeFormat("en-US", {
style: "long"
}).format(time.value, time.unit);
const short = new Intl.RelativeTimeFormat("en-US", {
style: "short"
}).format(time.value, time.unit);
const narrow = new Intl.RelativeTimeFormat("en-US", {
style: "narrow"
}).format(time.value, time.unit);
console.log(`${time.value} ${time.unit}:`);
console.log(` Long: ${long}`);
console.log(` Short: ${short}`);
console.log(` Narrow: ${narrow}`);
console.log("");
});
// Résultat :
// -30 second:
// Long: 30 seconds ago
// Short: 30 sec. ago
// Narrow: 30s ago
//
// -5 minute:
// Long: 5 minutes ago
// Short: 5 min. ago
// Narrow: 5m ago
//
// -2 hour:
// Long: 2 hours ago
// Short: 2 hr. ago
// Narrow: 2h ago
//
// 3 day:
// Long: in 3 days
// Short: in 3 days
// Narrow: in 3 days
//
// 2 week:
// Long: in 2 weeks
// Short: in 2 wk.
// Narrow: in 2w
//
// -3 month:
// Long: 3 months ago
// Short: 3 mo. ago
// Narrow: 3mo ago
La différence de nombre de caractères devient significative avec plusieurs horodatages. Dans un flux ou une liste affichant de nombreux temps relatifs, le style étroit économise un espace horizontal substantiel par rapport au style long.
Comment les styles de temps relatif 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, mots et conventions d'espacement.
const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];
const value = -2;
const unit = "hour";
locales.forEach(locale => {
const longFormatter = new Intl.RelativeTimeFormat(locale, {
style: "long"
});
const shortFormatter = new Intl.RelativeTimeFormat(locale, {
style: "short"
});
console.log(locale + ":");
console.log(" Long: " + longFormatter.format(value, unit));
console.log(" Short: " + shortFormatter.format(value, unit));
});
// Output:
// en-US:
// Long: 2 hours ago
// Short: 2 hr. ago
// de-DE:
// Long: vor 2 Stunden
// Short: vor 2 Std.
// fr-FR:
// Long: il y a 2 heures
// Short: il y a 2 h
// ja-JP:
// Long: 2 時間前
// Short: 2 時間前
Le style long varie considérablement selon les locales car chaque langue a ses propres mots pour les unités de temps et un ordre des mots différent. L'allemand utilise "vor" avant la quantité de temps, le français utilise "il y a" avant la quantité, et le japonais place l'indicateur de temps après le nombre. Le formateur gère automatiquement l'ordre des mots.
Le style court s'adapte également aux conventions de la locale. L'allemand utilise "Std." pour les heures, le français utilise "h", et le japonais utilise le même format que le style long. Ces abréviations spécifiques à la locale reflètent la façon dont chaque culture écrit les temps relatifs sous forme abrégée.
Le formateur gère automatiquement les variations grammaticales. Chaque locale produit un résultat naturel pour sa langue.
const locales = ["en-US", "es-ES", "pt-BR"];
const value = -3;
const unit = "month";
locales.forEach(locale => {
const narrowFormatter = new Intl.RelativeTimeFormat(locale, {
style: "narrow"
});
console.log(locale + ": " + narrowFormatter.format(value, unit));
});
// Output:
// en-US: 3mo ago
// es-ES: hace 3 m
// pt-BR: há 3 meses
Le style étroit montre des variations selon les locales. L'anglais utilise "mo" pour les mois, l'espagnol utilise "m", et le portugais écrit "meses" en entier. 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'économie d'espace. Ce choix rend les temps relatifs 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 "il y a 2 heures" sonne plus naturel que "il y a 2 h", 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 horodatages devraient épeler les unités pour éviter toute confusion.
Les flux d'activités et les chronologies utilisent le style long pour maintenir un ton clair et conversationnel. Un post sur les réseaux sociaux indiquant "il y a 3 heures" se lit plus naturellement que "il y a 3h" dans un texte fluide.
Les rapports formels et la documentation utilisent le style long pour maintenir des normes d'écriture cohérentes. Les rapports d'entreprise, les journaux d'audit et les documents officiels indiquent généralement les temps relatifs en toutes lettres 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 "jours" sont plus faciles à comprendre que les abréviations pour les locuteurs non natifs.
function formatActivityTimestamp(date, locale) {
const formatter = new Intl.RelativeTimeFormat(locale, {
style: "long",
numeric: "auto"
});
const now = new Date();
const diffInMs = date - now;
const diffInHours = Math.round(diffInMs / (1000 * 60 * 60));
return formatter.format(diffInHours, "hour");
}
const threeHoursAgo = new Date(Date.now() - 3 * 60 * 60 * 1000);
console.log("Activity: " + formatActivityTimestamp(threeHoursAgo, "en-US"));
// Output: "Activity: 3 hours ago"
Le style long privilégie la compréhension plutôt que la brièveté. Utilisez-le chaque fois que les utilisateurs doivent saisir le temps relatif sans ambiguïté ni effort d'interprétation.
Quand utiliser le style abrégé
Le style abrégé fonctionne mieux dans les contextes où l'espace est limité mais où les abréviations sont largement comprises. Ce format équilibre clarté et efficacité.
Les interfaces mobiles bénéficient du style abrégé car la largeur d'écran est limitée. Les cartes de tableau de bord affichant plusieurs horodatages nécessitent des temps relatifs compacts pour adapter l'information à l'écran. Utiliser "il y a 2 h" au lieu de "il y a 2 heures" économise des caractères par horodatage, ce qui s'accumule avec plusieurs valeurs.
Les sections de commentaires utilisent le style abrégé pour montrer quand les commentaires ont été publiés sans encombrer l'interface. Afficher "il y a 5 min" à côté d'un commentaire est plus compact que "il y a 5 minutes" tout en restant clair.
Les tableaux de données affichant des horodatages 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 panneaux de notification utilisent le style abrégé car les utilisateurs qui consultent les notifications sont familiers avec les abréviations de temps. Une notification affichant "il y a 1 h" équilibre clarté et utilisation efficace de l'espace d'affichage.
Les clients de messagerie utilisent le style abrégé pour montrer l'âge des messages. Afficher "il y a 2 j" dans une liste de messages est plus clair que "il y a 2j" mais plus compact que "il y a 2 jours" écrit complètement.
function formatCommentTimestamp(date, locale) {
const formatter = new Intl.RelativeTimeFormat(locale, {
style: "short",
numeric: "auto"
});
const now = new Date();
const diffInMs = date - now;
const diffInMinutes = Math.round(diffInMs / (1000 * 60));
return formatter.format(diffInMinutes, "minute");
}
const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000);
console.log(formatCommentTimestamp(fiveMinutesAgo, "en-US"));
// Output: "5 min. ago"
Le style abrégé trouve un équilibre entre clarté et efficacité. La plupart des utilisateurs reconnaissent les abréviations standard 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 temporelle.
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 "il y a 5m" en petit texte s'adapte mieux que "il y a 5 minutes".
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 marqueurs de chronologie nécessitent un texte minimal pour éviter d'obscurcir le contenu visuel sous-jacent. Utiliser "il y a 2h" au lieu de "il y a 2 heures" é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'activité affichant plusieurs événements récents dans une petite tuile bénéficie d'une notation temporelle relative compacte.
Les interfaces de montres intelligentes utilisent le style étroit car l'espace d'écran est extrêmement limité. Afficher "il y a 1h" sur un petit écran circulaire fonctionne mieux que des formats plus longs.
Les vues en liste affichant de nombreux éléments avec des horodatages peuvent utiliser le style étroit pour garder chaque ligne compacte. Une application musicale affichant les pistes récemment jouées, une application vidéo affichant l'historique de visionnage, ou une application de fitness affichant l'historique des entraînements bénéficient toutes d'un formatage d'horodatage minimal.
function formatCompactTimestamp(date, locale) {
const formatter = new Intl.RelativeTimeFormat(locale, {
style: "narrow",
numeric: "auto"
});
const now = new Date();
const diffInMs = date - now;
const diffInHours = Math.round(diffInMs / (1000 * 60 * 60));
return formatter.format(diffInHours, "hour");
}
const twoHoursAgo = new Date(Date.now() - 2 * 60 * 60 * 1000);
console.log(formatCompactTimestamp(twoHoursAgo, "en-US"));
// Output: "2h ago"
Le style étroit suppose que les utilisateurs sont familiers avec la notation temporelle 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 l'option numérique
L'option style fonctionne avec l'option numeric. L'option numeric contrôle si vous obtenez un langage naturel comme "hier" ou une sortie numérique comme "il y a 1 jour". L'option style contrôle la verbosité de la sortie numérique lorsqu'elle apparaît.
const autoLong = new Intl.RelativeTimeFormat("en-US", {
numeric: "auto",
style: "long"
});
console.log(autoLong.format(-1, "day"));
// Output: "yesterday"
console.log(autoLong.format(-2, "day"));
// Output: "2 days ago"
const autoShort = new Intl.RelativeTimeFormat("en-US", {
numeric: "auto",
style: "short"
});
console.log(autoShort.format(-1, "day"));
// Output: "yesterday"
console.log(autoShort.format(-2, "day"));
// Output: "2 days ago"
Lorsque numeric est "auto" et que le formateur utilise un langage naturel comme "hier", l'option style n'a aucun effet car il n'y a pas de sortie numérique à styliser. Le formateur produit la même sortie quel que soit le style.
Lorsque le formateur produit une sortie numérique, l'option style contrôle la verbosité.
const alwaysLong = new Intl.RelativeTimeFormat("en-US", {
numeric: "always",
style: "long"
});
console.log(alwaysLong.format(-1, "day"));
// Output: "1 day ago"
const alwaysShort = new Intl.RelativeTimeFormat("en-US", {
numeric: "always",
style: "short"
});
console.log(alwaysShort.format(-1, "day"));
// Output: "1 day ago"
const alwaysNarrow = new Intl.RelativeTimeFormat("en-US", {
numeric: "always",
style: "narrow"
});
console.log(alwaysNarrow.format(-1, "day"));
// Output: "1 day ago"
Pour les jours, les trois styles produisent une sortie similaire en anglais. Les différences de style apparaissent plus clairement avec d'autres unités de temps.
const alwaysLong = new Intl.RelativeTimeFormat("en-US", {
numeric: "always",
style: "long"
});
const alwaysShort = new Intl.RelativeTimeFormat("en-US", {
numeric: "always",
style: "short"
});
const alwaysNarrow = new Intl.RelativeTimeFormat("en-US", {
numeric: "always",
style: "narrow"
});
console.log("Long: " + alwaysLong.format(-2, "hour"));
console.log("Short: " + alwaysShort.format(-2, "hour"));
console.log("Narrow: " + alwaysNarrow.format(-2, "hour"));
// Output:
// Long: 2 hours ago
// Short: 2 hr. ago
// Narrow: 2h ago
Cette combinaison vous donne un contrôle total à la fois sur l'apparition du langage naturel et sur l'affichage de la sortie numérique.
Ce qu'il faut retenir
L'option style contrôle comment les temps relatifs apparaissent lors du formatage avec Intl.RelativeTimeFormat. Définissez-la sur "long" pour des mots complets comme "il y a 2 heures", "short" pour des abréviations standard comme "il y a 2 h", ou "narrow" pour des formes compactes comme "2h". L'option est définie par défaut sur "long" 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 est important 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 mots, abréviations, ordre des mots et conventions d'espacement. Combinez l'option style avec l'option numeric pour contrôler à la fois si le langage naturel apparaît et comment s'affiche la sortie numérique.