Comment afficher le temps relatif sous forme courte ou longue
Utilisez l'option style pour contrôler si les temps relatifs apparaissent sous forme d'abréviations, de mots complets ou de symboles compacts
Introduction
Lorsque vous affichez des temps relatifs comme « il y a 2 heures » ou « dans 3 mois », le format occupe différentes quantités d'espace. Un horodatage indiquant l'âge du contenu peut apparaître comme « il y a 2 heures », « il y a 2 h » ou « 2 h » selon l'espace disponible et le niveau de clarté nécessaire. Chaque format arbitre entre lisibilité et espace horizontal.
Différents contextes nécessitent différents choix de formatage. Un fil d'actualité sur les réseaux sociaux affichant les horodatages des publications 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 « 2 h ». Une visualisation de données montrant des événements chronologiques utilise la forme la plus condensée possible pour faire tenir les informations à l'écran.
L'objet Intl.RelativeTimeFormat de JavaScript fournit l'option style pour contrôler ce choix. Vous pouvez sélectionner entre un affichage long avec des mots écrits en entier, 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 de verbosité différent pour la sortie du temps relatif.
La valeur long écrit les 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 « 2 h », 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 écrit les mots en entier. 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 "heure" tandis que plusieurs heures utilisent le pluriel "heures". 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 écrite complètement 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 obliger les utilisateurs à interpréter des abréviations. Les utilisateurs peu familiers avec les abréviations de temps trouvent les mots écrits en entier 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 lisibilité et 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 couramment reconnues. Les heures deviennent "h", les minutes deviennent "min" et les secondes deviennent "s". 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 "s", les minutes utilisent "min", les mois utilisent "mois" et les années utilisent "an". Ces abréviations sont largement reconnues et fonctionnent bien dans la plupart des contextes.
Vous pouvez formater à la fois 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 "il y a" tandis que les temps futurs utilisent "dans". 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 un minimum de symboles pour économiser chaque caractère.
const formatter = new Intl.RelativeTimeFormat("en-US", {
style: "narrow"
});
console.log(formatter.format(-2, "hour"));
// Output: "2h ago"
console.log(formatter.format(3, "day"));
// Output: "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 "min" et les secondes deviennent "s". Le résultat est plus compact que les styles court ou long.
const formatter = new Intl.RelativeTimeFormat("en-US", {
style: "narrow"
});
console.log(formatter.format(-30, "second"));
// Output: "30s ago"
console.log(formatter.format(-5, "minute"));
// Output: "5m ago"
console.log(formatter.format(-3, "month"));
// Output: "3mo ago"
console.log(formatter.format(2, "year"));
// Output: "in 2y"
Le style étroit varie selon la locale et l'unité. Certaines unités produisent un résultat nettement 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"));
// Output: "7 days ago"
console.log(formatter.format(2, "week"));
// Output: "in 2w"
console.log(formatter.format(-1, "quarter"));
// Output: "1q ago"
Le style étroit fonctionne mieux lorsque l'espace est extrêmement limité et que les utilisateurs connaissent 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 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));
// Output:
// 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.
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("");
});
// Output:
// -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 sur plusieurs horodatages. Dans un fil d'actualité 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 paramètres régionaux, car chaque langue possède 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 locales. 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 aux paramètres régionaux reflètent la manière dont chaque culture écrit les temps relatifs sous forme abrégée.
Le formateur gère automatiquement les variations grammaticales. Chaque paramètre régional produit un résultat d'apparence naturelle 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 paramètres régionaux. 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 aux paramètres régionaux pour la notation compacte du temps.
Quand utiliser le style long
Le style long fonctionne mieux lorsque la clarté et l'accessibilité importent plus que l'efficacité de l'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 entier de manière plus naturelle. Un lecteur d'écran annonçant "il y a 2 heures" sonne plus naturel que "il y a 2 h", qui pourrait être lu de manière maladroite 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 doivent écrire les unités en entier pour éviter toute confusion.
Les fils d'actualité et les chronologies utilisent le style long pour maintenir un ton clair et conversationnel. Une publication sur les réseaux sociaux affichant "il y a 3 heures" se lit plus naturellement que "il y a 3 h" 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 épellent généralement les temps relatifs plutôt que de les abréger.
Les audiences internationales bénéficient du style long lorsque les utilisateurs apprennent la langue. Les noms d'unités épelés 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 aucune ambiguïté ni effort d'interprétation.
Quand utiliser le style court
Le style court fonctionne mieux dans les contextes où l'espace compte mais où les abréviations sont largement comprises. Ce format équilibre clarté et efficacité.
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 horodatages nécessitent des temps relatifs compacts pour faire tenir les informations à 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'additionne sur plusieurs valeurs.
Les sections de commentaires utilisent le style court 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 les 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 les colonnes inutilement.
Les panneaux de notification utilisent le style court car les utilisateurs consultant 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 court pour afficher l'âge des messages. Afficher "il y a 2 jours" dans une liste de messages est plus clair que "il y a 2 j" mais plus compact que "il y a 2 jours" épelé 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 court établit 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 5 min" 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 graphes et les marqueurs de chronologie nécessitent un texte minimal pour éviter d'obscurcir le contenu visuel sous-jacent. Utiliser "il y a 2 h" au lieu de "il y a 2 hr." é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'informations. 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 connectées utilisent le style étroit car l'espace d'écran est extrêmement limité. Afficher "il y a 1 h" 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 morceaux récemment joués, une application vidéo affichant l'historique de visionnage ou une application de fitness affichant l'historique d'entraînement bénéficient tous 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é d'espace 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 le niveau de 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 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 l'affichage des temps relatifs lors du formatage avec Intl.RelativeTimeFormat. Définissez-la sur "long" pour des mots écrits en toutes lettres 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 "il y a 2 h". 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 de temps. Utilisez le style court pour les applications à usage général 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 aux paramètres régionaux, y compris les différents mots, abréviations, ordre des mots et conventions d'espacement. Combinez style avec l'option numeric pour contrôler à la fois l'apparition du langage naturel et l'affichage de la sortie numérique.