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

JavaScriptJavaScriptBeginner
Pratiquer maintenant

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

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

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.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("Conditional Statements") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/template_lit("Template Literals") subgraph Lab Skills javascript/variables -.-> lab-28316{{"Créer une mise en forme temporelle lisible par l'homme"}} javascript/data_types -.-> lab-28316{{"Créer une mise en forme temporelle lisible par l'homme"}} javascript/arith_ops -.-> lab-28316{{"Créer une mise en forme temporelle lisible par l'homme"}} javascript/comp_ops -.-> lab-28316{{"Créer une mise en forme temporelle lisible par l'homme"}} javascript/cond_stmts -.-> lab-28316{{"Créer une mise en forme temporelle lisible par l'homme"}} javascript/array_methods -.-> lab-28316{{"Créer une mise en forme temporelle lisible par l'homme"}} javascript/higher_funcs -.-> lab-28316{{"Créer une mise en forme temporelle lisible par l'homme"}} javascript/template_lit -.-> lab-28316{{"Créer une mise en forme temporelle lisible par l'homme"}} end

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.