JavaScript中的URL编码与解码方法

1. 问题描述
URL编码与解码是处理URL中特殊字符（如空格、中文、符号等）的关键技术。JavaScript提供了encodeURI、encodeURIComponent、decodeURI、decodeURIComponent等方法，但它们的应用场景和编码范围不同。理解其区别和正确使用场景是前端开发中的常见考点。

2. 为什么需要URL编码？
URL中某些字符有特殊含义（如?表示查询参数起始，#表示锚点）。若数据中包含这些字符，需编码为安全格式（如空格变为%20）。例如：

// 若直接拼接URL，可能出错
let query = "name=John&Doe";
let url = "https://example.com?query=" + query; // 错误：&会被解析为参数分隔符

3. 编码方法对比
（1）encodeURI vs encodeURIComponent

• encodeURI：用于编码完整URL，保留URL合法字符（如:/?#[]@），仅对非法字符（如空格、中文）编码。

let url = "https://example.com/测试?name=John Doe";
console.log(encodeURI(url)); 
// 输出：https://example.com/%E6%B5%8B%E8%AF%95?name=John%20Doe

• encodeURIComponent：用于编码URL的一部分（如参数值），对除字母数字和-_.!~*'()外的所有字符编码：

let param = "测试&value=1";
console.log(encodeURIComponent(param)); 
// 输出：%E6%B5%8B%E8%AF%95%26value%3D1

（2）解码方法对应关系

• decodeURI / decodeURIComponent 分别对应上述编码方法的反向操作。

4. 错误使用示例与纠正
错误示例：

let param = "a&b";
let url = "https://example.com?q=" + encodeURI(param); 
// 错误：encodeURI不会编码&，导致URL解析错误

正确做法：

let param = "a&b";
let url = "https://example.com?q=" + encodeURIComponent(param); 
// 结果：https://example.com?q=a%26b

5. 特殊字符处理规则
通过对比表格理解编码范围：

6. 实际应用场景

• encodeURIComponent：处理查询参数、哈希值、路径片段：

let params = { name: "John Doe", city: "北京" };
let query = Object.keys(params)
  .map(key => `${key}=${encodeURIComponent(params[key])}`)
  .join("&");
// 结果：name=John%20Doe&city=%E5%8C%97%E4%BA%AC

• encodeURI：确保完整URL的合法性（如跳转链接）：

let unsafeURL = "https://example.com/测 试";
location.href = encodeURI(unsafeURL); // 避免空格和中文导致错误

7. 总结

• 完整URL：使用encodeURI（保留URL结构字符）。
• URL组成部分：使用encodeURIComponent（严格编码特殊字符）。
• 错误选择方法可能导致URL解析异常或安全漏洞（如注入攻击）。