How To Get The Number Of Bytes In A String In JavaScript

Last modified on Tuesday 25 Jan 2022 at 05:41 am

Getting the number of bytes in a Frontend or Node.js JavaScript string can be very useful.

For example, one reason it’s very useful is that Twitter limits posts to 280 bytes, not necessarily 280 characters. If you use just Latin characters, numbers, or other ASCII characters in a Twitter post, then the number of characters would be equal to the number of bytes since each ASCII character is made with 1 byte.

But in other languages, or other non-ASCII characters like emojis, the character would likely be made with more than 1 byte.

This article will show you first how to get the number of bytes in a string in frontend JavaScript followed by how to get the number of bytes in a string in Node.js.

Method 1: Get the Number of Bytes in a String in Frontend JavaScript

Essentially there are 2 steps to getting the number of bytes in a string in frontend JavaScript.
1. Convert the string into a Blob object.

2. Get the .size attribute from the previously made Blob object and that will give you the number of bytes in the string.

Below is an example using just ASCII characters.

let example_string_1 = "Hello World";
let example_string_1_as_blob = new Blob([example_string_1]);
let example_string_1_num_bytes = example_string_1_as_blob.size;
console.log(example_string_1_num_bytes) // should give you 11

You can also confirm that the length of the original string is the same as the number of its bytes.

console.log(example_string_1.length) // you should also get 11

Example Where Number of Bytes in A Frontend JavaScript String Is Different From The Length

Now, for an example where the number of bytes is different from the number of characters, and would make a difference in things like a Twitter post. We will use Chinese Characters. Each Chinese character is represented by a 3 byte code.

Let’s say we want to say “How are you?”. In Chinese, one way to translate that is 你好嗎 (ni hao ma).

let example_string_2 = "你好嗎";
let example_string_2_num_bytes = new Blob([example_string_2]);
console.log(example_string_2_num_bytes.size) // should give 9

To confirm that the number of bytes is different from its length:

console.log(example_string_2.length) // you should get 3

If you were to paste in 你好嗎 in a Twitter post, it would count as 9 bytes, not 3, towards the 280 byte limit for a post. Unfortunately, the code won’t work in Node.js. So below, I will show you how to get the number of bytes in a string in Node.js.


Method 2: Get the Number of Bytes in a String in Node.js

Essentially there are 2 steps to getting the number of bytes in a string in Node.js.
1. Assign the string to a variable
2. Use the method Buffer.byteLength() and pass the string from step 1 into that.

Below is an example using just ASCII characters with Node.js

let exampleStr = "Hello World!";
let exampleStrNumBytes = Buffer.byteLength(exampleStr)
console.log(exampleStrNumBytes) // should give you 12

You can also confirm that the length of the original string is the same as the number of its bytes.

console.log(exampleStr.length) // you should also get 12

Example Where Number of Bytes in A Node.js String Is Different From The Length

Now, for an example where the number of bytes is different from the number of characters in Node.js, and would make a difference in things like a Twitter post. We will use Korean characters, aka Hangul. Each Hangul character is represented by a 3 byte code.

Let’s have a string which translates to hello in Korean. We’ll use a polite form of hello in Korean which is 안녕하세요 (an nyeong ha se yo).

let example_string_2 = "안녕하세요";
let example_string_2_num_bytes = Buffer.byteLength(example_string_2)

console.log(example_string_2_num_bytes) // will give 15 as the output

To confirm that the number of bytes is different from its length:

console.log(example_string_2.length) // you should get 5

If you were to paste in 안녕하세요 in a Twitter post, it would count as 15 bytes, not 5, towards the 280 byte limit for a Twitter post.

What did you think of this article? Do you have anything to add? Let’s discuss it in the comments below.

Leave a Reply

Your email address will not be published. Required fields are marked *