encodeURI 和 encodeURIComponent 都是 JavaScript 中用于编码 URI（统一资源标识符）的函数，但它们的编码范围不同，适用于不同的场景。

主要区别

特性	encodeURI	encodeURIComponent
编码范围	保留完整的 URI 结构	编码所有可能影响 URI 组件的字符
保留的字符	; , / ? : @ & = + $ #	仅保留字母、数字和 - _ . ! ~ * ' ( )
使用场景	编码完整 URI	编码 URI 的组成部分（如查询参数）

详细说明

1. encodeURI

• 用于编码完整的 URI
• 不会编码 URI 中有特殊意义的字符（保留字符）：

  A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #
  

• 主要用于编码整个 URL，保持其可访问性

const url = "https://example.com/路径?name=值&age=20";
console.log(encodeURI(url));
// 输出: "https://example.com/%E8%B7%AF%E5%BE%84?name=%E5%80%BC&age=20"
// 注意 ? & = 等符号没有被编码

2. encodeURIComponent

• 用于编码URI 的组成部分（如查询参数值）
• 会编码更多字符，包括保留字符：

  仅不编码: A-Z a-z 0-9 - _ . ! ~ * ' ( )
  

• 适用于编码将要作为 URI 组件使用的字符串

const param = "值&x=1";
console.log(encodeURIComponent(param));
// 输出: "%E5%80%BC%26x%3D1"
// & 和 = 也被编码了

何时使用哪个

• 使用 encodeURI 当你需要编码整个 URL 但保持其结构完整：

  const fullUrl = "https://example.com/path?query=值";
  const encodedUrl = encodeURI(fullUrl);
  

• 使用 encodeURIComponent 当你需要编码 URI 的特定部分（如查询参数）：

  const param = "name=值";
  const query = "?param=" + encodeURIComponent(param);
  

实际应用示例

// 构建带查询参数的 URL
const baseUrl = "https://example.com/search";
const query = "coffee&tea";
const page = 1;

// 错误方式 - 使用 encodeURI
const badUrl = baseUrl + "?q=" + encodeURI(query) + "&page=" + page;
// 结果: "https://example.com/search?q=coffee&tea&page=1"
// & 会被解释为新的参数分隔符，导致错误

// 正确方式 - 使用 encodeURIComponent
const goodUrl = baseUrl + "?q=" + encodeURIComponent(query) + "&page=" + page;
// 结果: "https://example.com/search?q=coffee%26tea&page=1"
// & 被正确编码为 %26

总结

记住这个简单规则：

• 需要编码整个 URL → 用 encodeURI
• 需要编码URL 的一部分（特别是查询参数值）→ 用 encodeURIComponent

对应的解码函数是 decodeURI 和 decodeURIComponent，它们遵循相同的区别原则。