Créer une mise en forme temporelle lisible par l'homme

Beginner

This tutorial is from open-source community. Access the source code

Introduction

Dans ce laboratoire, nous allons explorer une fonction appelée formatDuration qui nous aide à convertir un nombre donné de millisecondes en un format lisible par l'homme. Nous allons apprendre à utiliser des opérations mathématiques pour extraire les valeurs appropriées pour les jours, les heures, les minutes, les secondes et les millisecondes. Nous utiliserons également diverses méthodes d'itération telles que filter, map et join pour créer une chaîne de caractères qui affiche la durée d'une manière conviviale pour l'utilisateur. À la fin de ce laboratoire, vous aurez une compréhension plus approfondie de la manière de manipuler et de formater des données liées au temps en JavaScript.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Format Duration

Pour obtenir le format lisible par l'homme d'un nombre donné de millisecondes, suivez ces étapes :

  1. Ouvrez le Terminal/SSH et tapez node pour commencer à pratiquer la programmation.
  2. Divisez les ms par les valeurs appropriées pour obtenir les valeurs appropriées pour jour, heure, minute, seconde et milliseconde.
  3. Utilisez Object.entries() avec Array.prototype.filter() pour ne conserver que les valeurs non nulles.
  4. Créez la chaîne de caractères pour chaque valeur, en pluralisant approprié, en utilisant Array.prototype.map().
  5. Combinez les valeurs en une chaîne de caractères en utilisant Array.prototype.join().

Voici le code :

const formatDuration = (ms) => {
  if (ms < 0) ms = -ms;
  const time = {
    day: Math.floor(ms / 86400000),
    hour: Math.floor(ms / 3600000) % 24,
    minute: Math.floor(ms / 60000) % 60,
    second: Math.floor(ms / 1000) % 60,
    millisecond: Math.floor(ms) % 1000
  };
  return Object.entries(time)
    .filter((val) => val[1] !== 0)
    .map(([key, val]) => `${val} ${key}${val !== 1 ? "s" : ""}`)
    .join(", ");
};

Voici quelques exemples :

formatDuration(1001); // '1 seconde, 1 milliseconde'
formatDuration(34325055574);
// '397 jours, 6 heures, 44 minutes, 15 secondes, 574 millisecondes'

Résumé

Félicitations ! Vous avez terminé le laboratoire Format Duration. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.