JS URL编码|极客教程

JS URL编码

什么是URL编码？

URL编码是一种用于在Web上传输数据的机制。URL编码可将特殊字符转换为%加上其ASCII码的表示形式。这样做的原因是某些字符在URL中具有特殊意义，比如空格、问号、等号等。而URL编码能够确保这些特殊字符在URL中能够正确传输和识别。

在JavaScript中，我们可以使用内置的encodeURIComponent()和decodeURIComponent()函数来进行URL编码和解码操作。

JS的URL编码函数

encodeURIComponent()

encodeURIComponent()函数用于对URL进行编码。此函数中除了字母和数字以外的字符都会被替换成特殊字符形式。下表列出了一些对应的转换关系：

字符	URL编码
空格	%20
!	%21
“	%22
#	%23
$	%24
%	%25
…	…

下面是一个使用encodeURIComponent()函数的示例代码：

let url = "https://www.example.com/search?q=中文";
let encodedUrl = encodeURIComponent(url);

console.log(encodedUrl);
// 输出："https%3A%2F%2Fwww.example.com%2Fsearch%3Fq%3D%E4%B8%AD%E6%96%87"

在上面的示例中，我们将包含中文字符的URL使用encodeURIComponent()进行编码。结果显示，所有的非字母数字字符都被替换成了特殊字符形式。

需要注意的是，encodeURIComponent()函数不会编码以下字符：A-Z a-z 0-9 - _ . ! ~ * ' ( )。这是为了保持URL中特定字符的含义，以便正确传输。

decodeURIComponent()

decodeURIComponent()函数是对URL进行解码的函数，与encodeURIComponent()函数相对应。它将以%加上两个字符的形式编码的特殊字符转换回原始形式。下面是一个使用decodeURIComponent()函数的示例代码：

let encodedUrl = "https%3A%2F%2Fwww.example.com%2Fsearch%3Fq%3D%E4%B8%AD%E6%96%87";
let url = decodeURIComponent(encodedUrl);

console.log(url);
// 输出："https://www.example.com/search?q=中文"

在上面的示例中，我们使用decodeURIComponent()函数对编码后的URL进行解码。结果显示，所有的特殊字符都被转换回原始形式。

URL编码的使用场景

URL编码在Web开发中具有广泛的应用场景，下面列举了一些常见的使用场景。

1. 将特殊字符作为URL参数传递

当我们需要传递一些带有特殊字符的参数值给服务器时，需要对这些参数值进行URL编码。这样做可以确保这些特殊字符在服务器端能够正确识别和处理。

假设我们要传递一个包含空格的字符串作为查询参数：

let query = "hello world";
let encodedQuery = encodeURIComponent(query);

let url = "https://www.example.com/search?q=" + encodedQuery;
console.log(url);
// 输出："https://www.example.com/search?q=hello%20world"

2. 将中文或其他非ASCII字符作为URL参数传递

URL编码还可以用于将非ASCII字符（如中文）作为URL参数传递。由于URL中只能包含ASCII字符，所以我们需要对非ASCII字符进行URL编码。

下面是一个示例代码，将包含中文字符的字符串作为查询参数：

let query = "中文";
let encodedQuery = encodeURIComponent(query);

let url = "https://www.example.com/search?q=" + encodedQuery;
console.log(url);
// 输出："https://www.example.com/search?q=%E4%B8%AD%E6%96%87"

3. 处理URL路径中的特殊字符

在URL的路径中，有一些字符具有特殊意义，比如斜杠（/）、问号（?）、井号（#）等。为了确保这些特殊字符能够正确传输和识别，我们需要对其进行URL编码。

下面是一个示例代码，将带有特殊字符的路径进行URL编码：

let path = "/path with spaces?query=value#fragment";
let encodedPath = encodeURIComponent(path);

let url = "https://www.example.com" + encodedPath;
console.log(url);
// 输出："https://www.example.com%2Fpath%20with%20spaces%3Fquery%3Dvalue%23fragment"

4. 处理URL中的其他特殊字符

在某些情况下，URL中可能存在一些其他特殊字符，比如引号（”）、小括号（( )）、加号（+）等。为了确保这些特殊字符能够正确传输和识别，我们同样需要对其进行URL编码。

下面是一个示例代码，将包含其他特殊字符的URL进行编码：

let url = 'https://www.example.com/search?q="example"';
let encodedUrl = encodeURIComponent(url);

console.log(encodedUrl);
// 输出："https%3A%2F%2Fwww.example.com%2Fsearch%3Fq%3D%22example%22"