🌟前言

哈喽小伙伴们，新的专栏 Node 已开启；这个专栏里边会收录一些Node的基础知识和项目实战，今天带领大家初识一下 Node.js中的Global全局对象之 URL让我们一起来看看吧🤘

🌟URL

在我们开发Web应用时，经常需要处理URL，Nodejs给我们提供了URL类来处理URL。

注意：因为node.js的url.parse方法采用的传统的urlObject,不符合URL现存标准-WHATWG URL API,因此弃用了。同时url.format(), url.resolve()也弃用了。官方推荐使用URL类。

🌟URL组成部分

WHATWG 网址的 origin 属性包括 protocol 和 host，但不包括 username 或 password。

┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│                                              href                                              │
├──────────┬──┬─────────────────────┬────────────────────────┬───────────────────────────┬───────┤
│ protocol │  │        auth         │          host          │           path            │ hash  │
│          │  │                     ├─────────────────┬──────┼──────────┬────────────────┤       │
│          │  │                     │    hostname     │ port │ pathname │     search     │       │
│          │  │                     │                 │      │          ├─┬──────────────┤       │
│          │  │                     │                 │      │          │ │    query     │       │
"  https:   //    user   :   pass   @ sub.example.com : 8080   /p/a/t/h  ?  query=string   #hash "
│          │  │          │          │    hostname     │ port │          │                │       │
│          │  │          │          ├─────────────────┴──────┤          │                │       │
│ protocol │  │ username │ password │          host          │          │                │       │
├──────────┴──┼──────────┴──────────┼────────────────────────┤          │                │       │
│   origin    │                     │         origin         │ pathname │     search     │ hash  │
├─────────────┴─────────────────────┴────────────────────────┴──────────┴────────────────┴───────┤
│                                              href                                              │
└────────────────────────────────────────────────────────────────────────────────────────────────┘

对于一个 URL 字符串，其组成部分会有所有不同，其中有些部分只有在URL字符串中存在时，对应字段才会出现在解析后对象中。以下是一个 URL 例子：

http://user:pass@host.com:8080/p/a/t/h?query=string#hash

解析后对象字段如下：

🌟URL 类

new URL(input[, base])

参数	类型	描述
input	`<string>`	要解析的绝对或相对的输入网址。如果 input 是相对的，则需要 base。如果 input 是绝对的，则忽略 base。
base	`<string> /<URL>`	如果 input 不是绝对的，则为要解析的基本网址。

网址构造函数可作为全局对象的属性访问。也可以从内置的 url 模块中导入：

import { URL } from 'url';
console.log(URL === globalThis.URL); // 打印 'true'.

🌟url.href

获取和设置序列化的网址。

const myURL = new URL('https://example.org/foo');
console.log(myURL.href);
// 打印 https://example.org/foo
myURL.href = 'https://example.com/bar';
console.log(myURL.href);
// 打印 https://example.com/bar

🌟url.pathname

获取和设置网址的路径部分。

const myURL = new URL('https://example.org/abc/xyz?123');
console.log(myURL.pathname);
// 打印 /abc/xyz
myURL.pathname = '/abcdef';
console.log(myURL.href);
// 打印 https://example.org/abcdef?123

🌟url.port

获取和设置网址的端口部分。

端口值可以是数字，也可以是包含 0 到 65535（含）范围内的数字的字符串。将值设置为给定 protocol 的 URL 对象的默认端口将导致 port 值成为空字符串 ('')。

const myURL = new URL('https://example.org:8888');
console.log(myURL.port);
// 打印 8888
// 默认端口自动转换为空字符串
//（HTTPS 协议的默认端口是 443）
myURL.port = '443';
console.log(myURL.port);
// 打印空字符串
console.log(myURL.href);
// 打印 https://example.org/
myURL.port = 1234;
console.log(myURL.port);
// 打印 1234
console.log(myURL.href);
// 打印 https://example.org:1234/
// 完全无效的端口字符串被忽略
myURL.port = 'abcd';
console.log(myURL.port);
// 打印 1234
// 前导数字被视为端口号
myURL.port = '5678abcd';
console.log(myURL.port);
// 打印 5678
// 非整数被截断
myURL.port = 1234.5678;
console.log(myURL.port);
// 打印 1234
// 未用科学计数法表示的超出范围的数字将被忽略。
myURL.port = 1e10; // 10000000000，将按如下所述进行范围检查
console.log(myURL.port);
// 打印 1234

🌟url.protocol

获取和设置网址的协议部分。

const myURL = new URL('https://example.org');
console.log(myURL.protocol);
// 打印 https:
myURL.protocol = 'ftp';
console.log(myURL.href);
// 打印 ftp://example.org/

🌟url.search

获取和设置网址的序列化的查询部分。

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

🌟url.searchParams

获取表示网址查询参数的 URLSearchParams 对象。

const myURL = new URL('https://example.org/?abc=123');
// 获取查询字符串abc
console.log(myURL.searchParams.get('abc'));
// 打印 123
// 添加查询参数 abc 值为 xyz
myURL.searchParams.append('abc', 'xyz');
console.log(myURL.href);
// 打印 https://example.org/?abc=123&abc=xyz
// 删除查询参数 abc
myURL.searchParams.delete('abc');
// 修改查询参数 a 值为b
myURL.searchParams.set('a', 'b');
console.log(myURL.href);
// 打印 https://example.org/?a=b

URLSearchParams API 提供对 URL 查询的读写访问。 URLSearchParams 类也可以与以下四个构造函数之一单独使用。 URLSearchParams 类也在全局对象上可用。

WHATWG URLSearchParams 接口和 querystring 模块具有相似的用途，但 querystring 模块的用途更通用，因为它允许自定义的分隔符（& 和 =）。换句话说，此 API 纯粹是为网址查询字符串而设计。

const newSearchParams = new URLSearchParams(myURL.searchParams);
// 以上相当于
// const newSearchParams = new URLSearchParams(myURL.search);
newSearchParams.append('a', 'c');
console.log(myURL.href);
// 打印 https://example.org/?a=b
console.log(newSearchParams.toString());
// 打印 a=b&a=c
// newSearchParams.toString() 是隐式调用的
myURL.search = newSearchParams;
console.log(myURL.href);
// 打印 https://example.org/?a=b&a=c
newSearchParams.delete('a');
console.log(myURL.href);
// 打印 https://example.org/?a=b&a=c

🌟url.hash

获取和设置网址的片段部分。

const myURL = new URL('https://example.org/foo#bar');
console.log(myURL.hash);
// 打印 #bar
myURL.hash = 'baz';
console.log(myURL.href);
// 打印 https://example.org/foo#baz

🌟url.host

获取和设置网址的主机部分。

const myURL = new URL('https://example.org:81/foo');
console.log(myURL.host);
// 打印 example.org:81
myURL.host = 'example.com:82';
console.log(myURL.href);
// 打印 https://example.com:82/foo

🌟url.hostname

获取和设置网址的主机名部分。 url.host 和 url.hostname 之间的主要区别在于 url.hostname 不包括端口。

const myURL = new URL('https://example.org:81/foo');
console.log(myURL.hostname);
// 打印 example.org
// 设置主机名不会改变端口
myURL.hostname = 'example.com:82';
console.log(myURL.href);
// 打印 https://example.com:81/foo
// 使用 myURL.host 更改主机名和端口
myURL.host = 'example.org:82';
console.log(myURL.href);
// 打印 https://example.org:82/foo

WHATWG：网页超文本应用技术工作小组是一个以推动网络HTML 5 标准为目的而成立的组织。在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。

🌟写在最后

更多Node知识以及API请大家持续关注，尽请期待。各位小伙伴让我们 let’s be prepared at all times！

Node【Global全局对象】之【URL】

🌟前言