Affichage esthétique du nombre d'octets

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 (lab), nous explorerons le concept d'affichage esthétique (pretty-printing) de nombres exprimés en octets dans un format lisible par l'homme à l'aide de JavaScript. Nous apprendrons à convertir un nombre donné d'octets en KB, MB, GB, TB, PB, EB, ZB et YB en utilisant un tableau dictionnaire d'unités. Grâce à la méthode Number.prototype.toPrecision(), nous tronquerons le nombre à un certain nombre de chiffres et construire un chaîne formatée pour afficher le résultat.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic 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") subgraph Lab Skills javascript/variables -.-> lab-28554{{"Affichage esthétique du nombre d'octets"}} javascript/data_types -.-> lab-28554{{"Affichage esthétique du nombre d'octets"}} javascript/arith_ops -.-> lab-28554{{"Affichage esthétique du nombre d'octets"}} javascript/comp_ops -.-> lab-28554{{"Affichage esthétique du nombre d'octets"}} javascript/cond_stmts -.-> lab-28554{{"Affichage esthétique du nombre d'octets"}} javascript/array_methods -.-> lab-28554{{"Affichage esthétique du nombre d'octets"}} end

Convertir des octets en chaîne lisible par l'homme

Pour convertir un nombre d'octets en une chaîne de caractères lisible par l'homme, utilisez la fonction prettyBytes(). Voici quelques points à garder à l'esprit :

  • La fonction utilise un tableau dictionnaire d'unités qui peut être accédé en fonction de l'exposant.
  • Vous pouvez utiliser le deuxième argument, precision, pour tronquer le nombre à un certain nombre de chiffres. La valeur par défaut est 3.
  • Vous pouvez utiliser le troisième argument, addSpace, pour ajouter un espace entre le nombre et l'unité. La valeur par défaut est true.
  • La fonction renvoie la chaîne formatée en la construisant, en tenant compte des options fournies et du fait que le nombre soit négatif ou non.

Voici le code de la fonction prettyBytes() :

const prettyBytes = (num, precision = 3, addSpace = true) => {
  const UNITS = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
  if (Math.abs(num) < 1) return num + (addSpace ? " " : "") + UNITS[0];
  const exponent = Math.min(
    Math.floor(Math.log10(num < 0 ? -num : num) / 3),
    UNITS.length - 1
  );
  const n = Number(
    ((num < 0 ? -num : num) / 1000 ** exponent).toPrecision(precision)
  );
  return (num < 0 ? "-" : "") + n + (addSpace ? " " : "") + UNITS[exponent];
};

Et voici quelques exemples d'utilisation de la fonction prettyBytes() :

prettyBytes(1000); // '1 KB'
prettyBytes(-27145424323.5821, 5); // '-27.145 GB'
prettyBytes(123456789, 3, false); // '123MB'

Résumé

Félicitations! Vous avez terminé le laboratoire (lab) sur l'affichage esthétique (pretty-printing) du nombre d'octets. Vous pouvez pratiquer davantage de laboratoires sur LabEx pour améliorer vos compétences.