当前位置：极客笔记 > JavaScript > JavaScript 精选教程 > 使用JavaScript进行文本编码和解码的TextEncoder和TextDecoder

使用JavaScript进行文本编码和解码的TextEncoder和TextDecoder

使用JavaScript进行文本编码和解码的TextEncoder和TextDecoder

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

使用JavaScript的TextDecoder

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

语法

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

let decoder_variable = new TextDecoder([input_label], [options]);
  • 输入标签：它通常编码数值；默认情况下为utf-8。还支持big5、windows-1251和许多其他编码方式。
  • 选项：它是解码器方法中的可选对象。
  • Fatal是一个布尔值。如果该值为true，则默认情况下会排除无效（不可解码）的字符。如果该值为false，则会用字符\uFFFD替换它们。
  • ignoreBOM是一个布尔值，很少使用。如果布尔值为true，则忽略可选的字节顺序Unicode标记（BOM）。

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

decoder_variable.decode([input_value], [options]).
  • “input_value”是用于解码缓冲区源的必要输入参数。
  • “options”是可选的对象，具有解码方法。
  • 当解码器以输入数据不断调用时，流用于解码数据流。

示例

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

示例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>

输出

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

使用JavaScript进行文本编码和解码的TextEncoder和TextDecoder

示例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>

输出

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

使用JavaScript进行文本编码和解码的TextEncoder和TextDecoder

示例3

下面的示例展示了使用输入标签对象的子数组的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的TextEncoder

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

语法

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

let encoder_variable = new TextEncoder();
  • 它只接受“utf-8”编码。
  • 它使用两种不同的方法：
  • encode(str)从文本中获得Uint8Array。
  • encodeInto(str, destination)：将字符串编码到指定的Uint8Array目标中。

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

encoder_variable.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>

输出

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

使用JavaScript进行文本编码和解码的TextEncoder和TextDecoder

示例2

以下示例显示了输入标签的给定对象。我们可以看到输入流或字符串的解码数据。我们可以使用带有事件的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";
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>

输出

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

使用JavaScript进行文本编码和解码的TextEncoder和TextDecoder

示例3

以下示例显示了输入标签的给定对象。我们可以看到输入流或字符串的解码数据。我们可以使用带有事件的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>

输出

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

使用JavaScript进行文本编码和解码的TextEncoder和TextDecoder

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中的TextEncoder和TextDecoder帮助对值进行编码和解码。它有助于保护和保密数据。

Camera课程

Camera API2 教程

API2 教程
Camera 性能教程

Perf 教程
Camera Native Framework 教程

Native FW 教程
Camera QCOM ISP 教程

ISP 教程
Camera QCOM Sensor 教程

Sensor 教程

Python教程

Python 教程

Python 教程
NumPy 教程

NumPy 教程
Django 教程

Django 教程

Java教程

Java 教程

Java 教程

Web教程

JavaScript 教程

JavaScript 教程
jQuery 教程

jQuery 教程
CSS 教程

CSS 教程
PHP 教程

PHP 教程
Laravel 教程

Laravel 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程

数据库教程

SQL 教程

SQL 教程
SQLite 教程

SQLite 教程
MySQL 教程

MySQL 教程
PL/SQL 教程

PL/SQL 教程
MongoDB 教程

MongoDB 教程

图形图像教程

OpenCV 教程

OpenCV 教程

办公软件教程

Excel 教程

Excel 教程

Linux教程

Linux命令全集

Linux命令全集
Linux内核API

Linux内核API
LVGL 教程

LVGL 教程

计算机教程

操作系统 教程

操作系统 教程
计算机网络 教程

计算机网络 教程
C语言 教程

C语言 教程
C++ 教程

C++ 教程
Swift 教程

Swift 教程

大数据教程

Hadoop 教程

Hadoop 教程
Spark 教程

Spark 教程
Scala 教程

Scala 教程

开发工具教程

Git 教程

Git 教程
Jenkins 教程

Jenkins 教程
ChatGPT 教程

ChatGPT 教程
IntelliJ 教程

IntelliJ 教程

JavaScript 精选教程