JS 三种URI编码/解码方式比较

一、JavaScript概念

JavaScript是一种广泛使用的编程语言，主要用于Web开发。它是一种脚本语言，这意味着它不需要像编译语言那样预先编译，而是在运行时解释和执行。JavaScript可以直接在浏览器中运行，这使得它在前端开发中特别重要，可以用于动态生成和更改网页内容、响应用户交互、发送和接收数据等。

JavaScript的主要特点包括：

动态类型：变量可以在运行时更改其数据类型。
面向对象：JavaScript是一种面向对象的编程语言，支持类和继承。
异步编程：JavaScript支持异步编程，这使得它可以处理如用户交互和网络请求等异步事件。
浏览器兼容性：大多数现代浏览器都支持JavaScript。

二、escape & unescape

escape() 和 unescape() 是两个JavaScript函数，用于编码和解码字符串中的特殊字符。

escape() 函数接受一个字符串作为输入，并返回一个新的字符串，在新字符串中，某些字符被替换为它们的Unicode转义序列。例如，空格、符号和非ASCII字符被编码为形式为 %XX 的十六进制表示，其中XX是字符的Unicode值。这在你想要在URL或通过互联网传输的字符串中包含特殊字符时非常有用。

unescape() 函数用于解码使用 escape() 编码的字符串。它接受一个编码后的字符串作为输入，并返回一个新的字符串，其中的Unicode转义序列被替换为相应的字符。

然而，值得注意的是，escape() 和 unescape() 函数在现代浏览器中被认为是不推荐使用的，并且有限的支持。推荐使用更健壮的编码和解码方法，如 encodeURIComponent() 和 decodeURIComponent() 函数。

下面是一些使用 escape() 和 unescape() 函数的例子：

let str = "Hello World!";
let encodedStr = escape(str);
console.log(encodedStr);
// 输出: "Hello%20World%21"

let decodedStr = unescape(encodedStr);
console.log(decodedStr);
// 输出: "Hello World!"

在这个例子中，我们使用 escape() 函数对字符串进行编码，并使用 unescape() 函数对编码后的字符串进行解码，最终得到原始字符串。

请注意，这些函数不推荐在生产环境中使用，而应该使用更可靠的方法来进行字符串编码和解码。

三、encodeURIComponent & decodeURIComponent

encodeURIComponent() 和 decodeURIComponent() 是JavaScript中用于编码和解码URL的特殊字符的函数。

encodeURIComponent() 函数接受一个字符串作为输入，并返回一个新的字符串，在新字符串中，除了字母、数字和 - _ . ! ~ * ' ( ) 之外的字符都被替换为它们的转义序列 %XX，其中XX是字符的十六进制Unicode值。

decodeURIComponent() 函数用于解码使用 encodeURIComponent() 编码的字符串。它接受一个编码后的字符串作为输入，并返回一个新的字符串，其中的转义序列被替换为相应的字符。

这两个函数是处理URL参数非常有用的工具，因为它们确保参数中的特殊字符不会干扰URL的结构。

下面是一些使用 encodeURIComponent() 和 decodeURIComponent() 的例子：

let str = "Hello World!";
let encodedStr = encodeURIComponent(str);
console.log(encodedStr);
// 输出: "Hello%20World%21"

let decodedStr = decodeURIComponent(encodedStr);
console.log(decodedStr);
// 输出: "Hello World!"

在这个例子中，我们使用 encodeURIComponent() 函数对字符串进行编码，并使用 decodeURIComponent() 函数对编码后的字符串进行解码，最终得到原始字符串。

这些函数是在处理URL参数时的推荐选择，因为它们更可靠、更广泛地被支持，并且可以处理更多的特殊字符。

四、encodeURI & decodeURI

encodeURI() 和 decodeURI() 是JavaScript中用于编码和解码URI的函数。

encodeURI() 函数接受一个URI字符串作为输入，并返回一个新的字符串，在新字符串中，除了字母、数字和 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) # 之外的字符都被替换为它们的转义序列 %XX，其中XX是字符的十六进制Unicode值。

decodeURI() 函数用于解码使用 encodeURI() 编码的URI字符串。它接受一个编码后的URI字符串作为输入，并返回一个新的字符串，其中的转义序列被替换为相应的字符。

这两个函数与 encodeURIComponent() 和 decodeURIComponent() 类似，但它们只对整个URI进行编码，而不会对特殊字符进行编码，例如 : / ? # [ ] @ ! $ & ' ( ) * + , ; =。

下面是一些使用 encodeURI() 和 decodeURI() 的例子：

let uri = "https://www.example.com/path?name=John Doe&age=30";
let encodedUri = encodeURI(uri);
console.log(encodedUri);
// 输出: "https://www.example.com/path?name=John%20Doe&age=30"

let decodedUri = decodeURI(encodedUri);
console.log(decodedUri);
// 输出: "https://www.example.com/path?name=John Doe&age=30"

在这个例子中，我们使用 encodeURI() 函数对URI进行编码，并使用 decodeURI() 函数对编码后的URI进行解码，最终得到原始的URI。

这些函数是处理URI字符串时的推荐选择，因为它们更可靠、更广泛地被支持，并且可以处理更多的特殊字符。

五、热门文章

【温故而知新】JavaScript数字精度丢失问题
【温故而知新】JavaScript的继承方式有那些
【温故而知新】JavaScript中内存泄露有那几种
【温故而知新】JavaScript函数式编程
【温故而知新】JavaScript的防抖与节流
【温故而知新】JavaScript事件循环