Comment formater le temps relatif en tant que hier ou il y a 1 jour ?

Introduction

Les horodatages apparaissent partout dans les applications web modernes. Une publication sur les réseaux sociaux affiche « publié hier » tandis qu'un tableau de bord analytique 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 via 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 sorties différentes 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');  // "yesterday"
rtf.format(0, 'day');   // "today"
rtf.format(1, 'day');   // "tomorrow"

Le formateur bascule vers des expressions numériques lorsqu'aucun équivalent naturel n'existe.

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

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

Utilisez always pour afficher des valeurs numériques

Définissez numeric sur 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 garantit un formatage numérique cohérent, sauf si vous choisissez explicitement des expressions naturelles.

Les 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.

Choisissez 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 fournissent cette précision sur toutes les plages temporelles.

Les interfaces informelles bénéficient de numeric: 'auto'. Les fils d'actualité des réseaux sociaux, les applications de messagerie et les forums communautaires créent du lien 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 de 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.