JavaScript Katana

Guide de formatage des dates en JavaScript : des bases aux meilleures pratiques

Traitement des Données (Chaînes, Nombres, Dates, Tableaux, Objets)
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Introduction

Lorsque vous travaillez avec JavaScript, vous rencontrerez fréquemment des situations nécessitant la gestion des dates. Par exemple, afficher la date du jour sur un site web ou gérer les plannings d’événements. Bien que le formatage des dates en JavaScript puisse sembler simple à première vue, de nombreux débutants le trouvent déroutant en pratique.

Dans cet article, nous expliquerons clairement le formatage des dates en JavaScript, des bases aux techniques plus avancées. En lisant ce guide, vous acquerrez les connaissances suivantes :

  • Opérations de base sur les dates avec l’objet JavaScript Date
  • Méthodes de formatage des dates à l’aide des API intégrées telles que toLocaleDateString() et Intl.DateTimeFormat
  • Une introduction aux bibliothèques utiles qui facilitent le formatage des dates

Cet article est conçu pour aider les débutants à démarrer avec les fondamentaux, tout en offrant aux utilisateurs intermédiaires des techniques pratiques et des conseils d’utilisation de bibliothèques. Ainsi, vous pourrez acquérir des compétences utiles dans le développement réel.

Dans la section suivante, nous commencerons par revoir les bases de l’objet JavaScript Date. Comprendre ces notions de base vous permettra d’obtenir une compréhension plus approfondie du fonctionnement du formatage des dates.

2. Fundamentals | Basic Date Handling in JavaScript

JavaScript fournit l’objet Date pour gérer les dates et les heures. En utilisant cet objet, vous pouvez récupérer la date et l’heure actuelles, spécifier une date particulière et effectuer des opérations flexibles comme ajouter ou soustraire du temps.

2.1 Creating Date Objects

1. Getting the Current Date and Time

const today = new Date();
console.log(today); // Example output: Sun Dec 29 2024 14:30:00 GMT+0900 (JST)

2. Specifying a Specific Date

const specificDate = new Date(2024, 11, 29); // Year, month (0-based), day
console.log(specificDate); // Example output: Sun Dec 29 2024 00:00:00 GMT+0900 (JST)

3. Creating a Date from a Timestamp

const timestampDate = new Date(1703827200000); // Timestamp
console.log(timestampDate); // Example output: Sun Dec 29 2024 00:00:00 GMT+0900 (JST)

2.2 Retrieving Date Components

1. Getting the Year, Month, and Day

const today = new Date();
console.log(today.getFullYear()); // Get year: 2024
console.log(today.getMonth() + 1); // Get month (0-based): 12
console.log(today.getDate()); // Get day: 29

2.3 Editing and Manipulating Dates

1. Adding Days to a Date

today.setDate(today.getDate() + 1);
console.log(today); // Displays the next day's date

2. Changing to a Specific Date

today.setFullYear(2025); // Change year to 2025
today.setMonth(0); // Change month to January
today.setDate(1); // Change day to the 1st
console.log(today); // Example output: Wed Jan 1 2025 14:30:00 GMT+0900 (JST)

2.4 Time Zones and UTC

1. Retrieving UTC Date Values

console.log(today.getUTCFullYear()); // Get UTC year
console.log(today.getUTCMonth() + 1); // Get UTC month
console.log(today.getUTCDate()); // Get UTC day

2. Getting an ISO 8601 Date String

console.log(today.toISOString()); // Get ISO 8601 formatted string

Summary

Dans cette section, nous avons expliqué les bases de la manipulation des dates à l’aide de l’objet JavaScript Date.

3. Date Formatting Methods [Basic]

Lorsque vous travaillez avec des dates en JavaScript, personnaliser le format d’affichage est extrêmement important. Dans cette section, nous expliquerons les méthodes de base de formatage des dates.

3.1 Simple String Concatenation

1. Displaying Dates in YYYY-MM-DD Format

const today = new Date();
const year = today.getFullYear();
const month = ('0' + (today.getMonth() + 1)).slice(-2);
const day = ('0' + today.getDate()).slice(-2);
const formattedDate = `${year}-${month}-${day}`;
console.log(formattedDate); // Example output: 2024-12-29

3.2 Formatting with toLocaleDateString()

const date = new Date();
console.log(date.toLocaleDateString('ja-JP')); // Example output: 2024/12/29

3.3 Format ISO 8601 et toISOString()

console.log(date.toISOString());
// Example output: 2024-12-29T05:30:00.000Z

Résumé

Dans cette section, nous avons couvert les bases du formatage des dates en JavaScript.

4. Formatage avancé des dates [Practical]

Dans cette section, nous présenterons des techniques de formatage de dates plus avancées et pratiques.

4.1 Formatage personnalisé avec Intl.DateTimeFormat

const date = new Date();
const formatter = new Intl.DateTimeFormat('ja-JP', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
});
console.log(formatter.format(date)); // Example output: 2024/12/29

4.2 Gestion des fuseaux horaires

const utcDate = new Date(Date.UTC(2024, 11, 29, 12, 0, 0));
const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeZoneName: 'short'
});
console.log(formatter.format(utcDate));
// Example output: 12/29/2024, EST

Résumé

Dans cette section, nous avons présenté des techniques de formatage de dates avancées adaptées aux applications réelles.

5. Bibliothèques externes utiles pour le formatage des dates

JavaScript offre de nombreuses fonctionnalités intégrées pour la manipulation des dates, mais l’utilisation de bibliothèques externes peut améliorer considérablement l’efficacité et la lisibilité.

5.1 Utilisation de Moment.js (Obsolète)

const moment = require('moment');
const formattedDate = moment().format('YYYY-MM-DD HH:mm:ss');
console.log(formattedDate); // Example output: 2024-12-29 14:30:00

5.2 Pourquoi date-fns est recommandé et exemple d’utilisation

import { format } from 'date-fns';
const today = new Date();
const formattedDate = format(today, 'yyyy-MM-dd HH:mm:ss');
console.log(formattedDate); // Example output: 2024-12-29 14:30:00

Résumé

Dans cette section, nous avons présenté les avantages des bibliothèques externes et comment les utiliser efficacement.

6. Erreurs courantes et solutions [FAQ]

Lorsqu’on travaille avec les dates en JavaScript, les débutants comme les développeurs intermédiaires rencontrent souvent des erreurs et problèmes similaires. Dans cette section, nous expliquons les problèmes courants, leurs causes et des solutions pratiques sous forme de FAQ.

Q1. Pourquoi le mois décale-t-il d’un ?

Exemple de problème

const date = new Date(2024, 12, 29);
console.log(date); // Output: 2025-01-29

Cause

En JavaScript, les index des mois commencent à 0, pas à 1.

Solution

Lors de la spécification d’un mois, soustrayez 1 de la valeur du mois souhaité.

const date = new Date(2024, 11, 29); // Correct way to specify December
console.log(date); // Output: 2024-12-29

Q2. Pourquoi les nombres ne sont-ils pas remplis de zéros ?

Exemple de problème

const today = new Date();
const month = today.getMonth() + 1; // 12
const day = today.getDate();       // 9
console.log(`${today.getFullYear()}-${month}-${day}`);
// Output: 2024-12-9

Solution

Utilisez slice() ou padStart() pour appliquer le remplissage de zéros.

const month = ('0' + (today.getMonth() + 1)).slice(-2);
const day = ('0' + today.getDate()).slice(-2);
console.log(`${today.getFullYear()}-${month}-${day}`);
// Output: 2024-12-09

Résumé

Dans cette section, nous avons expliqué les erreurs courantes et les considérations importantes liées à la gestion des dates en JavaScript, en utilisant un format FAQ.

7. Notes importantes et bonnes pratiques

La gestion des dates en JavaScript est puissante, mais les malentendus concernant ses spécifications ou une utilisation incorrecte peuvent facilement entraîner des erreurs et des bugs. Dans cette section, nous présentons des notes importantes et des bonnes pratiques pour une manipulation des dates sûre et efficace.

7.1 Index des mois et remplissage de zéros

const date = new Date(2024, 11, 29); // December 29
console.log(date.getMonth() + 1); // Output: 12

7.2 Gestion des fuseaux horaires

Utilisation de UTC

const utcDate = new Date(Date.UTC(2024, 11, 29, 12, 0, 0));
console.log(utcDate.toISOString());
// Output: 2024-12-29T12:00:00.000Z

7.3 Améliorer la lisibilité et la maintenabilité

Créer une fonction de formatage de date

function formatDate(date) {
  const year = date.getFullYear();
  const month = ('0' + (date.getMonth() + 1)).slice(-2);
  const day = ('0' + date.getDate()).slice(-2);
  return `${year}-${month}-${day}`;
}
console.log(formatDate(new Date()));
// Output: 2024-12-29

Résumé

Dans cette section, nous avons expliqué les notes importantes et les meilleures pratiques pour la gestion des dates en JavaScript.

8. Conclusion

La gestion des dates en JavaScript est une fonctionnalité fréquemment requise dans le développement web. Dans cet article, nous avons expliqué tout, étape par étape, des concepts de base aux techniques avancées, permettant aux lecteurs d’acquérir des connaissances applicables à des projets réels.

Revue des apprentissages clés

  1. Opérations de base sur les dates
  • Explication des opérations fondamentales et des considérations importantes lors de l’utilisation de l’objet Date.
  1. Fondamentaux et techniques de formatage avancées
  • Introduction du formatage personnalisé, du support de l’internationalisation et de la gestion des fuseaux horaires.
  1. Utilisation de bibliothèques externes
  • Comparaison des fonctionnalités et de l’utilisation de bibliothèques telles que date-fns et Day.js .
  1. Erreurs courantes et solutions
  • Organisation des cas d’erreur typiques et de leurs solutions sous forme de FAQ.

Prochaines étapes

  1. Essayez le code d’exemple dans votre propre environnement.
  2. Introduisez des bibliothèques et effectuez des comparaisons.
  3. Mettez-vous au défi avec des applications pratiques dans des systèmes réels.

Réflexions finales

La gestion des dates en JavaScript peut devenir complexe lorsqu’on considère les spécifications détaillées et l’internationalisation. Utilisez cet article comme référence pour affiner davantage vos compétences pratiques.

広告