使用 JavaScript 的 TextEncoder 和 TextDecoder

7 Jan 2025 | 7 分钟阅读

JavaScript 的 TextEncoder 和 TextDecoder 分别是用于对给定值进行编码和解码的函数。TextEncoder 使用 JavaScript 函数将指定的字符串转换为 UTF-8 标准，将其转换为 Uint8Array。TextDecoder 使用 JavaScript 函数将特定的输入字节转换为所需代码点。它可以解码 ISO-8859-2、KOI8-R、UTF-8、GBK 等文件类型。

JavaScript TextDecoder

该函数可以使用内置的 TextDecoder 对象将值读取为 JavaScript 字符串。

语法

首先，我们可以使用以下语法来解码输入值。

input_label：它通常用于编码值；默认情况下是 utf-8。它还支持 big5、windows-1251 以及许多其他编码。
Options：这是解码器方法中的一个可选对象。
Fatal 是一个布尔值。如果该值为 true，它将默认排除无效（不可解码）的字符。如果值为 false，它们将被替换为字符 \uFFFD。
ignoreBOM 是一个布尔值，很少使用。如果布尔值为 true，则会忽略可选的字节顺序 Unicode 标记 (BOM)。

接下来是解码，它的工作原理如下：

"input_value" 是用于解码缓冲区源的函数所必需的输入。
"options" 是 decode 方法的可选对象。
当解码器不断地接收输入数据时，stream 参数设置为 true，用于解码流。

示例

以下示例展示了不同类型的数据解码。

示例 1

以下示例展示了输入标签的给定对象。我们可以看到输入流或字符串的解码数据。在此示例中，默认使用 "Uint8Array" 编码的值。

<!DOCTYPE html>
<html>
<head>
<title> TextEncoder and TextDecoder using JavaScript </title>
</head>
<body>
<h3> TextEncoder and TextDecoder using JavaScript </h3>
<h4> TextDecoder Example using JavaScript </h4>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<script>
let string_data = new Uint8Array([104, 101, 108, 108, 111]);
let string_data1 = new Uint8Array([119, 111, 114, 108, 100]);
let string_data2 = new Uint8Array([87, 101, 108, 99, 111, 109, 101, 32, 83, 116, 117, 100, 101, 110, 116,  115]);
let textDecoder_variable = new TextDecoder();
let final_textDecoder_variable = textDecoder_variable.decode(string_data);
document.getElementById('demo_data').innerHTML = final_textDecoder_variable;
let final_textDecoder_variable1 = textDecoder_variable.decode(string_data1);
document.getElementById('demo_data1').innerHTML = final_textDecoder_variable1;
let final_textDecoder_variable2 = textDecoder_variable.decode(string_data2);
document.getElementById('demo_data2').innerHTML = final_textDecoder_variable2;
</script>
</body>
</html>

输出

下图显示了输入值的解码数据。

TextEncoder and TextDecoder using JavaScript

示例 2

以下示例展示了输入标签的给定对象。我们可以看到输入流或字符串的解码数据。我们可以使用 onclick 按钮和事件来显示数据。我们可以看到大写和小写编码的数据以及其他编码信息。

<!DOCTYPE html>
<html>
<head>
<title> TextEncoder and TextDecoder using JavaScript </title>
</head>
<body>
<h3> TextEncoder and TextDecoder using JavaScript </h3>
<h4> TextDecoder Example using JavaScript </h4>
<button type = "button"
onclick = "click_data();">
Click me to display Data </button>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<script>
function click_data() {
let string_data = new Uint8Array([104, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]);
let string_data1 = new Uint8Array([97, 65, 32, 98, 66, 32, 99, 67, 32, 100, 68]);
let string_data2 = new Uint8Array([87, 101, 108, 99, 111, 109, 101, 32, 83, 116, 117, 100, 101, 110, 116,  115]);
let textDecoder_variable = new TextDecoder();
let final_textDecoder_variable = textDecoder_variable.decode(string_data);
document.getElementById('demo_data').innerHTML = final_textDecoder_variable;
let final_textDecoder_variable1 = textDecoder_variable.decode(string_data1);
document.getElementById('demo_data1').innerHTML = final_textDecoder_variable1;
let final_textDecoder_variable2 = textDecoder_variable.decode(string_data2);
document.getElementById('demo_data2').innerHTML = final_textDecoder_variable2;
}
</script>
</body>
</html>

输出

下图显示了输入值的解码数据。

Example3

以下示例展示了带有子数组的 TextDecoder，使用输入标签的对象。我们可以看到具有给定数组长度的输入流或字符串的解码数据。我们可以使用 onclick 按钮和事件来显示数据。

<!DOCTYPE html>
<html>
<head>
<title> TextEncoder and TextDecoder using JavaScript </title>
</head>
<body>
<h3> TextEncoder and TextDecoder using JavaScript </h3>
<h4> TextDecoder with Sub-Array Example using JavaScript </h4>
<button type = "button"
onclick = "click_data();">
Click me to display Data </button>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<script>
function click_data() {
let string_data = new Uint8Array([104, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]);
//use sub-array length for the initial two and last two letters
let string_data_sub = string_data.subarray(2, -2);
let string_data2 = new Uint8Array([87, 101, 108, 99, 111, 109, 101, 32, 83, 116, 117, 100, 101, 110, 116,  115]);
//use aub-array length for the initial three and last four letters
let string_data_sub1 = string_data2.subarray(3, -4);
let textDecoder_variable = new TextDecoder();
let final_textDecoder_variable = textDecoder_variable.decode(string_data_sub);
document.getElementById('demo_data').innerHTML = final_textDecoder_variable;
let final_textDecoder_variable2 = textDecoder_variable.decode(string_data_sub1);
document.getElementById('demo_data2').innerHTML = final_textDecoder_variable2;
}
</script>
</body>
</html>

输出

下图显示了输入值的解码数据。

JavaScript TextEncoder

该函数可以使用内置的 TextDecoder 对象将值读取为 JavaScript 字符串。

语法

首先，我们可以使用以下语法来解码输入值。

它只接受 "utf-8" 编码。
它使用两种不同的方法：
encode(str) 从文本生成 Uint8Array。
encodeInto(str, destination)：将字符串编码到指定的 Uint8Array 目标中。

其次，在 TextEncoder 方法之后使用 encode 函数。

当编码器不断地接收输入数据时，编码会转换为流。

示例

以下示例展示了不同类型的数据编码。

示例 1

以下示例展示了输入标签的给定对象，这些对象已编码为所需格式。我们可以看到输入对象的编码数据来自字符串。在此示例中，默认使用 "Uint8Array" 编码的值。

<!DOCTYPE html>
<html>
<head>
<title> TextEncoder and TextDecoder using JavaScript </title>
</head>
<body>
<h3> TextEncoder and TextDecoder using JavaScript </h3>
<h4> TextEncoder Example using JavaScript </h4>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<script>
let string_data = "Welcome";
let string_data1 = "Hello World";
let string_data2 = "Welcome To Tutorial!!"
let textEncoder_variable = new TextEncoder();
let final_textEncoder_variable = textEncoder_variable.encode(string_data);
document.getElementById('demo_data').innerHTML = final_textEncoder_variable;
let final_textEncoder_variable1 = textEncoder_variable.encode(string_data1);
document.getElementById('demo_data1').innerHTML = final_textEncoder_variable1;
let final_textEncoder_variable2 = textEncoder_variable.encode(string_data2);
document.getElementById('demo_data2').innerHTML = final_textEncoder_variable2;
</script>
</body>
</html>

输出

下图显示了输入值的编码数据。

示例 2

<!DOCTYPE html>
<html>
<head>
<title> TextEncoder and TextDecoder using JavaScript </title>
</head>
<body>
<h3> TextEncoder and TextDecoder using JavaScript </h3>
<h4> TextEncoder Example using JavaScript </h4>
<button type = "button"
onclick = "click_data();">
Click me to display Data </button>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<script>
function click_data() {
let string_data = "JavaScript";
let string_data1 = "Hello World";
let string_data2 = "Welcome Students!"
let textEncoder_variable = new TextEncoder();
let final_textEncoder_variable = textEncoder_variable.encode(string_data);
document.getElementById('demo_data').innerHTML = final_textEncoder_variable;
let final_textEncoder_variable1 = textEncoder_variable.encode(string_data1);
document.getElementById('demo_data1').innerHTML = final_textEncoder_variable1;
let final_textEncoder_variable2 = textEncoder_variable.encode(string_data2);
document.getElementById('demo_data2').innerHTML = final_textEncoder_variable2;
}
</script>
</body>
</html>

输出

下图显示了输入值的编码数据。

Example3

以下示例展示了输入标签的给定对象。我们可以看到输入流或字符串的解码数据。我们可以使用 onclick 按钮和事件来显示数据。我们可以看到整个字符串的子字符串。

<!DOCTYPE html>
<html>
<head>
<title> TextEncoder and TextDecoder using JavaScript </title>
</head>
<body>
<h3> TextEncoder and TextDecoder using JavaScript </h3>
<h4> TextEncoder Example using JavaScript </h4>
<button type = "button"
onclick = "click_data();">
Click me to display Data </button>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<script>
function click_data() {
let string_data = "JavaScript";
//use substring with initial word and length of the string
let binary_Str1 = string_data.substring(2, 6);
let string_data1 = "Hello World";
//use the length of the substring 
let binary_Str2 = string_data1.substring(0, 4);
let string_data2 = "Welcome Students!";
//use a single sub-string of the entire string
let binary_Str3 = string_data2.substring(5);
let textEncoder_variable = new TextEncoder();
let final_textEncoder_variable = textEncoder_variable.encode(binary_Str1);
document.getElementById('demo_data').innerHTML = final_textEncoder_variable;
let final_textEncoder_variable1 = textEncoder_variable.encode(binary_Str2);
document.getElementById('demo_data1').innerHTML = final_textEncoder_variable1;
let final_textEncoder_variable2 = textEncoder_variable.encode(binary_Str3);
document.getElementById('demo_data2').innerHTML = final_textEncoder_variable2;
}
</script>
</body>
</html>

输出

下图显示了输入值的编码数据。

TextEncoder 和 TextDecoder 示例

以下示例展示了 JavaScript 中 TextEncoder 和 TextDecoder 的组合。

<!DOCTYPE html>
<html>
<head>
<title> TextEncoder and TextDecoder using JavaScript </title>
</head>
<body>
<h3> TextEncoder and TextDecoder using JavaScript </h3>
<button type = "button"
onclick = "click_data();">
Click me to display Data </button>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data3"> </p>
<p id = "demo_data4"> </p>
<script>
function click_data() {
let string_data11 = new Uint8Array([104, 101, 108, 108, 111]);
let string_data12 = new Uint8Array([119, 111, 114, 108, 100]);
let textDecoder_variable = new TextDecoder();
let final_textDecoder_variable = textDecoder_variable.decode(string_data11);
document.getElementById('demo_data3').innerHTML = final_textDecoder_variable;
let final_textDecoder_variable1 = textDecoder_variable.decode(string_data12);
document.getElementById('demo_data4').innerHTML = final_textDecoder_variable1;
let string_data = "JavaScript";
//use substring with initial word and length of the string
let binary_Str1 = string_data.substring(2, 6);
let string_data1 = "Hello World";
//use the length of the substring 
let binary_Str2 = string_data1.substring(0, 4);
let string_data2 = "Welcome Students!";
//use a single sub-string of the entire string
let binary_Str3 = string_data2.substring(5);
let textEncoder_variable = new TextEncoder();
let final_textEncoder_variable = textEncoder_variable.encode(binary_Str1);
document.getElementById('demo_data').innerHTML = final_textEncoder_variable;
let final_textEncoder_variable1 = textEncoder_variable.encode(binary_Str2);
document.getElementById('demo_data1').innerHTML = final_textEncoder_variable1;
}
</script>
</body>
</html>

输出

下图显示了输入值的编码数据。

结论

JavaScript 中的 TextEncoder 和 TextDecoder 用于编码和解码值。它有助于保护数据的安全性和私密性。

下一主题JavaScript 空值合并运算符

使用 JavaScript 的 TextEncoder 和 TextDecoder

JavaScript TextDecoder

语法

示例

JavaScript TextEncoder

语法

示例

TextEncoder 和 TextDecoder 示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

使用 JavaScript 的 TextEncoder 和 TextDecoder

JavaScript TextDecoder

语法

示例

JavaScript TextEncoder

语法

示例

TextEncoder 和 TextDecoder 示例

结论

相关帖子

JavaScript 中用于电子邮件验证的正则表达式

JavaScript 沙箱

JavaScript 中的索引

JavaScript 的最小化

JavaScript 混淆器

JavaScript Pop

Javascript 代码检查器

JavaScript 中的阿姆斯特朗数

Selenium JavaScript