应根据编码目标选择函数：编码整个URL用encodeURI，保留/:?@;$等结构符；编码URL某部分（如参数）用encodeURIComponent，转义所有特殊字符。二者不可混用，须配对解码。
关键看你要编码的是“整个 URL 字符串”，还是“URL 中的某一段内容”。选错会导致链接打不开、参数被截断，甚至引发安全问题。
看目标：整个 URL 还是其中一部分
encodeURI 专为编码完整可用的 URL 字符串设计。它会保留 : / ? & = # @ $ 等结构字符，只转义空格、中文、括号、逗号等不影响 URL 解析的字符。
encodeURIComponent 则针对URL 的任意组成部分，比如查询参数值、路径片段、hash 值、POST 表单字段。它连 / ? & = # : ; @ 都会转义，确保这段内容不会干扰 URL 整体结构。
简单记：能直接贴进浏览器地址栏打开的，用 encodeURI；要拼进已有 URL 里当参数或路径的，用 encodeURIComponent。
看实际效果：对比几个典型字符
同一个字符串传给两个函数，结果差异很直观：
- / → encodeURI 保持不变，encodeURIComponent 变成 %2F
- ? → encodeURI 保持不变，encodeURIComponent 变成 %3F
- & → encodeURI 保持不变，encodeURIComponent 变成 %26
- = → encodeURI 保持不变，encodeURIComponent 变成 %3D
- 空格或中文 → 两者都变成 %20 或 %E5%80%BC，这部分没区别
看常见错误场景
以下写法容易出错，需要特别注意：
-
拼接 query 参数时用了 encodeURI：
const url = encodeURI(`https://api.com/search?q=${keyword}`);
如果 keyword 是前端&工具，结果变成q=前端&工具—— 后半部分被当成另一个参数，服务端收不到完整值。 -
给整个 URL 用了 encodeURIComponent：
const url = encodeURIComponent("https://site.com/path?x=1");
结果中https://变成https%3A%2F%2F，/和?全被转义，浏览器无法识别为有效链接。 -
对路径片段混用：
想构造/user/张三/profile，若对“张三”用 encodeURI，斜杠不转义没问题；但若误用 encodeURIComponent，/被编码成%2F，路径就断了。
看解码匹配原则
编码和解码必须配对使用：
- 用 encodeURI 编码的，必须用 decodeURI 解码
- 用 encodeURIComponent 编码的，必须用 decodeURIComponent 解码
- 两者不能交叉使用，否则中文变乱码、特殊字符还原失败
浏览器地址栏中的 URL（如 location.href）通常由 encodeURI 生成，后端解析 query string 时也应按对应规则处理。
