escape, encodeURI, encodeURIComponent 区别

在Web开发中，经常需要对字符串进行编码，以确保它们能在不同的环境中安全传输。本文将深入探讨escape(), encodeURI(), 和 encodeURIComponent() 这三个JavaScript内置函数的区别，并通过示例代码和详细的解释来帮助你理解它们的使用场景和注意事项。

基本概念

escape()

escape() 是一个旧的函数，用于对字符串进行编码，使得它能被安全地用作统一资源标识符（URI）。它会将字符串中的每个字符转换成相应的百分号编码（%xx 形式），除了一些保留字符会被保留原样。

encodeURI()

encodeURI() 函数用于对整个URI进行编码。它会把所有非保留字符转换成它们的百分号编码形式。保留字符不会被编码。

encodeURIComponent()

encodeURIComponent() 与 encodeURI() 类似，但它的用途更具体——用于对URI组件进行编码。它会编码所有非保留字符和保留字符，只留下一小部分字符不编码。

作用说明

escape()

虽然 escape() 在过去曾被广泛使用，但它已经被废弃了，并且不推荐在现代Web开发中使用。它的主要问题是它不符合URI规范，并且它编码的字符集与现代标准不符。

encodeURI()

encodeURI() 主要用于编码完整的URI，它可以确保整个URI被安全地传输。它会保留URI中的保留字符，如 :/?#[]@!$&'()*+,;=。

encodeURIComponent()

encodeURIComponent() 主要用于编码URI中的某个组成部分，比如查询字符串或者路径的一部分。它会对除了 -._~ 之外的所有保留字符进行编码。

技术实现

示例一：使用 escape()

// 注意：此函数已废弃，不建议使用。
const originalString = "Hello World!";
const escapedString = escape(originalString);
console.log("Escaped String:", escapedString); // 输出: Escaped String: Hello%20World!

示例二：使用 encodeURI()

const uri = "https://www.example.com/?search=Hello+World!";
const encodedURI = encodeURI(uri);
console.log("Encoded URI:", encodedURI); // 输出: Encoded URI: https://www.example.com/?search=Hello+World!