atob() 和 btoa()、encodeURIComponent() 和 decodeURIComponent()的用法和区别。

Timo来了
217 阅读3分钟

atob() 函数

  • 功能：用于解码已经进行 Base64 编码的字符串。
  • 语法：window.atob(encodedData)，其中 encodedData 是一个包含 Base64 编码数据的二进制字符串。
  • 返回值：返回一个解码后的 ASCII 字符串。
  • 异常：如果 encodedData 不是有效的 Base64 字符串，则会抛出 InvalidCharacterError 异常。

btoa() 函数

  • 功能：用于将一个二进制字符串编码为 Base64 编码的 ASCII 字符串。
  • 语法：window.btoa(stringToEncode)，其中 stringToEncode 是需要编码的二进制字符串。
  • 返回值：返回一个包含 Base64 编码的 ASCII 字符串。
  • 异常：如果 stringToEncode 包含非单字节的字符，会抛出 InvalidCharacterError 异常。
// 使用 btoa 进行编码
const originalString = "Hello, world";
const encodedString = window.btoa(originalString);
console.log(encodedString); // 输出：SGVsbG8sIFdvcmxkIQ==

// 使用 atob 进行解码
const decodedString = window.atob(encodedString);
console.log(decodedString); // 输出：Hello, world

  • 字符限制：btoa() 仅支持 ASCII 字符，如果需要处理 Unicode 字符（如中文），需要先使用 encodeURIComponent() 进行编码，再使用 btoa() 编码。解码时则先用 atob() 解码，再用 decodeURIComponent() 解码。

    const unicodeString = "你好，世界";
const encodedUnicode = btoa(encodeURIComponent(unicodeString));
console.log(encodedUnicode); // 输出：JUU1JUE1JUJEJUU1JUE1JUJEJUU1JUFEJUE2JUU0JUI5JUEw

const decodedUnicode = decodeURIComponent(atob(encodedUnicode));
console.log(decodedUnicode); // 输出：你好，世界

  • 浏览器兼容性：atob() 和 btoa() 在现代浏览器中广泛支持，但在 IE9 及以下版本中不支持。

在 JavaScript 中，encodeURIComponent 和 decodeURIComponent 是两个用于 URI（统一资源标识符）编码和解码的函数。它们用于处理 URI 中的特殊字符，确保这些字符在 URI 中正确传输。

encodeURIComponent()

  • 功能：将一个字符串作为 URI 组件进行编码，将除了以下字符之外的所有字符都转换为 % 后跟两位十六进制数字的形式：

    • 英文字母（A-Z，a-z）
    • 数字（0-9）
    • 特殊字符：-、_、.、!、~、*、'、(、)

  • 语法：encodeURIComponent(str)，其中 str 是要编码的字符串。

  • 返回值：返回一个编码后的字符串。

  • 异常：无。

decodeURIComponent()

  • 功能：对 URI 组件进行解码，将 % 后跟两位十六进制数字的形式转换回原来的字符。
  • 语法：decodeURIComponent(str)，其中 str 是要解码的字符串。
  • 返回值：返回一个解码后的字符串。
  • 异常：如果字符串中包含不合法的编码序列，会抛出 URIError 异常。

使用示例

JavaScript复制

// 使用 encodeURIComponent 进行编码
const originalString = "Hello, world! 你好";
const encodedString = encodeURIComponent(originalString);
console.log(encodedString); // 输出：Hello%2C%20world%21%20% E4%BD%A0% E5%A5%BD

// 使用 decodeURIComponent 进行解码
const decodedString = decodeURIComponent(encodedString);
console.log(decodedString); // 输出：Hello, world! 你好

与 encodeURI 和 decodeURI 的区别

  • encodeURI() ：对整个 URI 进行编码，不会对已合法的 URI 分隔符（如 :、/、;、?、& 等）进行编码。
  • encodeURIComponent() ：对 URI 的某个组件进行编码，会对几乎所有非 ASCII 字符和某些特殊字符进行编码，包括 URI 分隔符。
  • decodeURI() ：对整个 URI 进行解码。
  • decodeURIComponent() ：对 URI 的某个组件进行解码。

注意事项

  • 字符集：encodeURIComponent 和 decodeURIComponent 使用 UTF-8 字符集进行编码和解码。

  • 错误处理：decodeURIComponent 在遇到不合法的编码序列时会抛出 URIError 异常，因此在解码时需要进行适当的错误处理。

    JavaScript复制

    try {
  const decodedString = decodeURIComponent("%E4%BD%A0% E5%A5%BD");
  console.log(decodedString);
} catch (e) {
  console.error("解码错误:", e);
}

实际应用场景

  • URL 参数编码：在构建 URL 参数时，使用 encodeURIComponent 对参数值进行编码，确保参数值中的特殊字符不会影响 URL 的合法性。

    JavaScript复制

    const param = "name=John&age=30";
const encodedParam = encodeURIComponent(param);
console.log(encodedParam); // 输出：name%3DJohn%26age%3D30

  • 处理用户输入：在处理用户输入时，使用 encodeURIComponent 对输入进行编码，防止特殊字符引起的安全问题或格式错误。

通过合理使用 encodeURIComponent 和 decodeURIComponent，可以确保在 URI 中正确传输和处理各种字符，包括特殊字符和非 ASCII 字符。

avatar
文章
阅读
粉丝