encodeURI和encodeURICompoent的区别

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


一、核心区别

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

二、编码范围对比

1. encodeURI() 的保留字符

不会对以下字符编码(保留 URL 结构):

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

示例

javascript 复制代码
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() 的编码范围

所有非标准字符编码(包括保留字符):

javascript 复制代码
A-Z a-z 0-9 - _ . ! ~ * ' ( )

示例

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

三、典型场景

1. 使用 encodeURI() 的场景

需要确保 URL 整体有效时(如跳转链接):

javascript 复制代码
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 参数的值(防止破坏参数分隔符):

javascript 复制代码
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() 编码参数

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

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

javascript 复制代码
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 参数时

    javascript 复制代码
    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(现代浏览器):

    javascript 复制代码
    const params = new URLSearchParams({ q: "coffee & tea" });
    const url = `https://example.com/search?${params.toString()}`;
    // 自动编码参数值,无需手动调用 encodeURIComponent
相关推荐
汉得数字平台14 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹20 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界9 小时前
前端:优秀架构的坟墓
前端·架构
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互