encodeURIComponent和encodeURI区别

为了编码整个URL，通常会使用encodeURI函数，而不是encodeURIComponent，这是出于以下原因：

1、 保留URL的结构

• encodeURI用于编码整个URL，它会保留URL中合法的分隔符（如:、/、?、#、@、&、=、+、$、,、;等），这些分隔符对于URL的结构是必需的。
  例如，编码http://example.com/path?name=John
  Doe时，encodeURI会保留?和=，因为它们是查询字符串的一部分。

2、安全性：

• 使用encodeURI可以避免URL因特殊字符而被错误解析，从而确保浏览器能正确识别和访问目标资源。

3、encodeURIComponent的用途不同：

• 相比之下，encodeURIComponent用于编码URL的某个组件（如查询字符串中的参数值），它会将几乎所有的非字母数字字符都进行编码，包括上述URL结构中的合法分隔符。

• 例如，编码查询参数值时，应使用encodeURIComponent，如encodeURIComponent(“John
  Doe”)将产生"John%20Doe"，这适用于构造如http://example.com/path?name=John%20Doe这样的URL。

示例：
如果你要编码整个URL，可以这样做：

let url = "http://example.com/path?name=John Doe&age=30";  
let encodedUrl = encodeURI(url);  
console.log(encodedUrl); // 输出: "http://example.com/path?name=John Doe&age=30"

如果你要编码URL中的某个部分（如查询参数值），可以这样做：

let paramValue = "John Doe";  
let encodedParamValue = encodeURIComponent(paramValue);  
let url = `http://example.com/path?name=${encodedParamValue}&age=30`;  
console.log(url); // 输出: "http://example.com/path?name=John%20Doe&age=30"

总结来说，使用encodeURI来编码整个URL是因为它保留了URL的合法分隔符，从而保证了URL结构的正确性和可访问性。