文章目录

前言
一、什么是url模块
二、网址字符串与网址对象
- 1、使用url.parse()解析网址字符串
- 2、使用WHATWG API解析网址字符串
三、把对象格式化为URL（旧版方法）
四、从组成部分构造网址并获取构造的字符串
- 1、URL类的属性设置器及获取器
- - （1）url.hash
  - （2）url.host
  - （3）url.hostname
  - （4）url.origin
  - （5）url.password
  - （6）url.pathname
  - （7）url.port
  - （8）url.protocol
  - （9）url.search
  - （10）url.username
  - （11）url.toString()
  - （12）url.toJSON()
- 2、构造网址
- - （1）使用属性设置器从组件部分构建WHATWG网址
  - （2）使用模板字符串从组件部分构建WHATWG网址
- 3、获取构造的网址字符串
- 4、举例

前言

一个完整的url分几部分呢，如下面这个网址：
      http://www.tmooc.cn:80/detail.html?lid=5
      由遵循的协议+域名+端口号+所要请求的服务器上的哪个文件+传递给服务器的数据组成。
      下面我们就来具体学习一下关于url的知识。

一、什么是url模块

url 模块提供用于网址处理和解析的实用工具。可以使用两种以下方式访问它：

//第一种
import url from 'url';
//第二种
const url = require('url');

二、网址字符串与网址对象

网址字符串是包含多个有意义组件的结构化字符串。解析时，将返回包含每个组件的属性的网址对象。
      现在，url模块提供了两种API来处理网址，一种是旧版，由url.parse()返回的对象的属性，一种是新版，实现了与Web浏览器使用的相同的WHATWG网址标准。
      以网址’https://user:pass@sub.example.com:8080/p/a/t/h?query=string#hash’为例，我们在Node.js官网上可以找到新旧两版的区别。
      在网址 ‘https://user:pass@sub.example.com:8080/p/a/t/h?query=string#hash’ 上方显示的是由旧版 url.parse() 返回的对象的属性。下方则是 WHATWG URL 对象的属性。
      WHATWG 网址的 origin 属性包括 protocol 和 host，但不包括 username 或 password。

1、使用url.parse()解析网址字符串

//引入url模块
const url = require('url');
//处理和解析URL
var str = 'https://user:pass@sub.example.com:8080/p/a/t/h?query=string#hash'
//把URL解析为对象
var obj = url.parse(str);
console.log(obj)

2、使用WHATWG API解析网址字符串

new URL(input[, base]);

input < string > 要解析的绝对或相对的输入网址。如果 input 是相对的，则需要 base。如果 input 是绝对的，则忽略 base。
base < string > | < URL > 如果 input 不是绝对的，则为要解析的基本网址。
通过相对于 base 解析 input 来创建新的 URL 对象。如果 base 作为字符串传入，则其将被解析为等效于 new URL(base)。
base的用法举例如下：

const myURL = new URL('./foo','https://example.org/');
console.log(myURL.href)

//引入url模块
const url = require('url');
const myurl = new URL('https://user:pass@sub.example.com:8080/p/a/t/h?query=string#hash');
console.log(myurl);

其中：
protocol：协议
hosthome：主机名，域名（或者ip地址）
port：端口号
pathname：请求的文件路径名称
query：查询字符串

三、把对象格式化为URL（旧版方法）

url.format(URL[, options])

URL < URL > WHATWG 网址对象
options < Object >
返回 < string >
      返回 WHATWG 网址对象的网址 String 表示的可自定义的序列化。
      网址对象具有 toString() 方法和 href 属性，用于返回网址的字符串序列化。但是，这些都不能以任何方式自定义。
      url.format(URL[, options]) 方法允许对输出进行基本的自定义。
举例如下：

//引入url模块
const url = require('url');
var obj = {protocol:'https',hostname:'www.tmooc.cn',port:'8080',pathname:'detail.html',query:{lid:5,pname:'dell'}
}
//把对象格式化为URL
var str = url.format(obj);
console.log(str);

注意：query中对应的是对象。

四、从组成部分构造网址并获取构造的字符串

1、URL类的属性设置器及获取器

（1）url.hash

返回< string >
获取和设置网址的片段部分

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

const myURL = new URL('https://example.org/foo');
myURL.hash = 'baz';
console.log(`${myURL}${myURL.hash}`);

分配给 hash 属性的值中包含的无效的网址字符会进行百分比编码。选择要进行百分比编码的字符可能与 url.parse() 和 url.format() 方法产生的结果有所不同。

（2）url.host

返回< string >
获取和设置网址的主机部分。

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

分配给 host 属性的无效主机值将被忽略。

（3）url.hostname

返回< string >
获取和设置网址的主机名部分。url.host 和 url.hostname 之间的主要区别在于 url.hostname 不包括端口。
注意：设置主机名不会改变端口

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

（4）url.origin

返回< string >
获取网址的源的只读的序列化。

const myURL = new URL('https://example.org/foo/bar?baz');
console.log(myURL.origin);

（5）url.password

返回< string >
获取和设置网址的密码部分。

const myURL = new URL('https://abc:xyz@example.com');
console.log(myURL.password);

分配给 password 属性的值中包含的无效的网址字符会进行百分比编码。选择要进行百分比编码的字符可能与 url.parse() 和 url.format() 方法产生的结果有所不同。

（6）url.pathname

返回< string >
获取和设置网址的路径部分。

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

分配给 pathname 属性的值中包含的无效的网址字符会进行百分比编码。选择要进行百分比编码的字符可能与 url.parse() 和 url.format() 方法产生的结果有所不同。

（7）url.port

返回< string >
      获取和设置网址的端口部分。
      端口值可以是数字，也可以是包含 0 到 65535（含）范围内的数字的字符串。将值设置为给定 protocol 的 URL 对象的默认端口将导致 port 值成为空字符串 (’’)。
      端口值可以是空字符串，在这种情况下端口取决于协议/方案：

协议	端口
“ftp”	21
“file”
“http”	80
“https”	443
“ws”	80
“wss”	443

为端口分配值后，该值将首先使用 .toString() 转换为字符串。
如果该字符串无效但以数字开头，则将前导数字分配给 port。如果数字在上述范围之外，则将其忽略。

const myURL = new URL('https://example.org:8888');
console.log(myURL.port);
// 重新设置端口号
// 默认端口自动转换为空字符串（HTTPS 协议的默认端口是 443）
myURL.port = '443';
console.log('结果为：',myURL.port);
// 结果为空字符串
console.log(myURL.href);

（8）url.protocol

返回< string >
获取和设置网址的协议部分。

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

（9）url.search

返回< string >
获取和设置网址的序列化的查询部分。

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

出现在分配给 search 属性的值中的任何无效的网址字符都将进行百分比编码。选择要进行百分比编码的字符可能与 url.parse() 和 url.format() 方法产生的结果有所不同。

（10）url.username

返回< string >
获取和设置网址的用户名部分。

const myURL = new URL('https://abc:xyz@example.com');
console.log(myURL.username);
myURL.username = '123';
console.log(myURL.href);

（11）url.toString()

返回 < string >
URL 对象上的 toString() 方法返回序列化的网址。返回值等同于 url.href 和 url.toJSON() 的值。

（12）url.toJSON()

返回< string >
URL 对象上的 toJSON() 方法返回序列化的网址。返回值等同于 url.href 和 url.toString() 的值。

const myURL = new URL('https://abc:xyz@example.com');
console.log(myURL.toString());
console.log(myURL.toJSON());

2、构造网址

（1）使用属性设置器从组件部分构建WHATWG网址

举例如下：

const myURL = new URL('https://example.org');
myURL.pathname = '/a/b/c';
myURL.search = '?d=e';
myURL.hash = '#fgh';

（2）使用模板字符串从组件部分构建WHATWG网址