1. encodeURI

encodeURI 函数用于对整个URI进行编码，但不包括它的组成部分（例如，查询字符串中的参数名或参数值）。这意味着它不会对属于URI本身的字符进行编码，比如协议（http, https等）、主机名、路径等。它主要用于对整个URL进行编码，以确保URL的正确性。

使用场景示例：

当你需要发送一个完整的URL给服务器时，但不希望对URL本身的组成部分（如路径和查询字符串中的保留字符）进行编码。

let url = "https://example.com/search?query=JavaScript&lang=zh-cn";
let encodedUrl = encodeURI(url);
console.log(encodedUrl); // 输出: https://example.com/search?query=JavaScript&lang=zh-cn

2. encodeURIComponent

encodeURIComponent 函数用于对URI的组成部分进行编码，如查询字符串的参数名和参数值。它主要用于编码查询字符串或表单数据中的参数值。

使用场景示例：

当你需要构造查询字符串或表单数据，并希望对每个参数名和值进行编码时，可以使用encodeURIComponent。

let queryParam = "JavaScript & HTML & CSS";
let encodedQueryParam = encodeURIComponent(queryParam);
console.log(encodedQueryParam); // 输出: JavaScript%20%26%20HTML%20%26%20CSS

结合使用encodeURI和encodeURIComponent的示例

在构建完整的URL时，你通常会结合使用这两个函数来确保URL的各个部分都被正确编码。

let protocol = "https";
let host = "example.com";
let path = "/search";
let queryParamName = "query";
let queryParamValue = "JavaScript & HTML"; // 需要编码的参数值
let encodedQueryParamValue = encodeURIComponent(queryParamValue);

let url = `${protocol}://${host}${path}?${queryParamName}=${encodedQueryParamValue}`;
console.log(url); // 输出: https://example.com/search?query=JavaScript%20%26%20HTML

在这个例子中，encodeURI用来编码整个协议和主机名部分，而encodeURIComponent用来编码查询字符串中的参数值。这样既可以确保URL的正确性，也可以避免在发送请求时出现语法错误。

encodeURI 和 encodeURIComponent 的区别

这两个方法虽然都是用来编码 URL 的，但它们的使用场景不同：

• encodeURI 主要用于编码完整的URL，不会编码URL中的特殊字符（如 :/?#[]@!$&'()*+,;=），因为这些字符在 URL 中是有特殊含义的，需要保留。
• encodeURIComponent 会编码所有字符，包括URL中的特殊字符，所以它更适合编码 URL 的参数部分，比如查询字符串的值。

相应的，解码时也需要使用对应的方法：decodeURI 对应 encodeURI，decodeURIComponent 对应 encodeURIComponent。