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é)

// Obtenir l'horodatage actuel en millisecondes
const timestamp = Date.now();
console.log(timestamp);
// 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()

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

Méthode 3 : Opérateur Plus Unaire

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

Étape 2 : Convertir Horodatage en Date

Depuis Millisecondes (13 chiffres)

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

Depuis Secondes (10 chiffres)

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

Fonction de Détection Automatique

function timestampVersDate(ts) {
  const chaine = String(ts);
  if (chaine.length === 10) {
    return new Date(ts * 1000);
  } else if (chaine.length === 13) {
    return new Date(ts);
  } else if (chaine.length === 16) {
    return new Date(ts / 1000);
  } else if (chaine.length === 19) {
    return new Date(ts / 1000000);
  }
  throw new Error('Précision d\'horodatage inconnue');
}

Étape 3 : Formater les Dates

Utiliser toLocaleString()

const date = new Date(1704067200000);

// Français (France)
console.log(date.toLocaleString('fr-FR'));
// Sortie : "01/01/2024, 00:00:00"

// Avec options
console.log(date.toLocaleString('fr-FR', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit'
}));
// Sortie : "1 janvier 2024, 00:00"

Format ISO 8601

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

Étape 4 : Travailler avec les Fuseaux Horaires

Utiliser Intl.DateTimeFormat

const date = new Date(1704067200000);

// New York
console.log(new Intl.DateTimeFormat('fr-FR', {
  timeZone: 'America/New_York',
  dateStyle: 'full',
  timeStyle: 'long'
}).format(date));

// Tokyo
console.log(new Intl.DateTimeFormat('fr-FR', {
  timeZone: 'Asia/Tokyo',
  dateStyle: 'full',
  timeStyle: 'long'
}).format(date));

Étape 5 : Convertir Date en Horodatage

const date = new Date('2024-01-01T00:00:00Z');

// En millisecondes
const ms = date.getTime();
console.log(ms); // 1704067200000

// En secondes
const sec = Math.floor(date.getTime() / 1000);
console.log(sec); // 1704067200

Erreurs Courantes à Éviter

1. Oublier la Précision

// ❌ Incorrect - traiter secondes comme millisecondes
const date = new Date(1704067200); // Année 1970 !

// ✅ Correct - multiplier par 1000
const date = new Date(1704067200 * 1000);

2. Confusion de Fuseau Horaire

// ❌ Incorrect - heure locale ambiguë
const date = new Date("2024-01-01 12:00:00");

// ✅ Correct - ISO 8601 explicite
const date = new Date("2024-01-01T12:00:00Z");

3. Ne Pas Valider l'Entrée

function timestampSecurise(ts) {
  const num = Number(ts);
  if (isNaN(num)) {
    throw new Error('Horodatage invalide');
  }

  const date = new Date(num * 1000);
  if (isNaN(date.getTime())) {
    throw new Error('Date résultante invalide');
  }

  return date;
}

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 !