Convertir bytes a gigabytes usando JavaScript

Nithin Krishnan 12 octubre 2023
  1. Conversión a base decimal
  2. Conversión a base binaria
Convertir bytes a gigabytes usando JavaScript

¿Alguna vez te has preguntado cuántos bytes hay en un Gigabyte? Gigabyte es una unidad de medida de uso común. Gigabyte se usa ampliamente en nuestro día a día. El tamaño de archivo de una película, la capacidad de un disco duro, incluso el tamaño de la memoria de acceso aleatorio en nuestras computadoras portátiles o teléfonos móviles, todo lo que representamos con gigabytes. Todas las unidades en estos casos que se utilizan para abordarlas están en Gigabytes. Se requieren un poco de matemáticas para la conversión de bytes a gigabytes. Es similar a convertir metros a kilómetros. Veamos cómo podemos hacer la conversión en JavaScript. Hay un par de enfoques para la conversión de bytes a gigabytes, que son los siguientes.

  1. Conversión de gigabytes a bytes en base decimal
  2. Conversión de gigabytes a bytes en base binaria

Conversión a base decimal

La duda más común que nos surge a todos es si un valor de kilobyte es 1024 bytes o 1000 bytes. Al buscar en Google, obtenemos respuestas mixtas. Pero el concepto subyacente es simple. En un sistema numérico decimal, un valor de Kilobyte es 1000 bytes, mientras que, en un sistema numérico binario, el valor es 1024 bytes. Por lo tanto, los parámetros de conversión cambian según esta ideología.

Justificación de la conversión con base decimal

Antes de comenzar la explicación, veremos las unidades de conversión clave. Como estamos tratando con una base numérica decimal, usaremos el siguiente razonamiento de conversión.

  • 1 kilobyte = 1000 bytes
  • 1 Megabyte = 1000 KiloByte
  • 1 GigaByte = 1000 MegaByte

Por lo tanto, 1 GigaByte = 1000 * 1000 * 1000 Bytes. En otras palabras, un GigaByte equivale a 10 elevado a la potencia de 9 (10 ^ 9) bytes. Por lo tanto, la simple búsqueda de 1 GB en Google nos da una representación como 1e+9. 1e+9 es igual a 1 con 9 ceros. Esa es la esencia del cálculo de conversión.

Código de conversión

Ahora hemos entendido el cálculo detrás de las conversiones y las distintas unidades de Bytes. Repasemos rápidamente el código javascript para convertir un número (número de bytes) dado como entrada. El código devolverá el valor equivalente en Gigabyte y lo mostrará en la pantalla.

<h3><center>Byte to GB</center></h3>
<div>
    <center>
        <input type="text" id="bytes_input"><label>Bytes</label>
    </center>
</div>
<div>
    <center>
        <button onclick="convertToGB()">Convert</button>
        <button onclick="reset()">Reset</button>
    </center>
</div>
<center>
    <div>
        <label>Result: </label> <label id="gbValue">0</label> GB
    </div>
</center>
window.onload =
    function() {
  reset();
  updateDisplay(0);
}

function convertToGB() {
  let bytesValue = document.getElementById('bytes_input').value;
  let gbValue = (bytesValue / (1000 * 1000 * 1000)).toFixed(2);
  updateDisplay(gbValue);
}

function reset() {
  document.getElementById('bytes_input').value = 0;
  updateDisplay(0);
}


function updateDisplay(val) {
  document.getElementById('gbValue').innerHTML = val;
}

Los pasos son los siguientes.

  • Diseñamos una GUI HTML para capturar el número de bytes del usuario. La GUI tiene un botón Convert y un botón Reset. Vinculamos el botón Convert a la función convertToGB() que convierte el valor de byte dado a gigabytes. El botón Reset está vinculado con la función reset() para restablecer los valores de modo que el usuario pueda probar valores más nuevos para convertir.
  • La ejecución del código comienza con la función window.onload(). La función window.onload() es la primera en ejecutarse cuando se carga la página. En esta función, restablecemos los valores para la entrada y la salida Gigabyte a 0.
  • Una vez que el usuario ingresa un valor de byte y hace clic en el botón Convertir, se activa la función convertToGB().
  • En la función convertToGB(), capturamos el valor ingresado por el usuario en el campo de bytes usando la función document.getElementById("bytes_input").value de javascript y lo capturamos en el Variable bytesValue. En el siguiente paso, convertimos ese valor de byte a gigabytes dividiendo el bytesValue por (1000 * 1000 * 1000). Recuerde, dividir el valor del byte por 1000 nos da el valor del kilobyte dividiéndolo más entre mil devuelve el valor del megabyte y dividir el valor del megabyte nos da la representación de gigabytes para los bytes.
  • Hacemos estos cálculos y almacenamos el resultado en la variable gbValue. En la siguiente línea, mostramos el gbValue en la GUI estableciendo el valor de label usando el document.getElementById("gbValue").innerHTML. Y por lo tanto, el valor convertido se muestra en HTML.

Observaciones

  • Básicamente, necesitaremos un byte que tenga un valor de más de siete dígitos para obtener un equivalente tangible en Gigabyte. El valor de salida mínimo es 0.01 GB, que se convierte en 10000000 Bytes. Eso significa que utilizando el código anterior, un byte con un valor mayor que 10000000 Bytes se mostrará en la salida. La salida para valores inferiores a ese será 0 GB.
  • Existe una limitación en la cantidad de dígitos que puede contener una variable en javascript. JavaScript tiene una constante Number.MAX_SAFE_INTEGER que define el valor máximo que puede contener una variable numérica en javascript que es 9007199254740991. Por lo tanto, el código no convertirá ningún número de bytes más que él a la representación de Gigabytes. Podemos perder precisión durante la conversión. No lo recomendamos.
  • Según el código que vimos anteriormente, el valor de salida muestra valores redondeados a dos decimales. Usamos la función Number.toFixed() de JavaScript. Según la línea (bytesValue / (1000 * 1000 * 1000)).toFixed(2), la salida será de 2 decimales. Si mostramos el valor en gigabytes con mayor precisión, podemos modificar el código con .toFixed(3) o .toFixed(4) según el requisito.

Conversión a base binaria

Las formas más comúnmente entendidas de convertir un valor de byte en un Gigabyte es con la base binaria. La mayoría de nosotros conoce el valor unitario 1024. A diferencia del sistema decimal, donde la división es entre 1000, para convertir a unidades de bytes más altos, en el sistema numérico binario, dividimos por el factor 1024.

Base para la conversión con base binaria

Antes de mirar el código para la conversión, veamos el valor de la unidad de conversión en el sistema numérico binario. En este caso, la lógica girará en torno a 1024 (es decir, 2 elevado a 10 o 210).

  • 1 kilobyte = 1024 bytes
  • 1 Megabyte = 1024 KiloByte
  • 1 GigaByte = 1024 MegaByte

Por lo tanto, en el sistema base binario, 1 GigaByte = 1024 * 1024 * 1024 Bytes. La conversión de un valor numérico de bytes a Gigabyte requerirá dividirlo por 1024 * 1024 * 1024.

Código de conversión

El siguiente código convierte el número de bytes a una representación de gigabytes en el sistema binario.

<h3><center>Byte to GB</center></h3>
<div>
    <center>
        <input type="text" id="bytes_input"><label>Bytes</label>
    </center>
</div>
<div>
    <center>
        <button onclick="convertToGB()">Convert</button>
        <button onclick="reset()">Reset</button>
    </center>
</div>
<center>
    <div>
        <label>Result: </label> <label id="gbValue">0</label> GB
    </div>
</center>
window.onload =
    function() {
  reset();
  updateDisplay(0);
}

function convertToGB() {
  let bytesValue = document.getElementById('bytes_input').value;
  let gbValue = (bytesValue / (1024 * 1024 * 1024)).toFixed(2);
  updateDisplay(gbValue);
}

function reset() {
  document.getElementById('bytes_input').value = 0;
  updateDisplay(0);
}


function updateDisplay(val) {
  document.getElementById('gbValue').innerHTML = val;
}

En comparación con el código con la conversión del sistema de base decimal, la única diferencia aquí es que usamos el factor 1024 en lugar de 1000 que es evidente en la línea (bytesValue / (1024 * 1024 * 1024)).toFixed(2).

Observaciones

  • La misma limitación se aplica en este método para el rango de número máximo que se puede ingresar. Un número superior a 9007199254740991 no garantizará una conversión satisfactoria.
  • Podemos ajustar la precisión con cambiando el parámetro de la función toFixed() en la línea (bytesValue / (1024 * 1024 * 1024)).toFixed(2). Por lo general, en la mayoría de los casos, se prefieren 2 o 3 dígitos después del decimal.
  • Los resultados pueden diferir en ambas conversiones, la conversión de base decimal y la conversión de base binaria. La comparación entre los dos métodos no es válida, ya que será como comparar manzanas y naranjas. Los resultados están en los respectivos sistemas de base numérica. Eso significa que, en el sistema de base decimal de conversión de bytes a gigabytes, el resultado será una representación de gigabytes en el sistema numérico decimal y viceversa para el sistema base numérico binario.