CodeGym/Cours/Frontend SELF FR/Date. Formatage des dates et des nombres

Date. Formatage des dates et des nombres

Disponible

2.1 Objet Date

Travailler avec des dates et des nombres est une partie importante du développement d'applications web. JavaScript fournit des objets intégrés et des méthodes pour manipuler les dates et les nombres. Dans cette conférence, nous allons examiner l'objet Date, ses méthodes et les façons de formater les dates et les nombres.

L'objet Date en JavaScript représente la date et l'heure. Il dispose de nombreuses méthodes pour travailler avec les dates, y compris obtenir la date et l'heure actuelles, définir une date et une heure, ainsi que formater.

Créer un objet Date

Important !
Si tu crées un objet Date() sans paramètres, il contiendra la date et l'heure actuelles — au moment de sa création.

Il existe plusieurs façons de créer un objet Date.

1. Date et heure actuelles :

JavaScript
const now = new Date();

console.log(now); // Affiche la date et l'heure actuelles

2. Définir une date et une heure spécifiques :

JavaScript
const specificDate = new Date('2024-07-07T10:00:00');

console.log(specificDate); // Affiche la date du 7 juillet 2024

3. Définir une date et une heure avec des valeurs numériques :

JavaScript
const anotherDate = new Date(2024, 6, 7, 10, 0, 0);

console.log(anotherDate); // Affiche la date du 7 juillet 2024

2.2 Méthodes de l'objet Date()

Obtenir les composants de la date :

  • getFullYear() : obtenir l'année (quatre chiffres)
  • getMonth() : obtenir le mois (de 0 à 11)
  • getDate() : obtenir le jour du mois (de 1 à 31)
  • getHours() : obtenir les heures (de 0 à 23)
  • getMinutes() : obtenir les minutes (de 0 à 59)
  • getSeconds() : obtenir les secondes (de 0 à 59)

Exemple :

JavaScript
const now = new Date();

console.log(now.getFullYear()); // Année actuelle
console.log(now.getMonth()); // Mois actuel (-1)
console.log(now.getDate()); // Jour actuel
console.log(now.getHours()); // Heure actuelle
console.log(now.getMinutes()); // Minute actuelle
console.log(now.getSeconds()); // Seconde actuelle

Définir les composants de la date :

  • setFullYear(year) : définir l'année
  • setMonth(month) : définir le mois
  • setDate(day) : définir le jour du mois
  • setHours(hours) : définir les heures
  • setMinutes(minutes) : définir les minutes
  • setSeconds(seconds) : définir les secondes

Exemple :

JavaScript
const date = new Date();

date.setFullYear(2025);
date.setMonth(0); // Janvier
date.setDate(15);
date.setHours(12);
date.setMinutes(30);
date.setSeconds(45);

console.log(date.toString());

2.3 Formatage des dates

JavaScript fournit des méthodes pour formater les dates en chaîne. La méthode la plus populaire est toLocaleDateString() pour formater la date en fonction de la locale.

Exemple d'utilisation de toLocaleDateString() :

JavaScript
const now = new Date();

console.log(now.toLocaleDateString('en-US')); // "7/7/2024" (MM/DD/YYYY)
console.log(now.toLocaleDateString('en-GB')); // "07/07/2024" (DD/MM/YYYY)
console.log(now.toLocaleDateString('ru-RU')); // "07.07.2024" (JJ.MM.AAAA)

Méthode toLocaleTimeString()

La méthode toLocaleTimeString() renvoie l'heure sous forme de chaîne dans un format localisé :

JavaScript
const now = new Date();

console.log(now.toLocaleTimeString('en-CA'));
console.log(now.toLocaleTimeString('en-GB'));

Méthode toLocaleString()

La méthode toLocaleString() renvoie la date et l'heure sous forme de chaîne dans un format localisé :

JavaScript
const now = new Date();

console.log(now.toLocaleString('en-CA'));
console.log(now.toLocaleString('en-GB'));

Méthode toISOString()

La méthode toISOString() renvoie la date et l'heure au format ISO 8601 :

JavaScript
const now = new Date();

console.log(now.toISOString()); // "2023-07-05T10:00:00.000Z"

2.4 Formatage des nombres

Méthode toLocaleString()

La méthode toLocaleString() permet de formater les nombres en fonction des paramètres locaux :

JavaScript
const number = 1234567.89;

console.log(number.toLocaleString()); // "1,234,567.89" au format US ou "1 234 567,89" au format local
console.log(number.toLocaleString('de-DE')); // "1.234.567,89" au format allemand

Formatage des nombres avec Intl.NumberFormat

Le constructeur Intl.NumberFormat fournit encore plus de flexibilité pour formater les nombres :

JavaScript
const number = 1234567.89;

const usFormatter = new Intl.NumberFormat('en-US');
console.log(usFormatter.format(number)); // "1,234,567.89"

const deFormatter = new Intl.NumberFormat('de-DE');
console.log(deFormatter.format(number)); // "1.234.567,89"

const customFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});

console.log(customFormatter.format(number)); // "$1,234,567.89"
1
Mission
Frontend SELF FR,  niveau 37leçon 1
Bloqué
Date et heure actuelles
Date et heure actuelles
1
Mission
Frontend SELF FR,  niveau 37leçon 1
Bloqué
Composants de la date
Composants de la date
Commentaires
  • Populaires
  • Nouveau
  • Anciennes
Tu dois être connecté(e) pour laisser un commentaire
Cette page ne comporte pas encore de commentaires