Mostrar Número de Bytes en Formato Legible

JavaScriptJavaScriptBeginner
Practicar Ahora

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

💡 Este tutorial está traducido por IA desde la versión en inglés. Para ver la versión original, puedes hacer clic aquí

Introducción

En este laboratorio, exploraremos el concepto de mostrar números en bytes en un formato legible para humanos utilizando JavaScript. Aprenderemos cómo convertir un número dado de bytes en KB, MB, GB, TB, PB, EB, ZB e YB mediante el uso de un diccionario de unidades en forma de matriz. Con la ayuda del método Number.prototype.toPrecision(), truncaremos el número a un cierto número de dígitos y construiremos una cadena formateada para mostrar el resultado.


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{{"Mostrar Número de Bytes en Formato Legible"}} javascript/data_types -.-> lab-28554{{"Mostrar Número de Bytes en Formato Legible"}} javascript/arith_ops -.-> lab-28554{{"Mostrar Número de Bytes en Formato Legible"}} javascript/comp_ops -.-> lab-28554{{"Mostrar Número de Bytes en Formato Legible"}} javascript/cond_stmts -.-> lab-28554{{"Mostrar Número de Bytes en Formato Legible"}} javascript/array_methods -.-> lab-28554{{"Mostrar Número de Bytes en Formato Legible"}} end

Convertir Bytes a una Cadena Legible para Humanos

Para convertir un número en bytes a una cadena legible para humanos, utiliza la función prettyBytes(). Aquí hay algunas cosas a tener en cuenta:

  • La función utiliza un diccionario de unidades en forma de matriz que se accede según el exponente.
  • Puedes utilizar el segundo argumento, precision, para truncar el número a un cierto número de dígitos. El valor predeterminado es 3.
  • Puedes utilizar el tercer argumento, addSpace, para agregar un espacio entre el número y la unidad. El valor predeterminado es true.
  • La función devuelve la cadena formateada construyéndola, teniendo en cuenta las opciones proporcionadas y si el número es negativo o no.

Aquí está el código de la función 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];
};

Y aquí hay algunos ejemplos de cómo usar la función prettyBytes():

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

Resumen

¡Felicidades! Has completado el laboratorio de Mostrar Número de Bytes en Formato Legible. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.