encodeURI和encodeURICompoent的区别

encodeURI() 和 encodeURIComponent() 是 JavaScript 中用于编码 URL 的内置函数，核心区别在于编码范围和应用场景。

---

一、核心区别

维度	encodeURI()	encodeURIComponent()
设计目的	编码完整 URL	编码 URL 的某一部分（如参数）
保留字符	不编码 :/?#@&=+$,; 等保留字符	编码所有非标准字符（包括保留字符）
适用场景	确保整个 URL 结构不被破坏	确保 URL 的某部分（如参数值）合法
解码函数	decodeURI()	decodeURIComponent()

---

二、编码范围对比

1. encodeURI() 的保留字符

不会对以下字符编码（保留 URL 结构）：

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

示例：

const url = "https://example.com/path?name=John Doe&age=20";
console.log(encodeURI(url));
// 输出: "https://example.com/path?name=John%20Doe&age=20"
// 仅编码空格（转为 %20），保留 : / ? & =

2. encodeURIComponent() 的编码范围

对所有非标准字符编码（包括保留字符）：

A-Z a-z 0-9 - _ . ! ~ * ' ( )

示例：

const param = "John Doe&age=20";
console.log(encodeURIComponent(param));
// 输出: "John%20Doe%26age%3D20"
// 空格 → %20，& → %26，= → %3D

---

三、典型场景

1. 使用 encodeURI() 的场景

需要确保 URL 整体有效时（如跳转链接）：

const fullUrl = "https://example.com/path with space?q=search term";
const encodedUrl = encodeURI(fullUrl);
// 输出: "https://example.com/path%20with%20space?q=search%20term"
// 保留 ? 和 /，仅编码路径和参数中的空格

2. 使用 encodeURIComponent() 的场景

编码 URL 参数的值（防止破坏参数分隔符）：

const params = { name: "John & Doe", city: "New York" };
const query = `name=${encodeURIComponent(params.name)}&city=${encodeURIComponent(params.city)}`;
// 结果: "name=John%20%26%20Doe&city=New%20York"
// & 被编码为 %26，空格为 %20

---

四、错误用法示例

1. 错误使用 encodeURI() 编码参数

const value = "data&123";
const badUrl = "https://example.com?key=" + encodeURI(value);
// 结果: "https://example.com?key=data&123"
// & 未被编码，导致 URL 解析错误（参数分隔符冲突）

2. 错误使用 encodeURIComponent() 编码完整 URL

const url = "https://example.com/path?q=test";
const encoded = encodeURIComponent(url);
// 输出: "https%3A%2F%2Fexample.com%2Fpath%3Fq%3Dtest"
// : / ? 被编码，导致 URL 失效

---

五、总结

• encodeURI() ：
  适用于保留 URL 结构 的场景（如路径、域名）。
  示例：encodeURI("https://example.com/路径?q=值")
• encodeURIComponent() ：
  适用于编码 URL 片段 （如参数值、哈希值）。
  示例：encodeURIComponent("q=search term&sort=asc")

---

六、编码对照表

字符	encodeURI()	encodeURIComponent()
空格	%20	%20
:	保留	%3A
/	保留	%2F
?	保留	%3F
&	保留	%26
=	保留	%3D
中文	%E4%B8%AD	%E4%B8%AD

---

七、最佳实践

1. 构造 URL 参数时：

   const baseUrl = "https://example.com/search";
   const query = "coffee & tea";
   const safeUrl = `${baseUrl}?q=${encodeURIComponent(query)}`;
   // 结果: "https://example.com/search?q=coffee%20%26%20tea"

2. 直接使用 URLSearchParams（现代浏览器）：

   const params = new URLSearchParams({ q: "coffee & tea" });
   const url = `https://example.com/search?${params.toString()}`;
   // 自动编码参数值，无需手动调用 encodeURIComponent