encodeURIComponent()是JavaScript中用于对‌URI组件‌（如查询参数、路径片段等）进行编码的全局函数，其核心作用是将字符串中的特殊字符转换为UTF-8编码的转义序列，确保其在URL中安全传输13。以下是详细解析：

---

‌一、功能原理‌

1. ‌编码范围‌
   对所有非字母数字字符（包括保留字符!*'();:@&=+$,/?%#[]等）进行编码，仅保留以下字符不编码：

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

1. 例如空格编码为%20，&编码为%26

2. ‌编码方式‌
   将每个需编码的字符转换为%后跟两个十六进制数的形式（UTF-8编码）。例如：

encodeURIComponent("测试&参数") → "测试%26参数"

1. 其中&被编码为%26

---

‌二、与encodeURI()的区别‌

特性	encodeURIComponent()	encodeURI()
‌编码目标‌	URI的组成部分（如参数值）	完整URL（保留URL结构字符）
‌编码范围‌	所有非字母数字字符	仅空格和中文字符等非保留字符
‌典型用例‌	?param=后的值	直接编码整个URL
‌示例‌	name=John&Doe → name%3DJohn%26Doe	http://example.com/?name=John Doe → 仅编码空格

---

‌三、使用场景‌

1. ‌URL参数传递‌
   防止参数中的&、=等字符破坏URL结构：

let param = "query=JavaScript&AJAX";
let url = `search?q=${encodeURIComponent(param)}`; 
// 结果：search?q=query%3DJavaScript%26AJAX

1. ‌JSON数据拼接‌
   确保JSON字符串作为URL参数时不被截断：

let data = JSON.stringify({name: "张三", age: 20});
let safeData = encodeURIComponent(data); 
// 结果：%7B%22name%22%3A%22%E5%BC%A0%E4%B8%89%22%2C%22age%22%3A20%7D

1. 
   

2. ‌跨域请求‌
   配合JSONP或CORS时编码回调函数名：

let callback = "parseResponse(data)";
let scriptSrc = `https://api.example.com?callback=${encodeURIComponent(callback)}`;

‌四、注意事项‌

1. ‌双重编码问题‌
   避免重复调用encodeURIComponent()，否则会导致%被二次编码（如%20 → %2520）

2. ‌解码匹配‌
   必须使用decodeURIComponent()解码，decodeURI()无法还原保留字符

3. ‌非URL场景‌
   如需编码非URI内容（如HTML属性），应使用其他方法（如textContent或DOM操作）

---

‌五、示例对比‌

// encodeURIComponent() vs encodeURI()
let url = "https://example.com/search?q=JavaScript&AJAX";
console.log(encodeURIComponent(url)); 
// 输出：https%3A%2F%2Fexample.com%2Fsearch%3Fq%3DJavaScript%26AJAX
console.log(encodeURI(url)); 
// 输出：https://example.com/search?q=JavaScript&AJAX（仅空格编码）