How do I get the actual size in bytes for a number and a string in JavaScript in a browser environment?

Question

I am trying to get the actual size (in bytes) of a number and a string in browsers e.g. chrome.

I learned that in JavaScript numbers are represented in double precision takes up 64 bits and strings are UTF-16 code unit so it takes either 2 bytes or 4 bytes.

I first tried to use new Blob but it encodes string component characters as UTF-8 not UTF-16. And I know there is a Buffer.from API in Node but it is not available in a browser environment.

My question is how I can get the actual size of a number and a string in bytes from a browser, e.g. chrome?

Answer 1

You can do that natively with the help of TextEncoder

let str1 = 'Beta'; // 'Beta' text in English
let str2 = '贝塔'; // 'Beta' text in Chinese

const encoder = new TextEncoder();

const len1 = encoder.encode(str1).length;
const len2 = encoder.encode(str2).length;

console.log(len1); // 4
console.log(len2); // 6

Answer 2

First of all it is important to realize that the spec doesn't mandate any representation. Just behavior.

Strings are stored in UTF-16 but fortunately for your purpose each index represents 16 bits.

For example

console.log(''.length); // Should log 2 because emoji takes 2 16 bit parts

For numbers it depends. V8 represents small integer numbers as actual 32 bit ints.

Answer 3

With https://github.com/substack/node-browserify you can work with buffers in the Browser by using: https://github.com/toots/buffer-browserify.

//in your browsify js file:
require('buffer')
Buffer.byteLength(String.fromCharCode(55555), 'utf16')


Buffer.byteLength(String.fromCharCode(55555, 57000), 'utf16')

Answer 4

iconv-lite: Pure JS character encoding conversion

var iconv = require('iconv-lite');
var buf =iconv.encode("Hello World", 'utf16');
console.log(buf);
console.log(buf.length); // returns 24

Answer 5

Here is my answer to your problem :

        function getBytesFromVar(theVar) {
            if(theVar !== null && theVar !== undefined) {
                
                switch (typeof theVar) {
                    case 'string' : {
                        var encoder = new TextEncoder();
                        encoder['encoding'] = "utf-16";
                        return encoder['encode'](theVar).length * 2;
                    }
                    case 'number' : {
                        return 8;
                    }
                    case 'boolean' : {
                        return 4;
                    }
                    case 'object' : {
                        if ( theVar instanceof String) {
                            var encoder = new TextEncoder();
                            encoder['encoding'] = "utf-16";
                            return encoder['encode'](theVar.toString()).length * 2;
                        } else {
                            return 0;
                        }
                    }
                }
            }
            else {
                return 0;
            }
        }

The getBytesFromVar function take a var and return the number of byte used.

Function use TextEncoder to get the string length and then calculate the bytes.

In case of a string created with:

let str = new String('Alain♥');

function will work with String objects.

ATTENTION: this can't be used to calculate memory footprint in browser as other mechanism of memory management can increase/decrease this values.

Vars can be allocated in different memory segment. For example, String object are created on the heap and string vars are created on string constant pool.

Also vars are manipulated through pointer.

For example, 2 strings vars that contain the same string are created on the string constant pool. First will be allocated, but the second one will be a pointer to the first one. So the size in memory byte will not be simply twice the size of the string.

Good post about that: https://levelup.gitconnected.com/bytefish-vs-new-string-bytefish-what-is-the-difference-a795f6a7a08b

Use case:

            var myString='Alain♥';
            var myNumber = 120;    
            var objString = new String('Alain♥');
            var myFloat = 105.456;

            
            console.log('%o is %o bytes', myString, getBytesFromVar(myString));
            console.log('%o is %o bytes', myNumber, getBytesFromVar(myNumber));
            console.log('%o is %o bytes', objString, getBytesFromVar(objString));
            console.log('%o is %o bytes', myFloat, getBytesFromVar(myFloat));

Answer 6

You can do that natively with the help of TextEncoder

let str1 = 'Beta'; // 'Beta' text in English
let str2 = '贝塔'; // 'Beta' text in Chinese

const encoder = new TextEncoder();

const len1 = encoder.encode(str1).length;
const len2 = encoder.encode(str2).length;

console.log(len1); // 4
console.log(len2); // 6

Answer 7

I have used the npm module object-sizeof for this. You can use it to get the size of integer or string variables in bytes. This is a sample usage,

  var sizeof = require('object-sizeof');
  console.log(sizeof(123)); //prints 8