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

Y_coder

已于 2024-01-19 14:50:51 修改

阅读量2.1k

点赞数

分类专栏：前端基础文章标签： javascript 前端开发语言

于 2023-06-02 16:23:38 首次发布

本文链接：https://blog.csdn.net/qq_44632227/article/details/131007923

版权

前端基础专栏收录该内容

18 篇文章 1 订阅

订阅专栏

在JavaScript中，encodeURI()和encodeURIComponent()用于对URL参数进行编码。encodeURI()不编码特殊字符如冒号、正斜杠等，而encodeURIComponent()编码更多字符，包括这些特殊符号。解码则对应使用decodeURI()和decodeURIComponent()。这两个函数是处理URL参数的关键工具。

摘要由CSDN通过智能技术生成

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

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

encodeURIComponent() 函数

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

示例：

const url = "https://www.example.com";
const name = "张三";
const encodedName = encodeURIComponent(name);
const encodedUrl = `${url}?name=${encodedName}`;
console.log(encodedUrl); 
// https://www.example.com?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); // 张三