HTML5 – URL

HTML5中的URL，即统一资源定位符，在互联网中广泛应用。在具体开发中，URL可以用在很多地方，比如a标签的href属性、img标签的src属性等等。在HTML中，URL用字符串来表示，它包含协议、主机、端口以及资源路径等信息。

URL的基本结构

一个URL由四个部分组成：

协议(protocol) – 决定了要如何处理要获取的文件或者数据。通常是http或https协议。
主机名(hostname) – 指定了提供服务的机器名或者IP地址。
端口(port) – 指定了要使用的端口号（这个部分可以省略，默认为使用80端口）。
资源路径(resource path) – 定义了需要获取的特定资源的位置，以及任何查询参数(query parameter)。

下面是一个例子：

http://www.example.com:8080/path/to/file.html?query=123&search=hello

这个URL表示了一个使用http协议访问www.example.com机器上位于8080端口的文件/file.html，并且有查询参数query和search。

URL的编码

在URL中，一些字符需要被编码，在URL中使用百分比编码来代替特殊符号。URL编码是将不安全的字符用%后跟两个表示该字符ASCII码的十六进制数来替换的过程。例如，空格字符被%20替换，加号字符被%2B替换，等号字符被%3D替换。

在JavaScript中，可以使用encodeURI()和encodeURIComponent()两个API进行URL编码操作。

encodeURI()函数用于对完整的URL进行编码，除ASCII字母、数字、标点符号（- _ . ! ~ * ‘ ( )）外，所有字符都将被替换成%XX格式。不过，该函数不会对“/”，“:”和“#”进行编码。下面是一个例子：

var uri = "http://www.example.com/\:8080/path/to/file.html";
var encodedUri = encodeURI(uri);
console.log(encodedUri); // "http://www.example.com/:8080/path/to/file.html"

encodeURIComponent()函数用于对URL中的参数进行编码。该函数将字母、数字、标点符号和以下字符（- _ . ! ~ * ‘ ( )）以外的所有字符替换成%XX格式，包括用于URL的特殊字符如“/”，“:”，“#”和“?”。下面是一个例子：

var uri = "http://www.example.com/path/to/file.html?name=Mr.%20John%20Smith&age=30";
var encodedName = encodeURIComponent("Mr. John Smith");
var encodedAge = encodeURIComponent("30");
var encodedUri = uri + "?name=" + encodedName + "&age=" + encodedAge;
console.log(encodedUri);
// http://www.example.com/path/to/file.html?name=Mr.%20John%20Smith&age=30

URL的解码

在JavaScript中，可以使用decodeURI()和decodeURIComponent()两个API进行URL解码操作。

decodeURI()函数用于对完整的URL进行解码，将被编码的字符还原成原始字符。不过，该函数不会对“/”，“:”和“#”进行解码。下面是一个例子：

var encodedUri = "http://www.example.com/:8080/path/to/file.html";
var uri = decodeURI(encodedUri);
console.log(uri); // "http://www.example.com/:8080/path/to/file.html"

decodeURIComponent()函数用于对URL中的参数进行解码。下面是一个例子：

var encodedName = "Mr.%20John%20Smith";
var encodedAge = "30";
var encodedUri = "http://www.example.com/path/to/file.html?name=" + encodedName + "&age=" + encodedAge;
var name = decodeURIComponent(encodedName);
var age = decodeURIComponent(encodedAge);
console.log(name); // "Mr. John Smith"
console.log(age); // "30"

URLSearchParams对象

在HTML5中，引入了一个新的URL处理API – URLSearchParams对象。这个对象可用于处理URL中的查询参数，并提供了多个方法来处理这些参数。

下面是一个例子：

var urlSearchParams = new URLSearchParams("?name=Mr.%20John%20Smith&age=30");
console.log(urlSearchParams.get("name")); // "Mr. John Smith"
console.log(urlSearchParams.get("age")); // "30"

以上代码创建了一个URLSearchParams对象，并从其中获取了查询参数“name”和“age”的值。

除了基本的get方法，还有以下方法：

set(key, value) – 设置指定key的value值，如果存在，则覆盖原值。
append(key, value) – 在指定key的末尾追加一个value值。
delete(key) – 删除指定key的所有values。
getAll(key) – 返回一个指定key的所有values的数组。
has(key) – 如果存在指定key，则返回true，否则返回false。

下面是一个使用URLSearchParams对象的示例：

var urlSearchParams = new URLSearchParams("?category=shoes&size=xl&size=l&color=red");
urlSearchParams.set("size", "m");
console.log(urlSearchParams.toString()); // "category=shoes&size=m&color=red"
urlSearchParams.append("size", "s");
console.log(urlSearchParams.toString()); // "category=shoes&size=m&color=red&size=s"
urlSearchParams.delete("color");
console.log(urlSearchParams.toString()); // "category=shoes&size=m&size=s"
console.log(urlSearchParams.getAll("size")); // ["m", "s"]
console.log(urlSearchParams.has("category")); // true
console.log(urlSearchParams.has("color")); // false

结论

在HTML5中，URL作为互联网的重要部分，有着广泛的应用。了解URL的基本结构和编码原理，可以更好地理解URL的作用和使用方式。在JavaScript中，使用encodeURI()和decodeURI()可以对URL进行编解码操作，使用URLSearchParams对象可以方便地处理URL中的查询参数。