JS encodeURI详解|极客笔记

JS encodeURI详解

1. 什么是encodeURI？

encodeURI是JavaScript中一个内置的全局函数，用于对URI（Uniform Resource Identifier）进行编码。URI是用来标识互联网资源的字符串，包括URL（Uniform Resource Locator）和URN（Uniform Resource Name）等概念。

编码是指将特殊字符转换为16进制的转义序列，以便在URI中进行传输。例如，空格字符在URI中是非法的，必须被编码为%20，以便正确传输和接收。encodeURI的作用就是对URI中的特殊字符进行编码，而保留URI中的合法字符。

2. encodeURI用法

encodeURI的语法如下：

encodeURI(URI)

其中，URI是需要进行编码的字符串。注意，encodeURI只对URI中的特殊字符进行编码，而不会对整个URI进行编码。

下面是一个简单的编码示例：

let uri = "http://example.com/?name=John Doe";
let encodedUri = encodeURI(uri);
console.log(encodedUri);

运行结果：

http://example.com/?name=John%20Doe

在上述示例中，原始的URI中包含一个空格字符，通过encodeURI进行编码后，空格字符被替换为%20。

3. encodeURI的编码规则

encodeURI函数在编码URI时遵循一定的规则，主要包括以下几点：

保留部分字符：~!@#$&*()=:/,;?+'
不保留部分字符：#%[ ]
对于非法字符（不在保留字符和不保留字符范围内的字符），会进行编码。

更具体地，encodeURI会对以下字符进行编码：

; , / ? : @ & = + $

编码规则是将每个字符替换为%后接两个十六进制数字。例如，字符:的编码为%3A。

4. encodeURI与encodeURIComponent的区别

在介绍encodeURI之前，我们还需要了解另一个函数encodeURIComponent，它也用于对URI进行编码。

encodeURIComponent与encodeURI的区别在于，前者编码范围更广，它会对除了保留字符外的所有字符进行编码。这也是为什么在编码URL参数时，一般使用encodeURIComponent而非encodeURI的原因。

下面是一个对比示例：

let uri = "http://example.com/?name=John Doe";
let encodedUri1 = encodeURI(uri);
let encodedUri2 = encodeURIComponent(uri);
console.log("encodeURI:", encodedUri1);
console.log("encodeURIComponent:", encodedUri2);

运行结果：

encodeURI: http://example.com/?name=John%20Doe
encodeURIComponent: http%3A%2F%2Fexample.com%2F%3Fname%3DJohn%20Doe

可以看到，使用encodeURI进行编码时，空格字符被转换为%20，而encodeURIComponent则将空格字符转换为%20。

5. 常见用例

5.1 编码URL参数

encodeURI常用于对URL参数进行编码，以确保参数传递的正确性。下面是一个示例：

let name = "John Doe";
let age = 25;

let url = "http://example.com/?name=" + encodeURI(name) + "&age=" + encodeURI(age);
console.log(url);

运行结果：

http://example.com/?name=John%20Doe&age=25

在示例中，encodeURI用于对name和age参数进行编码，确保参数中的特殊字符得到正确的处理。

5.2 编码URI片段

除了编码URL参数外，encodeURI还可以用于编码URI的其他部分，比如URI片段。下面是一个示例：

let uri = "http://example.com/#section=title&content=Hello World";
let encodedUri = encodeURI(uri);
console.log(encodedUri);

运行结果：

http://example.com/#section=title&content=Hello%20World

在示例中，URI中的空格字符被编码为%20，确保URI片段的正确传输。

6. 总结

本文详细介绍了JavaScript中的encodeURI函数，它用于对URI进行编码。通过encodeURI函数，可以将URI中的特殊字符转换为对应的转义序列，以便在URI传输过程中得到正确处理。

与encodeURIComponent相比，encodeURI的编码范围较小，仅对特定的保留字符以外的字符进行编码。因此，在编码URL参数时，一般使用encodeURIComponent来保证编码的完整性。

无论是编码URL参数还是URI片段，encodeURI都是非常有用的函数，它可以确保URI在传输过程中不会丢失信息或产生错误。

JS encodeURI详解