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

本题详细解读

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 字符串。
```
// www.javascriptcn.com code example
function base64Encode(str) {
  try{
    return btoa(str);
  } catch (e){
    //处理非ascii字符
      const encoder = new TextEncoder();
      const uint8Array = encoder.encode(str);
      return btoa(String.fromCharCode.apply(null, uint8Array));
  }
}

const str = "Hello, 世界!";
const encodedStr = base64Encode(str);
console.log(encodedStr); // Output: SGVsbG8sIOS4lueVjCE=
```

atob(encodedString)

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

// www.javascriptcn.com code example
function base64Decode(encodedStr) {
  try{
      return atob(encodedStr);
  }catch(e){
    //处理非ascii字符
    const uint8Array = Uint8Array.from(atob(encodedStr), char => char.charCodeAt(0));
    const decoder = new TextDecoder();
    return decoder.decode(uint8Array);
  }
  
}
const encodedStr = "SGVsbG8sIOS4lueVjCE=";
const decodedStr = base64Decode(encodedStr);
console.log(decodedStr); // Output: "Hello, 世界!"

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

推荐答案

本题详细解读

URI 编码和解码

Base64 编码和解码