JavaScript | Convertir bytes en strings legibles por humanos

Dado el tamaño de un archivo (en Bytes), la tarea es convertirlo en un formato legible por humanos usando JavaScript. Aquí hay algunos métodos discutidos.

Ejemplo 1: este ejemplo convierte el tamaño del archivo (en bytes) en un formato legible por humanos. Muestra los valores en decimal y para menos de 1024 Bytes se mantiene en Bytes.

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JavaScript 
      | Converting bytes to human-readable string.
    </title>
</head>
  
<body style="text-align:center;" 
      id="body">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP" 
       style="font-size: 15px;
              font-weight: bold;">
    </p>
    <button onclick="GFG_Fun()">
        click here
    </button>
    
    <p id="GFG_DOWN" 
       style="color:green; 
              font-size: 20px; 
              font-weight: bold;">
    </p>
    <script>
        var up = document.getElementById('GFG_UP');
        up.innerHTML = 'Convert bytes to human readable form';
        var down = document.getElementById('GFG_DOWN');
        size = function(bytes) {
            if (bytes == 0) {
                return "0.00 B";
            }
            var e = Math.floor(Math.log(bytes) / Math.log(1024));
            return (bytes / Math.pow(1024, e)).toFixed(2) +
              ' ' + ' KMGTP'.charAt(e) + 'B';
        }
  
        function GFG_Fun() {
            var bytes = 2007777777770;
            down.innerHTML = bytes + " bytes = " + size(bytes);
        }
    </script>
</body>
  
</html>

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Ejemplo 2: este ejemplo convierte el tamaño del archivo (en bytes) en un formato legible por humanos. Muestra los valores en decimal y para menos de 1024 Bytes se mantiene en Bytes. Pero, con un enfoque diferente.

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JavaScript 
      | Converting bytes to human-readable string.
    </title>
</head>
  
<body style="text-align:center;"
      id="body">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP"
       style="font-size: 15px;
              font-weight: bold;">
    </p>
    <button onclick="GFG_Fun()">
        click here
    </button>
    <p id="GFG_DOWN" 
       style="color:green; 
              font-size: 20px;
              font-weight: bold;">
    </p>
    <script>
        var up = document.getElementById('GFG_UP');
        up.innerHTML = 'Convert bytes to human readable form';
        var down = document.getElementById('GFG_DOWN');
  
        function getSize(size) {
            var sizes = [' Bytes', ' KB', ' MB', ' GB', 
                         ' TB', ' PB', ' EB', ' ZB', ' YB'];
            
            for (var i = 1; i < sizes.length; i++) {
                if (size < Math.pow(1024, i)) 
                  return (Math.round((size / Math.pow(
                    1024, i - 1)) * 100) / 100) + sizes[i - 1];
            }
            return size;
        }
  
        function GFG_Fun() {
            var bytes = 1024;
            down.innerHTML = bytes + " bytes = " + getSize(bytes);
        }
    </script>
</body>
  
</html>

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *