Comment Convertir les Horodatages en JavaScript : Tutoriel Complet avec Exemples

Introduction

Convertir des horodatages en JavaScript est une compétence fondamentale pour les développeurs web. Que vous travailliez avec des APIs, des bases de données ou des interfaces utilisateur, vous devrez fréquemment convertir entre horodatages Unix et dates lisibles. Ce tutoriel vous guidera à travers tout ce que vous devez savoir.

Ce que Vous Apprendrez

✅ Obtenir les horodatages actuels
✅ Convertir les horodatages en objets Date
✅ Convertir les objets Date en horodatages
✅ Formater les horodatages pour l'affichage
✅ Gérer différentes précisions d'horodatage
✅ Travailler avec les fuseaux horaires
✅ Pièges courants et comment les éviter

Prérequis

Des connaissances basiques en JavaScript suffisent. Aucune bibliothèque externe n'est requise pour ce tutoriel (bien que nous en mentionnerons quelques populaires à la fin).

Étape 1 : Obtenir l'Horodatage Actuel

L'opération la plus simple - obtenir l'heure actuelle comme horodatage.

Méthode 1 : Date.now() (Recommandé)


JAVASCRIPT
1// Obtenir l'horodatage actuel en millisecondes
2const timestamp = Date.now();
3console.log(timestamp);
4// Sortie : 1704067200000 (13 chiffres)

Pourquoi utiliser ceci ?

✅ Méthode la plus rapide
✅ Pas besoin de créer un objet Date
✅ La plus couramment utilisée

Méthode 2 : new Date().getTime()


JAVASCRIPT
1// Créer un objet Date et obtenir l'horodatage
2const timestamp = new Date().getTime();
3console.log(timestamp);
4// Sortie : 1704067200000 (13 chiffres)

Méthode 3 : Opérateur Plus Unaire


JAVASCRIPT
1// Raccourci utilisant plus unaire
2const timestamp = +new Date();
3console.log(timestamp);
4// Sortie : 1704067200000 (13 chiffres)

Étape 2 : Convertir Horodatage en Date

Depuis Millisecondes (13 chiffres)


JAVASCRIPT
1const timestamp = 1704067200000;
2const date = new Date(timestamp);
3console.log(date.toString());
4// Sortie : "Mon Jan 01 2024 00:00:00 GMT+0000"

Depuis Secondes (10 chiffres)


JAVASCRIPT
1const timestampSec = 1704067200;
2const date = new Date(timestampSec * 1000);
3console.log(date.toString());
4// Sortie : "Mon Jan 01 2024 00:00:00 GMT+0000"

Fonction de Détection Automatique


JAVASCRIPT
1function timestampVersDate(ts) {
2  const chaine = String(ts);
3  if (chaine.length === 10) {
4    return new Date(ts * 1000);
5  } else if (chaine.length === 13) {
6    return new Date(ts);
7  } else if (chaine.length === 16) {
8    return new Date(ts / 1000);
9  } else if (chaine.length === 19) {
10    return new Date(ts / 1000000);
11  }
12  throw new Error('Précision d\'horodatage inconnue');
13}

Étape 3 : Formater les Dates

Utiliser toLocaleString()


JAVASCRIPT
1const date = new Date(1704067200000);
2
3// Français (France)
4console.log(date.toLocaleString('fr-FR'));
5// Sortie : "01/01/2024, 00:00:00"
6
7// Avec options
8console.log(date.toLocaleString('fr-FR', {
9  year: 'numeric',
10  month: 'long',
11  day: 'numeric',
12  hour: '2-digit',
13  minute: '2-digit'
14}));
15// Sortie : "1 janvier 2024, 00:00"

Format ISO 8601


JAVASCRIPT
1const date = new Date(1704067200000);
2console.log(date.toISOString());
3// Sortie : "2024-01-01T00:00:00.000Z"

Étape 4 : Travailler avec les Fuseaux Horaires

Utiliser Intl.DateTimeFormat


JAVASCRIPT
1const date = new Date(1704067200000);
2
3// New York
4console.log(new Intl.DateTimeFormat('fr-FR', {
5  timeZone: 'America/New_York',
6  dateStyle: 'full',
7  timeStyle: 'long'
8}).format(date));
9
10// Tokyo
11console.log(new Intl.DateTimeFormat('fr-FR', {
12  timeZone: 'Asia/Tokyo',
13  dateStyle: 'full',
14  timeStyle: 'long'
15}).format(date));

Étape 5 : Convertir Date en Horodatage


JAVASCRIPT
1const date = new Date('2024-01-01T00:00:00Z');
2
3// En millisecondes
4const ms = date.getTime();
5console.log(ms); // 1704067200000
6
7// En secondes
8const sec = Math.floor(date.getTime() / 1000);
9console.log(sec); // 1704067200

Erreurs Courantes à Éviter

1. Oublier la Précision


JAVASCRIPT
1// ❌ Incorrect - traiter secondes comme millisecondes
2const date = new Date(1704067200); // Année 1970 !
3
4// ✅ Correct - multiplier par 1000
5const date = new Date(1704067200 * 1000);

2. Confusion de Fuseau Horaire


JAVASCRIPT
1// ❌ Incorrect - heure locale ambiguë
2const date = new Date("2024-01-01 12:00:00");
3
4// ✅ Correct - ISO 8601 explicite
5const date = new Date("2024-01-01T12:00:00Z");

3. Ne Pas Valider l'Entrée


JAVASCRIPT
1function timestampSecurise(ts) {
2  const num = Number(ts);
3  if (isNaN(num)) {
4    throw new Error('Horodatage invalide');
5  }
6  
7  const date = new Date(num * 1000);
8  if (isNaN(date.getTime())) {
9    throw new Error('Date résultante invalide');
10  }
11  
12  return date;
13}

Bibliothèques Recommandées

Pour des projets plus complexes, considérez ces bibliothèques :

Luxon↗ - Moderne, avec support des fuseaux horaires
date-fns↗ - Modulaire et légère
Day.js↗ - API similaire à Moment, très légère

Résumé

Vous avez appris comment :

Obtenir l'horodatage actuel avec Date.now()
Convertir les horodatages en objets Date
Formater les dates pour différentes locales
Gérer différentes précisions (s, ms, µs, ns)
Travailler avec les fuseaux horaires
Éviter les erreurs courantes

Essayez notre Convertisseur Unix Timestamp pour pratiquer ces conversions !