请解释 JavaScript 中的编码和解码方法，例如 encodeURI、decodeURI、encodeURIComponent、decodeURIComponent、btoa 和 atob 的作用和区别。-JavaScript中文网-JavaScript教程资源分享门户

请解释 JavaScript 中的编码和解码方法，例如 encodeURI、decodeURI、encodeURIComponent、decodeURIComponent、btoa 和 atob 的作用和区别。

本题详细解读

URI 编码和解码

URI 编码和解码是 Web 开发中常见的操作，主要用于处理 URL 中的特殊字符，确保 URL 的正确解析和传输。

encodeURI(uri)

encodeURI() 方法将 URI 中的某些字符替换为由一个、两个或三个十六进制数字编码的转义序列。它旨在编码完整的 URI，并且不会编码一些保留的 URI 结构字符，例如：
- A-Z a-z 0-9: 英文字母和数字
- ; / ? : @ & = + $ , - _ . ! ~ * ' ( ) #: 一些 URI 结构字符
使用场景: 主要用于编码整个 URI，例如：
```
const uri = "https://example.com/path?query=hello world";
const encodedURI = encodeURI(uri);
console.log(encodedURI);
// Output: "https://example.com/path?query=hello%20world"
```

decodeURI(encodedURI)

decodeURI() 方法用于解码由 encodeURI() 编码的 URI，将转义序列恢复为原始字符。

const encodedURI = "https://example.com/path?query=hello%20world";
const decodedURI = decodeURI(encodedURI);
console.log(decodedURI);
// Output: "https://example.com/path?query=hello world"

encodeURIComponent(uriComponent)

encodeURIComponent() 方法用于编码 URI 的组件部分，它会编码更多的字符，包括 encodeURI() 中不会编码的 URI 结构字符。
- A-Z a-z 0-9: 英文字母和数字
- ; / ? : @ & = + $ , - _ . ! ~ * ' ( ) #: 一些 URI 结构字符
使用场景: 主要用于编码 URI 的组件，例如 URL 参数、路径等。
```
const uriComponent = "你好/世界?name=john doe&age=30";
const encodedComponent = encodeURIComponent(uriComponent);
console.log(encodedComponent);
// Output: "%E4%BD%A0%E5%A5%BD%2F%E4%B8%96%E7%95%8C%3Fname%3Djohn%20doe%26age%3D30"
```

decodeURIComponent(encodedURIComponent)

decodeURIComponent() 方法用于解码由 encodeURIComponent() 编码的 URI 组件。

const encodedComponent = "%E4%BD%A0%E5%A5%BD%2F%E4%B8%96%E7%95%8C%3Fname%3Djohn%20doe%26age%3D30";
const decodedComponent = decodeURIComponent(encodedComponent);
console.log(decodedComponent);
// Output: "你好/世界?name=john doe&age=30"

Base64 编码和解码

Base64 是一种用 64 个字符表示任意二进制数据的编码方式。

btoa(string)

btoa() 方法用于将字符串或二进制数据编码为 Base64 字符串。

注意: btoa() 只能处理 ASCII 字符编码，如果字符串中包含非 ASCII 字符，例如中文字符，需要先进行 UTF-8 编码，然后再进行 Base64 编码。可以使用 TextEncoder 将字符串转换为 UTF-8 字节序列的 Uint8Array，然后再使用 String.fromCharCode.apply(null, uint8Array) 将 Uint8Array 转换为 ASCII 字符串。
```
-- -------------------- ---- -------
-------- ----------------- -
  ----
    ------ ----------
  - ----- ----
    ------------
      ----- ------- - --- --------------
      ----- ---------- - --------------------
      ------ ------------------------------------ -------------
  -
-

----- --- - ------- -----
----- ---------- - ------------------
------------------------ -- ------- --------------------
```

atob(encodedString)

atob() 方法用于解码 Base64 字符串，将其恢复为原始字符串。类似地，对于包含非 ASCII 字符的 Base64 编码，需要先解码为字节序列，再使用 TextDecoder 将字节序列解码为 UTF-8 字符串。

-- -------------------- ---- -------
-------- ------------------------ -
  ----
      ------ -----------------
  ----------
    ------------
    ----- ---------- - --------------------------------- ---- -- --------------------
    ----- ------- - --- --------------
    ------ ---------------------------
  -
  
-
----- ---------- - -----------------------
----- ---------- - -------------------------
------------------------ -- ------- ------- ----

纠错
反馈

请解释 JavaScript 中的编码和解码方法，例如 encodeURI、decodeURI、encodeURIComponent、decodeURIComponent、btoa 和 atob 的作用和区别。

推荐答案

本题详细解读

URI 编码和解码

Base64 编码和解码

纠错反馈