encodeuri用于编码完整url，保留结构字符如:、/、?等，适合拼接整个地址时使用；encodeuricomponent用于编码url参数值，会对=、&、#等特殊字符进行彻底编码，适合动态拼接参数内容。两者核心区别在于使用范围不同：encodeuri处理整体结构安全，encodeuricomponent确保参数值不会干扰解析。例如传递带特殊字符的参数时必须用encodeuricomponent，否则可能导致参数截断或解析错误。正确做法是拼接前对每个参数单独编码。
在JavaScript中，encodeURI 和 encodeURIComponent 都是用来对URL进行编码的函数，但它们的使用场景和处理方式是有区别的。简单来说：
encodeURI 用于编码整个URL； encodeURIComponent 用于编码URL中的某一个参数部分。
下面具体看看它们的区别和适用情况。
encodeURI：保留URL结构字符不编码
如果你有一个完整的URL，比如 https://example.com?name=张三&city=北京，你想把它作为另一个URL的一部分传递出去，这时候应该用 encodeURI。
它会跳过一些URL中具有特殊意义的字符，比如冒号、斜杠、问号、井号等，只对中文、空格这些非ASCII字符进行编码。
例子：
const url = "https://example.com?name=张三";console.log(encodeURI(url));// 输出: https://example.com?name=%E5%BC%A0%E4%B8%89
适合场景：
对完整的URL进行编码；不想破坏URL本身的结构（如 :、/、? 等）；多用于浏览器地址栏拼接时的安全编码。
encodeURIComponent：编码更彻底，用于参数值
当你需要把某个参数的值放到URL里，比如你要构造一个带查询参数的URL，像 https://example.com?search=用户输入的内容，这个时候就应该用 encodeURIComponent。
它会对几乎所有特殊字符都进行编码，包括 =、&、# 等，这样可以避免这些字符影响URL解析。
例子：
const param = "hello world!";console.log(encodeURIComponent(param));// 输出: hello%20world%21
适合场景：
编码URL参数的值；拼接动态内容到URL中；安全地防止特殊字符干扰URL结构。
常见误区与注意事项
有时候开发者会混淆这两个方法，导致URL解析出错。比如：
❌ 错误使用 encodeURI 去编码参数值：如果参数里有 & 或 =，不会被转义，可能导致参数被错误截断。✅ 正确做法是：拼接参数前，每个参数值都应该用 encodeURIComponent 处理。
举个实际的例子：
const name = "张&三";const city = "北#京";// 正确写法const url = `https://example.com?name=${encodeURIComponent(name)}&city=${encodeURIComponent(city)}`;// 结果会被正确编码为：// https://example.com?name=%E5%BC%A0%26%E4%B8%89&city=%E5%8C%97%23%E4%BA%AC
总的来说，区别就在于使用范围不同：
encodeURI 是宏观层面的，用来处理整个URL；encodeURIComponent 是微观层面的，专门处理URL里的具体参数值。
基本上就这些，虽然看起来差不多，但在拼接URL的时候稍不注意就会出问题。
以上就是JS中的encodeURI和encodeURIComponent有什么区别？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1505670.html
微信扫一扫 
支付宝扫一扫 
