How to Convert ArrayBuffer to String and Vice-versa in JavaScript

by

Converting ArrayBuffer to String

Here are two ways to convert an ArrayBuffer to a String in JavaScript.

  1. Using the toString() method
  2. Using the Uint8Array class and String.fromCharCode() method
  3. Using TextDecoder API

Method 1: Using the toString() method

To convert an ArrayBuffer to a string, you need to convert the buffer into a typed array like Uint8Array or Uint16Array and then use the array’s toString() method.

However, there is one caveat that this method will only work well for buffers that contain simple ASCII data because the toString() method on typed arrays uses commas to delimit individual byte values.

function arrayBufferToString(buffer) {
  return new Uint8Array(buffer).toString();
}

const buffer = new ArrayBuffer(5);
const view = new Uint8Array(buffer);
view.set([72, 101, 108, 108, 111]); // "Hello" in ASCII

const str = arrayBufferToString(buffer);
console.log(str);

Output

72,101,108,108,111

As you can see, the toString() function directly on the Uint8Array view produces a comma-separated list of byte values rather than the actual string “Hello”. If you were expecting the output to be “Hello”, this method wouldn’t be appropriate.

If you want to use the toString() method to convert the ArrayBuffer into a human-readable string (like “Hello”), then you would need to first convert the byte values into their corresponding ASCII characters using the String.fromCharCode() method.

Method 2: Using the Uint8Array class and String.fromCharCode()

To convert an ArrayBuffer to a string, use the “Uint8Array class to access the bytes in the buffer, then convert each byte to its corresponding ASCII character using the String.fromCharCode() method.”

function arrayBufferToString(buffer) {
  let str = '';
  const array = new Uint8Array(buffer);
  for (let i = 0; i < array.length; i++) {
    str += String.fromCharCode(array[i]);
  }
  return str;
}

const buffer = new ArrayBuffer(5);
const view = new Uint8Array(buffer);
view.set([72, 101, 108, 108, 111]);

const str = arrayBufferToString(buffer);
console.log(str);

Output

Hello

You can see that the output is in the human-readable format!

Method 3: Using TextDecoder API

Here are the steps to convert an ArrayBuffer to String using TextDecoder API

  1. Create a Uint8Array view of the ArrayBuffer.
  2. Use the TextDecoder API to convert the Uint8Array to a string.
function arrayBufferToString(buffer) {
  let decoder = new TextDecoder("utf-8");
  return decoder.decode(buffer);
}

const buffer = new ArrayBuffer(5);
const view = new Uint8Array(buffer);
view.set([72, 101, 108, 108, 111]);

const str = arrayBufferToString(buffer);
console.log(str);

Output

Hello

Converting String to ArrayBuffer

Here are two ways to convert a String to an ArrayBuffer.

  1. Using the charCodeAt() method
  2. Using the TextEncoder API

Method 1: Using the charCodeAt() method

To convert a string to an ArrayBuffer in JavaScript, you can “use the charCodeAt() method to get the ASCII value of each character in the string and then populate a Uint8Array with these ASCII values and associate it with an ArrayBuffer.”

function stringToArrayBuffer(str) {
  const buffer = new ArrayBuffer(str.length);
  const view = new Uint8Array(buffer);
  for (let i = 0; i < str.length; i++) {
    view[i] = str.charCodeAt(i);
  }
  return buffer;
}

const str = "Hello";
const buffer = stringToArrayBuffer(str);

console.log(buffer);

Output

ArrayBuffer { [Uint8Contents]: <48 65 6c 6c 6f>, byteLength: 5 }

Method 2: Using the TextEncoder API

Use the TextEncoder API to convert the string to a Uint8Array. If needed, extract the underlying ArrayBuffer from the Uint8Array.

function stringToArrayBuffer(str) {
  let encoder = new TextEncoder();
  return encoder.encode(str).buffer;
}

const str = "Hello"
const ArrayBuffer = stringToArrayBuffer(str)

console.log(ArrayBuffer);

Output

ArrayBuffer { [Uint8Contents]: <48 65 6c 6c 6f>, byteLength: 5 }

That’s it!

Related posts

ES6 Iterable to Array

Array to Object in JavaScript

Converting an Array to Observable

Leave a Comment