JavaScript URL编码与解码

一、URL编码与解码概述

在Web开发中，有时需要将字符串传递给URL。由于某些字符会在URL中具有特殊含义（例如?、&、=等），因此需要进行URL编码以确保这些字符被正确地处理。同时也需要对传入的URL进行解码，以将之前被编码的字符转换回原始状态。

二、JavaScript中的URL编码

在JavaScript中，可以使用encodeURI()和encodeURIComponent()函数对URL进行编码。

1. encodeURI()

encodeURI()函数可对整个URI进行编码，除了ASCII字母、数字、符号$-_.+!*'()外，其他的字符都将返回UTF-8编码的字符。

var url = "https://www.example.com/?a=b#c";
var encoded = encodeURI(url);
console.log(encoded); // 输出：https://www.example.com/?a=b#c

2. encodeURIComponent()

encodeURIComponent()函数可对URI中的每一段进行编码，包括ASCII字母、数字以及一些特殊字符，例如：冒号、斜杠、问号、井号等。

var url = "https://www.example.com/?a=b#c";
var encoded = encodeURIComponent(url);
console.log(encoded); // 输出：https%3A%2F%2Fwww.example.com%2F%3Fa%3Db%23c

三、JavaScript中的URL解码

在JavaScript中，可以使用decodeURI()和decodeURIComponent()函数对URL进行解码。

1. decodeURI()

decodeURI()函数可对encodeURI()函数编码的URI进行解码。

var encoded = "https://www.example.com/?a=b#c";
var decoded = decodeURI(encoded);
console.log(decoded); // 输出：https://www.example.com/?a=b#c

2. decodeURIComponent()

decodeURIComponent()函数可对encodeURIComponent()函数编码的URI进行解码。

var encoded = "https%3A%2F%2Fwww.example.com%2F%3Fa%3Db%23c";
var decoded = decodeURIComponent(encoded);
console.log(decoded); // 输出：https://www.example.com/?a=b#c

四、代码示例

下面是一个JavaScript中URL编码和解码的完整代码示例：

var url = "https://www.example.com/?a=b#c"; // 要编码的URL

// URL 编码
var encodedURI = encodeURI(url);
var encodedURIComponent = encodeURIComponent(url);

console.log(encodedURI); // 输出：https://www.example.com/?a=b#c
console.log(encodedURIComponent); // 输出：https%3A%2F%2Fwww.example.com%2F%3Fa%3Db%23c

// URL 解码
var decodedURI = decodeURI(encodedURI);
var decodedURIComponent = decodeURIComponent(encodedURIComponent);

console.log(decodedURI); // 输出：https://www.example.com/?a=b#c
console.log(decodedURIComponent); // 输出：https://www.example.com/?a=b#c