Node.js之url模块之 WHATWG 标准的新 API

在之前我们了解了url模块中传统的URL接口，那么本篇就去了解一下新的API接口。

URL 类

new URL(input[, base])

这个用于实例化 URL 对象，即将传入的 URL 字符串解析成 URL 对象。

1. input：表示要解析的绝对或相对的 URL。如果 input 是相对路径，则需要 base。 如果 input 是绝对路径，则忽略 base。
2. base：如果 input 不是绝对路径，则为要解析的基本 URL

const url = require('url');
const myURL = new URL('http://user:pass@host.com:8080/p/a/t/h?query=string#hash');
console.log(myURL);

解析成功之后返回的URL对象。这种方式获取的 URL 对象和传统方式获取的 URL 对象有些不同，大家可以自行对比。

URL类中的属性

1. hash属性：获取及设置 URL 的片段部分。即 # 符号之后的内容
2. host属性：获取及设置 URL 的主机部分。
3. hostname属性：获取及设置 URL 的主机名部分。 url.host 和 url.hostname 之间的区别是 url.hostname 不包含端口。
4. href属性：获取及设置序列化的 URL。即整个URL 字符串
5. origin属性：获取只读的序列化的 URL 的 origin。
6. username属性：获取及设置 URL 的用户名部分。
7. password属性：获取及设置 URL 的密码部分。
8. pathname属性：获取及设置 URL 的路径部分。
9. port属性：获取及设置 URL 的端口部分。
10. protocol属性：获取及设置 URL 的协议部分。
11. search属性：获取及设置 URL 的序列化查询部分
12. url.searchParams属性：获取表示 URL 查询参数的 URLSearchParams 对象。该属性属于只读属性，但是可以通过 search属性去修改

URL类中的方法

url.toString()

返回序列化的 URL，返回值与 url.href 和 url.toJSON() 的相同。

url.toJSON()

返回序列化的 URL。返回值与 url.href 和 url.toString() 的相同。使用JSON.stringify() 序列化时将自动调用该方法。

const myURL = new URL("http://user:pass@host.com:8080/p/a/t/h?query=string#hash");
console.log(myURL.toString());
console.log(JSON.stringify(myURL));

URLSearchParams类

URLSearchParams 类提供对 URL 查询部分的读写权限。这个类与 querystring 模块有相似的目的。这个类是专门为 URL 查询字符串而设计的。

构造函数

这个类有四个构造函数，用于不同的情况。

1. new URLSearchParams()：实例化一个新的空的 URLSearchParams 对象。
2. new URLSearchParams(string)：将 string 解析成一个查询字符串, 并且使用它来实例化一个新的 URLSearchParams 对象。 如果以 ‘?’ 开头，则忽略。
3. new URLSearchParams(obj)：通过使用查询哈希映射实例化一个新的 URLSearchParams 对象。 obj 的每一个属性的键和值都将被强制转换为字符串。
4. new URLSearchParams(iterable)：以一种类似于 Map 的构造函数的迭代映射方式实例化一个新的 URLSearchParams 对象。

可以直接通过 URL 类的searchParams属性实例化URLSearchParams 类

const myURL = new URL('https://example.org/?abc=123');
console.log(myURL.searchParams.get('abc'));
// 打印 123

可以直接通过 URLSearchParams 类的构造函数实例化

const myURL = new URL('https://example.org/?abc=123');
const newSearchParams = new URLSearchParams(myURL.searchParams);
// const newSearchParams = new URLSearchParams(myURL.search);

方法

1.urlSearchParams.append(name, value)：在查询字符串中附加一个新的键值对。

const myURL = new URL('https://example.org/?abc=123');
const newSearchParams = new URLSearchParams(myURL.searchParams);
newSearchParams.append("abc", "456");
newSearchParams.append("type", "string")
console.log(newSearchParams);
//打印：URLSearchParams { 'abc' => '123', 'abc' => '456', 'type' => 'string' }

在通过 append() 方法添加时，添加的键已经存在时，不会覆盖而是添加。

2.urlSearchParams.delete(name)：删除所有键为name的键值对。

const myURL = new URL('https://example.org/?abc=123');
const newSearchParams = new URLSearchParams(myURL.searchParams);
newSearchParams.append("abc", "456");
newSearchParams.append("type", "string")
newSearchParams.delete('abc')
console.log(newSearchParams);
//打印：URLSearchParams { 'type' => 'string' }

3.entries()：在查询中的每个键值对上返回一个迭代器

4.urlSearchParams.forEach(fn)：在查询字符串中迭代每个键值对，并调用给定的函数

const myURL = new URL('https://example.org/?abc=123');
const newSearchParams = new URLSearchParams(myURL.searchParams);
newSearchParams.forEach((value, name, searchParams) => {
    console.log(name, value, searchParams);
});
//打印：abc 123 URLSearchParams { 'abc' => '123' }

通过 forEach() 方法循环得到键值对时，fn方法会返回三个参数，分别是：键、值、所有的键值对。

5.get(name)：返回键是name的第一个键值对的值。如果没有对应的键值对，则返回null。

const myURL = new URL('https://example.org/?abc=123&abc=456');
const newSearchParams = new URLSearchParams(myURL.searchParams);
console.log(newSearchParams.get('abc'));
//打印：123  
console.log(newSearchParams.get('ab'));
//打印：null

6.getAll(name)：返回键是name的所有键值对的值，如果没有满足条件的键值对，则返回一个空的数组。

const myURL = new URL('https://example.org/?abc=123&abc=456');
const newSearchParams = new URLSearchParams(myURL.searchParams);
console.log(newSearchParams.getAll('abc'));
//打印：[ '123', '456' ] 
console.log(newSearchParams.getAll('ab'));
//打印：[]

7.has(name)：如果存在至少一对键是 name 的键值对则返回 true

const myURL = new URL('https://example.org/?abc=123&abc=456');
const newSearchParams = new URLSearchParams(myURL.searchParams);
console.log(newSearchParams.has('abc'));
//打印：true
console.log(newSearchParams.has('ab'));
//打印：false

8.keys()：返回每一个键值对上的键

const myURL = new URL('https://example.org/?abc=123&abc=456');
const newSearchParams = new URLSearchParams(myURL.searchParams);
console.log(newSearchParams.keys());
//打印：URLSearchParams Iterator { 'abc', 'abc' }

9.set(name, value)：与 name 相对应的值设置为 value。如果已经存在键为 name 的键值对，则将第一对的值设为 value 并且删除其他对。 如果不存在，则将此键值对附加在查询字符串后。

const myURL = new URL('https://example.org/?abc=123&abc=456');
const newSearchParams = new URLSearchParams(myURL.searchParams);
newSearchParams.set('abc', '456');
newSearchParams.set('ab', '456');
console.log(newSearchParams.toString());
//打印：abc=456&ab=456

10.sort()：按现有名称就地排列所有的名称-值对。

const myURL = new URL('https://example.org/?abc=123&abc=456');
const newSearchParams = new URLSearchParams(myURL.searchParams);
newSearchParams.set('abc', '456');
newSearchParams.set('ab', '456');
console.log(newSearchParams.toString());
//打印：abc=456&ab=456
newSearchParams.sort();
console.log(newSearchParams.toString());
//打印：ab=456&abc=456

11.toString()：返回查询参数序列化后的字符串

12.values()：返回每一个键值对上返回一个值

const myURL = new URL('https://example.org/?abc=123&abc=456');
const newSearchParams = new URLSearchParams(myURL.searchParams);
console.log(newSearchParams.values());
//打印：URLSearchParams Iterator { '123', '456' }

13.urlSearchParamsSymbol.iterator：返回一个键值对形式迭代器

const myURL = new URL('https://example.org/?abc=123&abc=456');
const newSearchParams = new URLSearchParams(myURL.searchParams);
for (let [key, value] of newSearchParams) {
    console.log(key + "： " + value);
}
//abc： 123
//abc： 456

url模块的两种使用API我们已经全部了解了一下，两种使用方法大同小异。但是WHATWG的API比传统的根据安全，所以我们推荐使用WHATWG的API