在前端开发中，经常需要对数据进行编码和解码操作。其中，UTF-8 编码是一种广泛使用的字符编码方案，可以将各种语言的字符映射到一个统一的编码表中。在 JavaScript 中，我们可以通过 ArrayBuffer 和字符串来对数据进行编码和解码操作。
ArrayBuffer
ArrayBuffer 是一种用于表示通用的、固定长度的原始二进制数据的类型化数组。它有以下几个特点：
- 固定长度：一旦创建，ArrayBuffer 的长度就不可更改。
- 原始二进制数据：ArrayBuffer 中的数据以字节形式存储，没有任何额外的信息和元数据。
- 类型化数组：可以使用不同类型的类型化数组视图来读取和写入 ArrayBuffer 中的数据。
在实际应用中，我们经常使用 Uint8Array 类型化数组视图来操作 ArrayBuffer 数据，因为 UTF-8 编码下的字符是以字节为单位存储的。
字符串和 UTF-8 编码
在 JavaScript 中，字符串是以 UTF-16 编码方式存储的。UTF-16 是一种变长编码方式，每个字符占用 1 或 2 个 16 位编码单元。对于 ASCII 字符来说，只需要一个 16 位编码单元即可表示，而对于其他字符则需要两个 16 位编码单元。
在将字符串转换为 UTF-8 编码时，需要将每个字符转换为一个或多个字节。UTF-8 编码的规则如下：
- 对于 ASCII 字符，使用 1 个字节表示，范围为 U+0000 - U+007F。
- 对于多字节字符，第一个字节的高位指示字符所占用的字节数，从而可以确定后续字节的编码方式。
例如，中文字符“你”在 UTF-8 编码下的字节序列为 E4 BD A0。
ArrayBuffer 和字符串之间的转换
在将字符串转换为 ArrayBuffer 数据时，可以先将字符串按照 UTF-8 编码规则转换成字节数组，然后再将字节数组存入 ArrayBuffer 中。具体实现方式如下：
-- -------------------- ---- -------
-------- ---------------------------- -
----- ---- - ----------------------------------
----- ------ - --- -------------------------
----- ---- - --- -------------------
--- ---- - - -- - - ------------ ---- -
------- - -------------------
-
------ -------
-在将 ArrayBuffer 数据转换为字符串时，需要将 ArrayBuffer 中的字节根据 UTF-8 编码规则解码成字符。具体实现方式如下：
-- -------------------- ---- -------
-------- ------------------------------- -
----- ---- - --- -------------------
--- --- - ---
--- - - --
----- -- - ------------ -
----- ---- - --------
-- ----- - ---- -
--- -- --------------------------
----
- ---- -- ----- -- --- -- ---- - ---- -
--- -- ------------------------- - ----- -- - - ------- - -- - -------
- -- --
- ---- -- ----- -- --- -- ---- - ---- -
--- -- ------------------------- - ----- -- -- - ------- - -- - ----- -- - - ------- - -- - -------
- -- --
- ---- -
--- -- ------------------------- - ----- -- -- - ------- - -- - ----- -- -- - ------- - -- - ----- -- - - ------- - -- - -------
- -- --
-
-
------ --------------------------------
-示例代码
下面是一个
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24871