极客笔记JS urlencode详解
在Web开发中，经常会遇到需要对URL进行编码的情况。JavaScript中提供了一些内置函数来帮助我们进行URL编码，其中最常用的就是encodeURIComponent()和encodeURI()函数。本文将详细介绍这两个函数的用法和区别，并给出一些示例代码帮助大家更好地了解它们。
encodeURIComponent()
encodeURIComponent()函数用于对整个URL进行编码，包括协议、域名、路径和查询参数等。它会对所有非字母数字字符进行编码，包括:、/、?、&等字符。编码后的结果可以安全地传递给服务器，避免出现URL中含有特殊字符导致的错误。
下面是encodeURIComponent()函数的基本用法示例：
const url = "https://www.example.com/?name=张三&age=20";
const encodedUrl = encodeURIComponent(url);
console.log(encodedUrl);
运行结果为：
https%3A%2F%2Fwww.example.com%2F%3Fname%3D%E5%BC%A0%E4%B8%89%26age%3D20
从运行结果可以看出，所有的非字母数字字符都被转义成了对应的编码格式，以保证整个URL字符串的安全性。
encodeURI()
encodeURI()函数与encodeURIComponent()函数类似，都是用于对URL进行编码。但是它们之间有一个重要的区别，encodeURI()函数只对特定的字符进行编码，包括:、/、?、&、;、,、=、+和#等字符。而encodeURI()函数并不会对其他任何字符进行编码。
下面是encodeURI()函数的基本用法示例：
const url = "https://www.example.com/?name=张三&age=20";
const encodedUrl = encodeURI(url);
console.log(encodedUrl);
运行结果为：
https://www.example.com/?name=%E5%BC%A0%E4%B8%89&age=20
从运行结果可以看出，encodeURI()函数只对特定的字符进行了编码，而encodeURIComponent()函数会对所有非字母数字字符进行编码。
区别
encodeURIComponent()函数对所有非字母数字字符进行编码，包括:、/、?、&等字符，用于对整个URL进行编码。encodeURI()函数只对特定的字符进行编码，包括:、/、?、&、;、,、=、+和#等字符，用于对只需要编码一部分的URL进行编码。
示例应用
编码URL参数
const params = { name: "张三", age: 20 };
let encodedParams = Object.keys(params)
.map(key => `{encodeURIComponent(key)}={encodeURIComponent(params[key])}`)
.join("&");
console.log(encodedParams);
运行结果为：
name=%E5%BC%A0%E4%B8%89&age=20
解码已编码的URL
const encodedUrl = "https%3A%2F%2Fwww.example.com%2F%3Fname%3D%E5%BC%A0%E4%B8%89%26age%3D20";
const decodedUrl = decodeURIComponent(encodedUrl);
console.log(decodedUrl);
运行结果为：
https://www.example.com/?name=张三&age=20
总结
在Web开发中，对URL进行编码是非常常见的需求。encodeURIComponent()和encodeURI()函数是JavaScript中用于URL编码的两个重要函数。它们的区别在于encodeURIComponent()函数对所有非字母数字字符进行编码，而encodeURI()函数只对特定的字符进行编码。根据实际情况选择合适的函数进行URL编码，能够有效避免因特殊字符导致的URL错误问题。