Ajouter des intervalles de temps en JavaScript en toute simplicité

Huuff. Une sensation de froid s'installe dans votre colonne vertébrale.

Haaaaah. L'haleine glaciale de votre patron vous envahit le cou comme un égout qui déborde. Mais vous ne pouvez pas leur dire de survoler un autre endroit… ils vous surveillent comme un faucon depuis que le système de suivi du temps du bureau est tombé en panne.

Maintenant, ils sont juste là… planant… respirant. Huffffff.

Vous avez essayé d'écrire vos heures sur une feuille de temps, mais votre patron est plutôt occupé avec toute cette respiration. Et s’ils n’avaient pas fait le bon calcul et avaient mal ajouté vos heures ?

Voici comment prendre les choses en main avec JavaScript. Haaaa .

Le problème

Vous disposez d'une feuille de temps qui ressemble au contenu de cette String :

 const a = `November 30 2023 13:20-15:00, 15:30-16:40 December 4 2023 15:45-16:15, December 5 2023 08:00-08:30, 18:15-19:30, 21:45-22:15, 22:30-23:00 December 6 2023 19:45-21:45 December 7 2023 14:15-14:45, 15:15-15:45, 16:00-16:30, 16:45-17:15, 18:45-20:15, 20:45-22:45 December 13 2023 03:00-03:50 December 15 2023 09:00-09:30 20:30-21:15 21:45-22:30 23:30-24:00 December 16 2023 23:25-23:55 December 17 2023 19:05-19:50 20:30-21:30 22:15-23:45 December 20 2023 23:30-24:00 December 21 2023 02:20-2:50 03:15-03:30 13:40-14:00 16:00-17:15 17:45-18:45 19:20-20:10 21:30-22:20 23:00 - 24:00 December 22 2023 0:00-0:15`;

Chaque ligne contient une date suivie de quelques intervalles de temps. Mais ils ne sont pas écrits très clairement : certains intervalles sont séparés par des virgules, d'autres ont un espacement irrégulier, etc.

Compte tenu de ces incohérences, il est probablement bon de ne prendre aucune autre garantie. Par exemple, qui a dit que toutes les heures dateraient de la même année ? Personne, c'est qui. Vous souhaitez additionner les heures de la manière la plus robuste possible.

La solution

C'est assez simple. Nous commençons par créer quelques expressions régulières et une fonction d'assistance. Ensuite, nous allons juste… Huuuuffh !

Pouah!! Patron, va te détendre quelque part une seconde !

Comme je le disais, nous pouvons désormais accomplir la tâche avec un algorithme en trois étapes :

1. Nous divisons la chaîne de la feuille de temps en lignes individuelles et -les pour créer un tableau d'objets.

   
   

2. Pour chaque itération, nous :

   A. Divisez la ligne autour de l'année en utilisant yearRegex , en enregistrant la chaîne de date

   B. Collectez tous les intervalles de plage de temps à l'aide intervalsRegex

   C. Réduisez sur les plages de temps, en analysant chacune en tant qu'objet Date JavaScript à l'aide de l' assistant parseDate et de la chaîne de date de l'étape 2.A.

   
   

3. Réduisez le tableau d’objets pour trouver le nombre total d’heures

   
   

 const yearRegex = /(\d{4})/gi; const intervalsRegex = /(\d+\:\d+)\s*-\s*(\d+\:\d+)/gi; const parseDate = (date, time) => Date.parse(`${date} ${time}`); let times = [...a.split("\n")].reduce((arr, entryLine) => { let entryLineSplit = entryLine.split(yearRegex); let o = { date: entryLineSplit[0] + entryLineSplit[1], timeRanges: [...entryLine.matchAll(intervalsRegex)], }; o.hoursForDay = o.timeRanges.reduce((total, [x, start, end]) => { let s = parseDate(o.date, start); let e = parseDate(o.date, end); return total + (e - s) / 1000 / 60 / 60; }, 0); return [...arr, o]; }, []); console.log(times); let totalHours = times.reduce((total, { hoursForDay }) => total + hoursForDay, 0); console.log(totalHours);

Si vous décommentez le console.log(times); instruction, vous verrez un tableau contenant des objets comme :

 { date: 'November 30 2023', timeRanges: [ [ '13:20-15:00', '13:20', '15:00', index: 17, input: 'November 30 2023 13:20-15:00, 15:30-16:40', groups: undefined ], [ '15:30-16:40', '15:30', '16:40', index: 30, input: 'November 30 2023 13:20-15:00, 15:30-16:40', groups: undefined ] ], totalHours: 2.8333333333333335 },

Les avantages de cette méthode

Construire un tableau d'objets présente quelques avantages distincts par rapport à la simple extraction des intervalles de temps et à leur ajout.

• Cela facilite la traversée après coup. C'est idéal si vous souhaitez faire quelque chose comme représenter graphiquement vos heures quotidiennes.

• L'enregistrement de la chaîne de date pour chaque enregistrement permet l'utilisation des méthodes arithmétiques de date JS intégrées après un appel à Date.parse .

• L'objet est un endroit pratique pour stocker les résultats de l'appel String.prototype.split , qui peuvent ne pas être uniques selon que deux jours incluent ou non les mêmes intervalles de temps.

Inconvénients de cette méthode

Cette solution n'est pas parfaite :

• Cela nécessite deux grands parcours : une fois sur le résultat du fractionnement de la feuille de temps, puis une fois sur l'objet times . Pour optimiser ce code, il serait probablement préférable d'utiliser une seule réduction sur un objet vide contenant totalHours et times comme champs.

• Il utilise des expressions régulières qui pourraient devenir plus compliquées avec un format plus complexe

Emballer

Vous savez maintenant comment extraire le temps d'une feuille de temps en désordre. Avec un petit effort supplémentaire, vous pourriez même construire une horloge complète. Mais alors vous n’auriez pas l’occasion de passer tout ce temps de qualité à faire connaissance avec votre patron, n’est-ce pas ? Poufff.