JavaScript中encodeURI和encodeURIComponent有什么区别，使用时该怎么选择

在JavaScript的URI处理场景中，encodeURI和encodeURIComponent都用于对字符串进行编码，但它们的编码范围和应用场景存在明显差异，错误的选择可能导致URI解析异常或者参数传递错误。

两个方法的核心差异：编码范围不同

二者的本质区别在于对URI保留字符的处理规则不同，编码范围的区别直接决定了它们的适用场景。

encodeURI的编码规则

encodeURI的设计目的是对整个URI进行编码，因此不会编码URI本身的结构字符，这些字符包括：

• 分隔符：冒号:、斜杠/、问号?、井号#
• URI中允许出现的未保留字符：字母、数字、- _ . ! ~ * ' ( )

它只会编码URI中的特殊字符，比如空格、中文、特殊符号等，保证编码后的字符串仍然是一个合法的完整URI。

encodeURIComponent的编码规则

encodeURIComponent的设计目的是对URI的组成部分（比如查询参数、路径片段）进行编码，因此会编码几乎所有的非字母数字字符，包括URI的结构字符，除了少数几个安全字符：- _ . ! ~ * ' ( )

也就是说，除了上述安全字符外，其他所有字符都会被编码，包括:、/、?、#等URI结构字符。

实际代码示例对比

通过具体的代码执行结果可以更直观地看到二者的差异：

// 测试字符串包含一个完整的URI和部分特殊字符
const testStr = "https://ippipp.com/api?name=张三&age=20";

// 使用encodeURI编码
const encodedByEncodeURI = encodeURI(testStr);
console.log("encodeURI结果:", encodedByEncodeURI);
// 输出：https://ippipp.com/api?name=%E5%BC%A0%E4%B8%89&age=20
// 可以看到冒号、斜杠、问号、&这些结构字符都没有被编码

// 使用encodeURIComponent编码
const encodedByEncodeURIComponent = encodeURIComponent(testStr);
console.log("encodeURIComponent结果:", encodedByEncodeURIComponent);
// 输出：https%3A%2F%2Fippipp.com%2Fapi%3Fname%3D%E5%BC%A0%E4%B8%89%26age%3D20
// 所有结构字符都被编码了，整个字符串变成了普通的编码后的文本

适用场景选择

根据两个方法的特性，我们可以明确各自的使用场景：

使用encodeURI的场景

当你需要编码一个完整的URI，并且希望编码后的结果仍然是一个可以直接访问的合法URI时，使用encodeURI。比如编码用户手动输入的一个完整网址，或者已经拼接好的完整API地址。

// 编码完整的URI，保留结构
const fullURI = "https://ipipp.com/search?keyword=JavaScript教程";
const safeURI = encodeURI(fullURI);
console.log(safeURI); // https://ipipp.com/search?keyword=JavaScript%E6%95%99%E7%A8%8B
// 编码后仍然可以正常作为URI使用

使用encodeURIComponent的场景

当你需要编码URI的某一部分，比如查询参数的值、路径参数的值，或者需要把一段文本作为URI的一部分传递时，使用encodeURIComponent。典型场景是拼接查询参数：

// 拼接查询参数，参数值需要单独编码
const baseURL = "https://ipipp.com/api/list";
const paramKey = "keyword";
const paramValue = "JavaScript&教程"; // 参数值包含&，如果不编码会和参数分隔符冲突

// 错误的拼接方式，参数值中的&会被当成参数分隔符
const wrongURL = `${baseURL}?${paramKey}=${paramValue}`;
console.log(wrongURL); // https://ipipp.com/api/list?keyword=JavaScript&教程
// 这个URL会被解析为两个参数：keyword=JavaScript 和 教程=undefined

// 正确的拼接方式，对参数值使用encodeURIComponent编码
const rightURL = `${baseURL}?${paramKey}=${encodeURIComponent(paramValue)}`;
console.log(rightURL); // https://ipipp.com/api/list?keyword=JavaScript%26%E6%95%99%E7%A8%8B
// 参数值被正确编码，&被转义为%26，不会和参数分隔符冲突

总结

简单记忆的话，encodeURI用于编码整个URI，encodeURIComponent用于编码URI的组成部分。在实际开发中，拼接URI参数的时候，参数值务必使用encodeURIComponent编码，避免出现特殊字符破坏URI结构的问题；如果是处理用户传入的完整URI地址，再使用encodeURI进行编码即可。

JavaScriptencodeURIencodeURIComponent字符串编码URI编码修改时间：2026-07-11 18:42:12