Travailler avec Date en Javascript : new Date() vs Day.js vs Moment.js

Consultez le message original https://devaradise.com/date-in-javascript-dayjs-momentjs/ pour le lire avec la table des matières

La gestion des dates et des heures est une tâche courante dans le développement JavaScript. Bien que l'objet Date natif de JavaScript offre une variété de méthodes pour travailler avec les dates, il existe des scénarios dans lesquels l'utilisation de bibliothèques externes telles que Day.js ou Moment.js peut simplifier votre flux de travail et fournir des solutions plus robustes.

Dans cet article, nous explorerons les cas courants qui peuvent être résolus par l'objet Date natif de JavaScript et ceux qui sont mieux gérés par des bibliothèques externes. Nous comparerons également Day.js et Moment.js pour vous aider à choisir l'outil adapté à vos besoins.

Cas courants résolubles par date JS native

L'objet JavaScript Date natif fournit une gamme de méthodes pour travailler avec les dates et les heures. Voici quelques cas d'utilisation courants où l'objet Date natif est suffisant :

1. Création de dates

const now = new Date(); // Current date and time
const specificDate = new Date('2024-07-16'); // Specific date

2. Obtenir des composants de date et d'heure

const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1; // Months are zero-indexed
const day = now.getDate();

const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();

3. Définition des composants de date et d'heure

const now = new Date();

now.setFullYear(2025);
now.setMonth(11); // December
now.setDate(25);

now.setHours(10);
now.setMinutes(11);
now.setSeconds(12);

4. Arithmétique des dates

const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);

5. Formatage des dates

const now = new Date();
const dateString = now.toDateString(); // Example: 'Tue Jul 16 2024'
const timeString = now.toTimeString(); // Example: '14:12:34 GMT+0200 (Central European Summer Time)'

6. Analyse des dates

const parsedDate = new Date(Date.parse('2024-07-16T14:12:34Z'));

7. Comparaison des dates

const date1 = new Date('2024-07-16');
const date2 = new Date('2024-07-17');
const isSame = date1.getTime() === date2.getTime(); // false
const isBefore = date1.getTime() < date2.getTime(); // true

8. Obtenir le jour de la semaine

const dayOfWeek = now.getDay(); // 0 for Sunday, 1 for Monday, etc.

9. Conversion en chaîne UTC et ISO

const now = new Date();
const isoDate = now.toISOString(); // 2024-07-22T11:30:59.827Z
const utcDate = now.toUTCString(); // Mon, 22 Jul 2024 11:30:42 GMT

Calcul des différences de dates

const date1 = new Date('2024-01-01');
const date2 = new Date('2024-12-31');
const differenceInTime = date2 - date1;
const differenceInDays = differenceInTime / (1000 * 3600 * 24);
console.log(differenceInDays);

Cas mieux résolus par des bibliothèques externes comme Day.js et Moment.js

Bien que l'objet Date natif couvre la manipulation de base de la date, certaines tâches sont gérées plus efficacement par des bibliothèques externes comme Day.js et Moment.js. Voici quelques scénarios dans lesquels ces bibliothèques excellent :

1. Formatage avancé

// Day.js
const Day.jsDate = Day.js().format('YYYY-MM-DD HH:mm:ss');

// Moment.js
const momentDate = moment().format('YYYY-MM-DD HH:mm:ss');

2. Temps relatif

// Day.js
Day.js.extend(relativeTime); // require RelativeTime plugin
Day.js('2024-01-01').from(Day.js('2023-01-01')); // a year ago

// Moment.js
moment('2024-01-01').from(moment('2023-01-01')); // a year ago

3. Gestion des fuseaux horaires

Day.js.extend(utc);
Day.js.extend(timezone);
Day.js('2024-07-16 14:12:34').tz('America/New_York');

// Moment.js with moment-timezone
moment.tz('2024-07-16 14:12:34', 'America/New_York');

4. Internationalisation (i18n)

// Day.js
Day.js.locale('fr');
const frenchDate = Day.js().format('LLLL'); // dimanche 15 juillet 2012 11:01

// Moment.js
moment.locale('fr');
const frenchMomentDate = moment().format('LLLL'); // dimanche 15 juillet 2012 11:01

5. Gestion des dates invalides

// Day.js
const invalidDay.js = Day.js('invalid date');
if (!invalidDay.js.isValid()) {
    console.log('Invalid date');
}

// Moment.js
const invalidMoment = moment('invalid date');
if (!invalidMoment.isValid()) {
    console.log('Invalid date');
}

6. Analyse des formats de date complexes

// Day.js with customParseFormat plugin
Day.js.extend(customParseFormat);
const complexDate = Day.js('05/02/69 1:02:03 PM -05:00', 'MM/DD/YY H:mm:ss A Z');

// Moment.js
const complexMoment = moment('05/02/69 1:02:03 PM -05:00', 'MM/DD/YY H:mm:ss A Z');

7. Travailler avec des durées

// Day.js
Day.js.extend(duration);
const durationDay.js = Day.js.duration(5000); // 5 seconds
console.log(durationDay.js.asMinutes()); // 0.083333...
const humanizedDurationDay.js = Day.js.duration(5000).humanize(); // 'a few seconds'

// Moment.js
const durationMoment = moment.duration(5000); // 5 seconds
console.log(durationMoment.asMinutes()); // 0.083333...
const humanizedDurationMoment = moment.duration(5000).humanize(); // 'a few seconds'

Day.js vs Moment.js : une comparaison détaillée

Day.js et Moment.js sont deux bibliothèques populaires pour la manipulation de dates en JavaScript. Bien que les deux servent le même objectif, ils présentent des différences distinctes en termes de performances, de fonctionnalités et de convivialité. Cette comparaison vous aidera à décider quelle bibliothèque est la mieux adaptée à votre projet.

Jour.js

Avantages

• Léger : Day.js ne fait que 2 Ko, ce qui est nettement plus petit que Moment.js, ce qui le rend idéal pour les applications sensibles aux performances.
• Immuable : Day.js favorise l'immuabilité, ce qui signifie que chaque opération renvoie une nouvelle instance, réduisant ainsi les bugs liés à la manipulation de date.
• Architecture des plugins : Day.js dispose d'un système de plugins modulaire, vous permettant d'inclure uniquement les fonctionnalités dont vous avez besoin. Cela permet de garder la taille de votre paquet minimale.
• Syntaxe moderne : Day.js suit la syntaxe JavaScript moderne, ce qui facilite l'intégration avec les bases de code modernes.
• Compatibilité : Day.js est conçu pour remplacer Moment.js, avec une API similaire.

Inconvénients

• Moins de fonctionnalités intégrées : Day.js a moins de fonctionnalités intégrées par rapport à Moment.js. Les fonctionnalités avancées nécessitent des plugins supplémentaires.
• Prise en charge limitée des fuseaux horaires : Day.js s'appuie sur des plugins tiers pour une prise en charge complète des fuseaux horaires, tandis que Moment.js a Moment Timezone.
• Écosystème moins mature : en tant que bibliothèque plus récente, Day.js a moins d'intégrations et de support communautaire par rapport à Moment.js bien établi.

Moment.js

Avantages

• Riche en fonctionnalités : Moment.js fournit un ensemble complet de fonctionnalités pour presque toutes les tâches de manipulation de date et d'heure.
• Écosystème mature : Moment.js existe depuis 2011, ce qui se traduit par un support communautaire étendu, des plugins et des intégrations.
• Gestion des fuseaux horaires : Moment.js, avec son plugin Moment Timezone, offre une prise en charge robuste des fuseaux horaires, ce qui le rend idéal pour les applications qui doivent gérer plusieurs fuseaux horaires.
• Documentation détaillée : Moment.js dispose d'une documentation détaillée et bien entretenue, permettant aux développeurs de trouver plus facilement de l'aide et des exemples.

Inconvénients

• Grande taille : Moment.js est nettement plus grand que Day.js, ce qui peut avoir un impact sur les performances, en particulier dans les applications côté client.
• Opérations mutables : les opérations Moment.js mutent l'objet date d'origine, ce qui peut entraîner un comportement inattendu si elles ne sont pas gérées avec soin.
• Obsolète : L'équipe Moment.js a rendu la bibliothèque obsolète, recommandant des alternatives comme Day.js pour les nouveaux projets.

Tableau de comparaison

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!