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的时候稍不注意就会出问题。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
