Conversion between numeric data and binary data in JavaScript

Preface

Binary data is rarely encountered in daily JavaScript, but when you use WebSocket to interact with the backend, it is possible to use the binary data format. Therefore, in order to better understand the content related to WebSocket transport binary later in this series, it is necessary to understand how binary data is manipulated and stored in JavaScript

• How to operate and store binary data in JavaScript - the basic knowledge of ArrayBuffer storage structure and the basic knowledge of the corresponding DataView related data types and API interfaces, and the endian problem is introduced.
• Take Int and Short as examples to illustrate how numeric data in JavaScript is converted to binary data.
• Taking the Long type as an example, explain how the Long type is represented in JavaScript and how to convert it to binary data.
• How to convert binary data to numeric data in JavaScript.

How to store and manipulate binary data in JavaScript

Now that you know why you need to use binary data, let's take a look at how to store and manipulate binary data in JavaScript

ArrayBuffer

First, let's introduce the ArrayBuffer used to store binary data in JavaScript

ArrayBuffer objects are used to represent generic, fixed-length raw binary data buffers

In the MDN documentation, we can see the introduction of ArrayBuffer. It is a data object used in JavaScript for binary data storage.

Let's briefly introduce ArrayBuffer related operations through an example.

const buffer = new ArrayBuffer(8);
buffer.byteLength; // result: 8

The above example works by creating a binary data buffer of length 8Byte. The buffer is just a data storage space. How to read this storage space is entirely up to the user. For example: 8 bytes can be regarded as 2 Int type data, or a Long type data, or 4 Short type data

DataView

After reading the ArrayBuffer that stores data, let's take a look at the DataView that reads and writes data.

The DataView view is a low-level interface that can read and write multiple numeric types from ArrayBuffer objects, without considering the platform byte order when reading and writing

This is an introduction to DataView in MDN. DataView provides a large number of API interfaces to read and write data, which we will illustrate with examples in the next three chapters. However, first we have to look at the byte order problem mentioned in the description

Endianness

In the existing computer system, there are two byte orders:

• Big-endian byte order: high-order first, low-order last. In line with human reading habits
• Little-endian byte order: low-order first, high-order last. Compatible with computer reading habits

The order mentioned above is for multi-byte objects, such as Int type and Long type. Taking Int type data 0x1234 as an example, if it is big-endian byte order, then the data is 0x1234 from the usual way of writing human logarithms; if it is little-endian byte order, then from the usual way of writing human logarithms, it should be Written as 0x3412.

For single-byte objects such as Byte type data, there is no endianness.

In different platforms, different endianness may be used, which is the so-called endianness problem. The so-called DataView does not need to consider the platform byte order when reading and writing, which means that the data written and read using DataView at the same time is consistent

How to convert numeric data to binary data in JavaScript

With a general understanding of ArrayBuffer and DataView, let's take a look at how it performs binary data operations.

In this chapter, I take Short type and Int type as examples to introduce the relevant operation steps.

let buffer = new ArrayBuffer(6); // Initialize 6 Byte binary data buffer
let dataView = new DataView(buffer);

dataView.setInt16(0, 3); // Starting from the 0th Byte position, place a Short type data with a number of 3 (2 Bytes)
dataView.setInt32(2, 15); // Starting from the second Byte position, place a Short type data with a number of 15 (4 Bytes)

Through the above example, we initialized a total of 6 Bytes of storage space and filled them with data of 1 Short type (2 Bytes) and an Int type (4 Bytes)

DataView also provides many API interfaces for processing other data types, such as unsigned, floating-point numbers, etc. Their usage is the same as the API described above, we will not introduce them one by one here, readers who want to know more about the API interface can check the MDN documentation

How to represent Long type in JavaScript and how to convert it to binary data

Through the API interface provided by DataView, we know how to deal with Short type, Int type, Float type and Double type. So, what should we do if it is a data type that does not provide processing functions in the native API of the Long type?

First, we need to understand the structure of the Long data type, which is a data type consisting of a high-order 4 Bytes and a low-order 4 Bytes. Because the range represented by the Long type is larger than that of the Number type, we use two objects of the Number type (that is, the Int type) to represent the Long type data in JavaScript. For details, please refer to my previous blog Long.js source code Analyze and learn.

Understand how to store the Long type in JavaScript, we know how to store it

import Long from 'long';

let long = Long.fromString('123');
let buffer = new ArrayBuffer(8);
let dataView = new DataView(buffer);

dataView.setInt32(0, long.high); // put in big endian byte order
dataView.setInt32(4, long.low);

Through the above example, we split a Long type data into two Int type data, and put them into the ArrayBuffer in big-endian byte order. In the same way, if you want to place it in little-endian byte order, you only need to partially process the data and then put it in. I won't introduce too much here.

How to convert binary data to data types in JavaScript

When you know how to convert data into binary data stored in ArrayBuffer, you can easily figure out how to do the reverse operation - read data from ArrayBuffer and convert it to data types commonly used in JavaScript

import Long from 'long';

let buffer = new ArrayBuffer(14); // Initialize a 14 Byte binary data buffer
let dataView = new DataView(buffer);
let long = Long.fromString('123');


// data writing process

dataView.setInt16(0, 3); // Starting from the 0th Byte position, place a Short type data with a number of 3 (2 Bytes)
dataView.setInt32(2, 15); // Starting from the second Byte position, place a Short type data with a number of 15 (4 Bytes)

dataView.setInt32(6, long.high); // put in big endian byte order
dataView.setInt32(10, long.low);

// data read process

let shortNumber = dataView.getInt16(0);
let intNumber = dataView.getInt32(2);

let longNumber = Long.fromBits(dataView.getInt32(10), dataView.getInt32(6)); // Read according to big-endian byte order, the input parameters of this constructor are: low 16 bits, high 16 bits

Summarize

By using ArrayBuffer and DataView, we can quickly convert numeric data from binary to JavaScript common data types such as Int, Short, etc. At the same time, we can also convert these data types to binary data. With these basic knowledge, we can understand the process and processing logic of using WebSocket for binary data transmission in subsequent blogs