decodeURIComponent 和 encodeURI 之间的区别是什么？

在前端开发中，我们经常会遇到编码和解码 URL 的需求。JavaScript 提供了两个内置函数来处理 URL 编码和解码：decodeURIComponent() 和 encodeURI()。虽然这两个函数都与 URL 相关，但它们具有不同的功能和用途。

encodeURI

encodeURI() 函数将字符串作为参数，返回该字符串的 URI 编码版本。URI 编码用于在 URL 中转义特殊字符，例如空格、斜杠、冒号等。encodeURI() 函数对应的解码函数是 decodeURI()。下面是一个示例：

const uri = "https://www.example.com/path with spaces/";
const encodedUri = encodeURI(uri);
console.log(encodedUri); // https://www.example.com/path%20with%20spaces/

在上面的示例中，encodeURI() 将空格字符替换为 %20。

值得注意的是，使用 encodeURI() 进行 URI 编码时，并不会对所有字符进行编码。一些特殊字符（如斜杠、冒号等）是允许出现在 URL 中的，因此并不需要进行编码。如果要对所有字符进行编码，则可以使用 encodeURIComponent() 函数。

decodeURIComponent

decodeURIComponent() 函数用于解码由 encodeURIComponent() 或类似函数编码的 URI 组件。例如，在通过 JavaScript 将表单数据发送到服务器时，我们通常会使用 encodeURIComponent() 函数对数据进行编码，以确保数据能在 URL 中正确传输。然后，在服务器端接收到数据后，我们需要使用 decodeURIComponent() 对其进行解码，才能得到原始数据。

下面是一个示例：

const encodedData = "name=%E5%BC%A0%E4%B8%89&age=18";
const decodedData = decodeURIComponent(encodedData);
console.log(decodedData); // name=张三&age=18

在上面的示例中，encodedData 是使用 encodeURIComponent() 函数对表单数据进行编码的字符串，decodedData 则是解码后的结果。

总结

虽然 encodeURI() 和 decodeURIComponent() 都与 URL 相关，但它们有着不同的用途和功能。encodeURI() 用于将字符串转换为 URI 编码格式，而 decodeURIComponent() 用于解码已编码的 URI 组件。在前端开发中，了解这两个函数的区别和用法非常重要，因为它们经常被用来处理 URL 和表单数据。

参考文献：

• MDN Web Docs - encodeURI()
• MDN Web Docs - encodeURIComponent()
• MDN Web Docs - decodeURIComponent()

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8693