Comment formater le temps relatif comme hier ou il y a 1 jour ?

Introduction

Les horodatages apparaissent dans toutes les applications web modernes. Une publication sur les réseaux sociaux affiche "publié hier" tandis qu'un tableau de bord d'analyse affiche "il y a 1 jour". Les deux décrivent le même intervalle de temps, mais la formulation crée des expériences différentes. La première semble conversationnelle et naturelle. La seconde semble précise et formelle.

JavaScript offre un contrôle sur ce choix de formatage grâce à l'API Intl.RelativeTimeFormat. Vous décidez si les utilisateurs voient des expressions naturelles comme "hier" ou des expressions numériques comme "il y a 1 jour". Cette décision affecte le caractère formel ou décontracté de votre interface.

L'option numeric contrôle le style de format

L'option numeric dans Intl.RelativeTimeFormat détermine le format de sortie. Cette option accepte deux valeurs.

La valeur auto produit des expressions en langage naturel lorsqu'elles existent. La valeur always produit des expressions numériques dans tous les cas.

const autoFormatter = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });
const alwaysFormatter = new Intl.RelativeTimeFormat('en-US', { numeric: 'always' });

Ces deux formateurs produisent des résultats différents pour les mêmes valeurs temporelles.

Utilisez auto pour afficher hier et demain

Définissez numeric sur auto lorsque vous souhaitez des expressions en langage naturel. Le formateur produit "hier", "aujourd'hui" et "demain" pour les valeurs de jour de -1, 0 et 1.

const rtf = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });

rtf.format(-1, 'day');  // "hier"
rtf.format(0, 'day');   // "aujourd'hui"
rtf.format(1, 'day');   // "demain"

Le formateur passe aux expressions numériques lorsqu'il n'existe pas d'équivalent naturel.

rtf.format(-2, 'day');  // "il y a 2 jours"
rtf.format(2, 'day');   // "dans 2 jours"

Cela crée un style mixte où les références temporelles courantes utilisent un langage naturel et les moins courantes utilisent des nombres.

Utiliser toujours pour afficher des valeurs numériques

Définissez numeric à always lorsque vous souhaitez une sortie numérique cohérente. Le formateur produit des expressions numériques pour toutes les valeurs, y compris -1, 0 et 1.

const rtf = new Intl.RelativeTimeFormat('en-US', { numeric: 'always' });

rtf.format(-1, 'day');  // "1 day ago"
rtf.format(0, 'day');   // "in 0 days"
rtf.format(1, 'day');   // "in 1 day"

La valeur always sert de valeur par défaut lorsque vous omettez l'option numeric.

const rtf = new Intl.RelativeTimeFormat('en-US');
rtf.format(-1, 'day');  // "1 day ago"

Cette valeur par défaut assure un formatage numérique cohérent, sauf si vous choisissez explicitement des expressions naturelles.

Des expressions temporelles naturelles existent dans d'autres langues

Les langues autres que l'anglais ont leurs propres expressions temporelles naturelles. Le français utilise "hier" pour yesterday, l'espagnol utilise "ayer" et le japonais utilise "昨日".

const frenchRtf = new Intl.RelativeTimeFormat('fr', { numeric: 'auto' });
frenchRtf.format(-1, 'day');  // "hier"
frenchRtf.format(1, 'day');   // "demain"

const spanishRtf = new Intl.RelativeTimeFormat('es', { numeric: 'auto' });
spanishRtf.format(-1, 'day');  // "ayer"
spanishRtf.format(1, 'day');   // "mañana"

const japaneseRtf = new Intl.RelativeTimeFormat('ja', { numeric: 'auto' });
japaneseRtf.format(-1, 'day');  // "昨日"
japaneseRtf.format(1, 'day');   // "明日"

L'option numeric fonctionne dans toutes les locales. Les utilisateurs voient des expressions naturelles dans leur propre langue lorsque vous choisissez auto. Ils voient des expressions numériques dans leur propre langue lorsque vous choisissez always.

Choisir en fonction du style de votre interface

Les interfaces formelles bénéficient de numeric: 'always'. Les tableaux de bord analytiques, les journaux système et les rapports techniques nécessitent un formatage précis et cohérent. Les valeurs numériques offrent cette précision pour toutes les plages temporelles.

Les interfaces décontractées bénéficient de numeric: 'auto'. Les flux de médias sociaux, les applications de messagerie et les forums communautaires créent une connexion grâce au langage naturel. Des expressions comme "hier" et "demain" semblent plus humaines.

Considérez la cohérence dans l'ensemble de votre interface. Mélanger les deux styles dans différentes parties de la même application crée de la confusion. Les utilisateurs s'attendent à ce que les horodatages suivent le même modèle tout au long de leur expérience.

La valeur par défaut always crée le comportement le plus prévisible. Choisissez auto délibérément lorsque le langage naturel améliore votre interface spécifique.