文章目录

  • 🌟前言
  • 🌟URL
  • 🌟URL组成部分
  • 🌟URL 类
  • 🌟url.href
  • 🌟url.pathname
  • 🌟url.port
  • 🌟url.protocol
  • 🌟url.search
  • 🌟url.searchParams
  • 🌟url.hash
  • 🌟url.host
  • 🌟url.hostname
  • 🌟参考
  • 🌟写在最后



🌟前言

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

解析后对象字段如下：

参数

描述

示例

href

解析前的完整原始 URL，协议名和主机名已转为小写

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

protocol

请求协议，小写

http:

slashes

协议的"：“号后是否有”/"

true or false

host

URL主机名，包括端口信息，小写

‘host.com:8080’

auth

URL中的认证信息

‘user:pass’

hostname

主机名，小写

‘host.com’

port

主机的端口号

‘8080’

pathname

URL中路径

‘/p/a/t/h’

search

查询对象，即：queryString，包括之前的问号“?”

‘?query=string’

path

pathname 和 search的合集

‘/p/a/t/h?query=string’

query

查询字符串中的参数部分（问号后面部分字符串）

‘query=string’ or {‘query’:‘string’}

hash

锚点部分（即：“#”及其后的部分）

‘#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

🌟参考

【参考】Nodejs官方文档 url网址

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

🌟写在最后

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