🌟前言
哈喽小伙伴们，新的专栏 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！
