【前端基础】JavaScript中的加密方法encodeURI() & encodeURIComponent()

当我们需要在 URL 中传递参数时，为了避免出现一些特殊字符或中文等无法正常解析的情况，我们需要对这些参数进行编码。在 JavaScript 中，可以使用 encodeURI() 和 encodeURIComponent() 这两个函数来实现字符串编码。

1. encodeURI() 函数

encodeURI() 函数用于对整个 URI 进行编码，但不包括以下字符：;, /, ?, :, @, &, =, +, $, ,, #, [, ]。该函数会保留某些字符，例如冒号、正斜杠、问号和井号等，并将空格转换为 %20。

示例：

const url = "https://www.example.com?name=小明";
const encodedUrl = encodeURI(url);
console.log(encodedUrl); // https://www.example.com?name=%E5%B0%8F%E6%98%8E

2. encodeURIComponent() 函数

encodeURIComponent() 函数则用于对 URI 中的组件部分进行编码，包括参数、路径、哈希等。该函数会对所有非字母数字字符进行编码，包括冒号、正斜杠、问号和井号等，并将空格转换为 %20。

示例：

const url = "https://www.example.com?name=小明";
const name = "张三";
const encodedName = encodeURIComponent(name);
const encodedUrl = `${url}&name=${encodedName}`;
console.log(encodedUrl); // https://www.example.com?name=%E5%B0%8F%E6%98%8E&name=%E5%BC%A0%E4%B8%89

需要注意的是，在解析 URL 时，使用 decodeURI() 和 decodeURIComponent() 函数进行解码。这两个函数的作用与编码函数相反，将编码后的字符串解码为原始字符串。

示例：

const encodedUrl = "https://www.example.com?name=%E5%B0%8F%E6%98%8E";
const decodedUrl = decodeURI(encodedUrl);
console.log(decodedUrl); // https://www.example.com?name=小明

const encodedName = "%E5%BC%A0%E4%B8%89";
const decodedName = decodeURIComponent(encodedName);
console.log(decodedName); // 张三