🔗 URL编码解码

URL编码/解码,处理URL中的特殊字符和中文

📖 使用说明
🎯 功能说明
  • URL编码 (encodeURI): 编码URL中的特殊字符和中文字符,适用于完整URL
  • URL解码 (decodeURI): 将编码后的URL还原为可读字符
  • 完整编码 (encodeURIComponent): 对URL参数值进行编码,会编码更多字符
  • 完整解码 (decodeURIComponent): 解码encodeURIComponent编码的字符串
⚡ 使用场景
  • API请求参数中包含中文或特殊符号
  • GET请求URL中包含查询参数
  • 表单提交特殊字符
  • 处理前端路由中的特殊字符
🔄 encodeURI vs encodeURIComponent 区别
字符encodeURIencodeURIComponent
A-Z a-z 0-9不编码不编码
- _ . ~ ! ~ ( )不编码不编码
# : / ? & = + $ , ; @不编码编码
空格%20%20
中文编码编码
📝 常见编码示例
原字符编码结果
空格%20
!%21
#%23
&%26
=%3D
%E4%B8%AD
💡 实际应用示例

示例1 - GET请求参数编码:

原始: https://api.example.com/search?name=张三&city=北京

编码后: https://api.example.com/search?name=%E5%BC%A0%E4%B8%89&city=%E5%8C%97%E4%BA%AC

示例2 - URL参数值单独编码:

参数值: hello world!

编码后: hello%20world%21

示例3 - 中文姓名编码:

原始: 李明

编码后: %E6%9D%8E%E6%98%8E

⚠️ 注意事项
  • 编码完整URL vs 编码参数值: 编码完整URL时使用encodeURI,编码URL中的查询参数值时使用encodeURIComponent
  • 保持URL结构: encodeURI不会编码URL中的冒号、双斜杠等,用于保留完整URL结构
  • 双重编码问题: 避免对已编码的字符串再次编码,这会导致URL不可用
  • 前后端编码一致性: 确保前端编码和后端解码使用相同的字符编码(UTF-8)
🔗 相关工具