JS protip : Formatter une distance temporelle

Par Christophe Porteneuve • Publié le 28 octobre 2022 • 2 min

Après le protip d’avant-hier sur le formatage de dates et d’heures et celui d’hier sur le formatage d’intervalles temporels, nous bouclons le trio aujourd’hui en formatant des distances temporelles !

Intl.RelativeTimeFormat

Moins connu que DateTimeFormat, RelativeTimeFormat est là depuis un bon moment aussi pour exprimer des moments relativement à maintenant, donc sous forme de distance temporelle dans le passé ou l’avenir.

Hélas, ça ne prend pas comme argument un horodatage (ou deux), mais une quantité et une unité formelle, ce qui est déjà pas mal.

Le constructeur accepte le même argument de locales que DateTimeFormat (et toutes les API Intl, en fait), et les options éventuelles sont au nombre de deux :

• style, qui peut valoir 'long' (valeur par défaut, utilisant l’unité de distance principale en toutes lettres), 'short' (abrège l’unité) et 'narrow' (abrège encore davantage si le locale le permet)
• numeric, qui peut valoir 'always' (valeur par défaut, qui exprime la distance numériquement quelle qu’elle soit) ou 'auto' (qui retranscrira différemment certaines distances proches, généralement sous forme textuelle).

Regarde un peu :

const regularFR = new Intl.RelativeTimeFormat('fr-FR')
const shortFR = new Intl.RelativeTimeFormat('fr-FR', { style: 'short' })
const autoFR = new Intl.RelativeTimeFormat('fr-FR', { numeric: 'auto' })

const regularDE = new Intl.RelativeTimeFormat('de-DE')
const autoDE = new Intl.RelativeTimeFormat('de-DE', { numeric: 'auto' })

regularFR.format(1, 'day') // => 'dans 1 jour'
regularFR.format(-2, 'days') // => 'il y a 2 jours'
regularFR.format(3, 'weeks') // => 'dans 3 semaines'
regularFR.format(-1, 'month') // => 'il y a 1 mois'

shortFR.format(1, 'day') // => 'dans 1 j'
shortFR.format(-2, 'days') // => 'il y a 2 j'
shortFR.format(3, 'weeks') // => 'dans 3 sem.'
shortFR.format(-1, 'month') // => 'il y a 1 m.'

autoFR.format(1, 'day') // => 'demain'
autoFR.format(-2, 'days') // => 'avant-hier'
autoFR.format(1, 'week') // => 'la semaine prochaine'
autoFR.format(-1, 'month') // => 'le mois dernier'

regularDE.format(1, 'day') // => 'in 1 Tag'
regularDE.format(-1, 'months') // => 'vor 1 Monat'
autoDE.format(1, 'day') // => 'morgen'
autoDE.format(1, 'week') // => 'nächste Woche'

La. Classe. 😎

C’est dispo où ?

Bin écoute, partout. Si on prend tout ce que je t’ai montré ici, tu es tranquille sur tout navigateur qui a, disons, moins de 3 ans, ainsi que depuis Node 13 et Deno 1.8. Donc vas-y !

Des astuces en veux-tu en voilà !

On a tout plein d’articles et de vidéos existants et encore beaucoup à venir. Pour ne rien manquer, tu devrais penser à t’abonner à notre newsletter, à notre chaîne YouTube, nous suivre sur Twitter ou encore mieux, à suivre une de nos formations du feu de dieu 🔥 !