HTML5 – URL编码

在web开发中，我们经常需要在URL中传递参数，但是由于URL中只能出现ASCII字符集中的字符，因此需要对参数进行编码。而HTML5中提供了一种方便的URL编码方式，即使用encodeURIComponent()函数。

什么是URL编码？

URL编码是指将URL中的特殊字符以一种标准化的方式进行替换，以便在网络传输中能够被正确识别和处理。常见的URL特殊字符包括：空格、+、&、/、?、%等。

encodeURIComponent()函数

encodeURIComponent()函数是HTML5中定义的一个全局函数，它用于将字符串进行URL编码。下面是一个示例：

var str = "hello world!@#$%^&*()_+-=[]{};':\",./<>?";
var encodedStr = encodeURIComponent(str);
console.log(encodedStr);

输出结果为：

hello%20world!%40%23%24%25%5E%26%2A()_%2B-%3D%5B%5D%7B%7D%3B'%3A%22%2C.%2F%3C%3E%3F

可以看到，字符串中的特殊字符都被编码成了%加上其16进制ASCII码表示的值。如果我们想将一个对象转换成URL参数，可以结合使用encodeURIComponent()和Array.prototype.map()函数，如下所示：

var obj = {
  name: "张三",
  age: 18,
  gender: "male"
};

var encodedParams = Object.keys(obj).map(function(key){
  return encodeURIComponent(key) + "=" + encodeURIComponent(obj[key]);
}).join("&");

console.log(encodedParams);

输出结果为：

name=%E5%BC%A0%E4%B8%89&age=18&gender=male

可以看到，该对象被转换为由键值对组成的URL参数，并且其中的特殊字符都已被编码。

decodeURIComponent()函数

decodeURIComponent()函数是encodeURIComponent()函数的反操作，用于将经过URL编码的字符串进行解码。下面是一个示例：

var encodedStr = "hello%20world!%40%23%24%25%5E%26%2A()_%2B-%3D%5B%5D%7B%7D%3B'%3A%22%2C.%2F%3C%3E%3F";
var decodedStr = decodeURIComponent(encodedStr);
console.log(decodedStr);

输出结果为：

hello world!@#$%^&*()_+-=[]{};':",./<>?

我们还可以使用decodeURIComponent()函数对URL参数进行解码，如下所示：

var params = "name=%E5%BC%A0%E4%B8%89&age=18&gender=male";
var obj = {};

params.split("&").forEach(function(param){
  var keyValue = param.split("=");
  obj[decodeURIComponent(keyValue[0])] = decodeURIComponent(keyValue[1]);
});

console.log(obj);

输出结果为：

{
  name: "张三",
  age: "18",
  gender: "male"
}

可以看到，该URL参数被转换为了一个包含键值对的对象，并且其中的特殊字符都已被解码。

结论

HTML5中提供了encodeURIComponent()和decodeURIComponent()函数，可以方便地进行URL编码和解码，使我们的web开发更加便捷。