Converting bytes to human readable values (KB, MB, GB, TB, PB, EB, ZB, YB) with JavaScript

In the world of computing, terms like kylobytes, gigabytes etc are used to describe space in some storage device and system memory. Normally in web applications, they're shown to the user to describe how many space they have in their cloud or other feature that requires measurement in bytes. Obviously, they won't have an idea of how big is exactly a file/free space if you show them the number of bytes, believe me, they will only see numbers.

That's why you need to display this information in a specific notation, using the known measurement notation of KB, MB, GB etc. In JavaScript, this can be easily done with 2 methods that we'll share with you today in this article. Both of them (methods with the same name) expect as first argument the number of bytes as integer or string and it returns a string with the string that the user can read.

A. 1024 bytes based short version

The 1024 based version assumes that a single KB has 1024 bytes and in just 3 lines of code, you can easily convert a number of bytes into a readable notation:

/**
 * Converts a long string of bytes into a readable format e.g KB, MB, GB, TB, YB
 * 
 * @param {Int} num The number of bytes.
 */
function readableBytes(bytes) {
    var i = Math.floor(Math.log(bytes) / Math.log(1024)),
    sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];

    return (bytes / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + sizes[i];
}

The method can be used in the following way:

// "1000 B"
readableBytes(1000);

// "9.42 MB"
readableBytes(9874321);

// "9.31 GB"
// The number of bytes as a string is accepted as well
readableBytes("10000000000");

// "648.37 TB"
readableBytes(712893712304234);

// "5.52 PB"
readableBytes(6212893712323224);

B. 1000 bytes based version

The other option offers a conversion of bytes to a readable format but having in count that 1KB is equal to 1000 bytes, not 1024 like the first option. This increases decreases the margin of accuracy, but works with almost the same logic of our first method:

/**
 * Converts a long string of bytes into a readable format e.g KB, MB, GB, TB, YB
 * 
 * @param {Int} num The number of bytes.
 */
function readableBytes(num) {
    var neg = num < 0;

    var units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];

    if (neg){
        num = -num;
    }

    if (num < 1){
        return (neg ? '-' : '') + num + ' B';
    }
    
    var exponent = Math.min(Math.floor(Math.log(num) / Math.log(1000)), units.length - 1);
    
    num = Number((num / Math.pow(1000, exponent)).toFixed(2));
    
    var unit = units[exponent];

    return (neg ? '-' : '') + num + ' ' + unit;
}

The method can be used in the following way:

// "1 KB"
readableBytes(1000);

// "9.87 MB"
readableBytes(9874321);

// "10 GB"
// The number of bytes as a string is accepted as well
readableBytes("10000000000");

// "712.89 TB"
readableBytes(712893712304234);

// "6.21 PB"
readableBytes(6212893712323224);

Happy coding !