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

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: Node【Global全局对象】之【URL】

🌟前言

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

解析后对象字段如下:

1685511765265.png


🌟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!


目录
相关文章
|
5月前
uView queryParams 对象转URL参数
uView queryParams 对象转URL参数
55 0
|
5月前
|
JavaScript 容器
Node.js 全局对象及其使用
Node.js 全局对象及其使用
79 4
|
5月前
|
前端开发 JavaScript
前端知识(十)———JavaScript 使用URL跳转传递数组对象数据类型的方法
前端知识(十)———JavaScript 使用URL跳转传递数组对象数据类型的方法
104 0
|
15天前
|
JSON 前端开发 中间件
React读取properties配置文件转化为json对象并使用在url地址中
本文介绍了如何在React项目中读取properties配置文件,将其内容转化为JSON对象,并在请求URL地址时使用这些配置。文章详细说明了异步读取文件、处理字符串转换为JSON对象的过程,并提供了一个封装函数,用于在发起请求前动态生成配置化的URL地址。
31 1
|
2月前
|
机器学习/深度学习 JavaScript
node.js实现遍历所有文件夹里面的js文件,提取所有的url
node.js实现遍历所有文件夹里面的js文件,提取所有的url
|
2月前
|
搜索推荐 Java API
Electron V8排查问题之分析 node-memwatch 提供的堆内存差异信息来定位内存泄漏对象如何解决
Electron V8排查问题之分析 node-memwatch 提供的堆内存差异信息来定位内存泄漏对象如何解决
55 0
|
4月前
Error: Cannot find module ‘node:url‘【已解决】
Error: Cannot find module ‘node:url‘【已解决】
141 3
|
4月前
|
JavaScript 前端开发 Unix
Node.js 全局对象
Node.js 全局对象
24 2
|
5月前
|
存储 JavaScript 前端开发
js原生方法,获取url上面所有参数,并返回一个对象
JavaScript函数`getUrlParameters`用于从URL中提取所有参数并返回一个键值对对象。它接收URL,分割查询字符串,解码参数对,并存储在对象中。重复参数键会被存储为数组。
|
5月前
|
Web App开发 监控 JavaScript
【Node系列】Node全局对象
global:全局对象,在所有模块中都可以访问
44 1