Comment formater une date en JavaScript : guide de performance

Formatage de date en JavaScript : pas simplement "concaténer des chaînes"

La question "How do I format a date in JavaScript?" est l'une des plus populaires sur Stack Overflow. Et pour cause. Chaque développeur a au moins une fois été confronté à une situation où il faut afficher une date non pas au format standard "Fri Feb 14 2025 12:00:00 GMT+0300", mais de manière élégante : "14 février 2025" ou "2025-02-14". Cela semble simple, non ? Mais il y a suffisamment d'embûches et de problèmes de performance ici.

Dans cet article, nous allons analyser toutes les méthodes de formatage des dates en JavaScript : des plus simples aux plus performantes. Vous apprendrez à éviter les erreurs typiques et à rendre votre code non seulement élégant, mais aussi rapide. C'est parti !

Pourquoi le Date natif est-il si peu pratique ?

L'objet natif Date en JavaScript est, pour le moins, un "bagage du passé". Il ne fournit pas de méthode intégrée format(), comme en Python ou PHP. Au lieu de cela, vous devez assembler la date manuellement en utilisant des getters :

const date = new Date();\nconst day = String(date.getDate()).padStart(2, '0');\nconst month = String(date.getMonth() + 1).padStart(2, '0');\nconst year = date.getFullYear();\nconsole.log(`${year}-${month}-${day}`); // "2025-02-14"

Cela fonctionne, mais semble lourd. Et si vous devez également localiser la date (par exemple en russe), le code devient démesurément long. C'est pourquoi les développeurs cherchent des alternatives.

La méthode toLocaleDateString : simple et rapide

La façon la plus simple de formater une date en JavaScript est d'utiliser la méthode toLocaleDateString(). Elle accepte une locale et un objet d'options :

const date = new Date();\nconst options = { year: 'numeric', month: 'long', day: 'numeric' };\nconsole.log(date.toLocaleDateString('ru-RU', options)); // "14 février 2025"

Cette méthode s'adapte automatiquement à la locale. Vous voulez "February 14, 2025" ? Changez simplement la locale en 'en-US'.

Avantages :

\n
• Simplicité d'utilisation.
\n
• Localisation intégrée.
\n
• Le code se lit comme un langage naturel.
\n

Inconvénients :

\n
• Performance : chaque appel à toLocaleDateString() crée un nouvel objet formateur. Dans une boucle de 1000 éléments, cela peut être perceptible.
\n
• Contrôle limité sur le format (impossible, par exemple, d'afficher "14.02.2025" sans l'année).
\n

Intl.DateTimeFormat : puissant et efficace

Pour un contrôle plus fin et une optimisation, utilisez Intl.DateTimeFormat. C'est un objet qui peut être créé une fois et réutilisé plusieurs fois :

const formatter = new Intl.DateTimeFormat('ru-RU', {\n  year: 'numeric',\n  month: '2-digit',\n  day: '2-digit'\n});\n\nconst date1 = new Date();\nconst date2 = new Date('2024-12-25');\nconsole.log(formatter.format(date1)); // "14.02.2025"\nconsole.log(formatter.format(date2)); // "25.12.2024"

Pourquoi est-ce plus rapide ? Parce que l'objet formateur est créé une seule fois, et non à chaque appel. Dans les tests de performance, Intl.DateTimeFormat s'avère 5 à 10 fois plus rapide que toLocaleDateString() dans les boucles.

De plus, Intl.DateTimeFormat prend en charge des options supplémentaires telles que weekday, hour, minute, second et même timeZone :

const formatter = new Intl.DateTimeFormat('en-US', {\n  weekday: 'long',\n  year: 'numeric',\n  month: 'short',\n  day: 'numeric',\n  hour: '2-digit',\n  minute: '2-digit'\n});\nconsole.log(formatter.format(new Date())); // "Friday, Feb 14, 2025, 12:00 PM"

Question piège : que faire si vous devez afficher une date au format "2025-02-14" sans localisation ? Intl.DateTimeFormat ne peut pas afficher les heures, minutes et secondes séparément, mais pour les dates simples, c'est