文章目录
前言
一个完整的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网址
举例如下：
const pathname = '/a/b/c';
const search = '?d=e';
const hash = '#fgh';
const myURL = new URL(`https://example.org${pathname}${search}${hash}`);
3、获取构造的网址字符串
使用href属性访问器
url.href
返回< string >
获取和设置序列化的网址。
获取 href 属性的值相当于调用 url.toString()。
将此属性的值设置为新值相当于使用 new URL(value) 创建新的 URL 对象。 URL 对象的每个属性都将被修改。
如果分配给 href 属性的值不是有效的网址，则将抛出 TypeError。
4、举例
const myURL = new URL('https://example.org');
myURL.pathname = '/a/b/c';
myURL.search = '?d=e';
myURL.hash = '#fgh';
console.log(myURL.href);
console.log(myURL.toString());
const pathname = '/a/b/c';
const search = '?d=e';
const hash = '#fgh';
const myURL = new URL(`https://example.org${pathname}${search}${hash}`);
console.log(myURL.href);
