在了解这个api之前，我们对浏览器url的处理有哪些方法呢？可能最常用的有两种：
1. 正则匹配
2. 字符串API，根据下标截取
其实不然，现在的浏览器已经提供了更简便的方法，来帮助我们处理url。
一 . URL
简单的说， 就是操作URL的API， 用来给指定的URL创建一个 URL 对象，调用这个对象的实例访问其属性及方法。
举个例子。假如有这样的url：
https://juejin.cn/search?query=react
需要获取query的值，可以这样写：
new URL('https://juejin.cn/search?query=react').searchParams.get('query');
也可以这样写：
new URLSearchParams('?query=react').get('query');
先来了解一下URL的语法：
let urlObj = new URL(url, [base])
`
url是一个表示绝对或相对 URL 路径。如果url是相对 URL，则会将则会将base用作基准 URL。如果url是绝对URL，则无论参数base是否存在，都将被忽略。
`
基本用法：
var base = 'https://juejin.cn';
console.log(new URL('study', base).href);
// 输出: https://juejin.cn/study
可以直接使用URL对象作为参数：
var base = 'https://juejin.cn';var urlBase = new URL('study', base);
console.log(new URL(urlBase).href);
// 输出：https://juejin.cn/study
如果url中带有比较深层次的路径，可能又不一样。
var base = 'https://www.baidu.com/study/a/b/c';
console.log(new URL('sp/icon', base).href);
// 输出：https://www.baidu.com/study/a/b/sp/icon
console.log(new URL('./sp/icon', base).href);
// 输出：https://www.baidu.com/study/a/b/sp/icon
由此可见，相对路径 "./" 和 不带 "./" 结果是一样的
URL实例对象的属性和方法
new URL()返回值就是一个实例对象，包括以下属性和方法：
var url = new URL('https://www.baidu.com:80/wordpress/?s=url#comments');
var ftp = new URL('ftp://username:password@192.168.1.1/path/file');
**属性**
**hash** 属性返回一个带#的字符串， 这里url.hash的返回值是'#comments'。
**host** URL地址中host主机地址，包括协议端口号，这里url.host的返回值是'www.baidu.com:80'。
hostname URL地址中主机名称，不包括端口号，这里url.hostname的返回值是'www.baidu.com'。
href 完成的URL地址。
origin [只读]返回URL地址的来源，会包含URL协议，域名和端口。这里url.origin的返回值是'https://www.baidu.com:80'。
password 返回URL地址域名前的密码。ftp协议中比较常见。这里ftp.password的返回值是'password'。
username 返回URL地址域名前的用户名。ftp协议中比较常见。这里ftp.username的返回值是'username'。
pathname 返回URL中的目录+文件名。例如这里ftp.pathname的返回值是'/path/file'。
port 返回URL地址中的端口号。例如这里url.port的返回值是'80'，ftp.port的返回值是''。
protocol 返回URL地址的协议，包括后面的冒号':'。例如这里url.protocol的返回值是'https:'，ftp.protocol的返回值是'ftp:'。
search 返回URL地址的查询字符串，如果有参数，则返回值以问号'?'开头。例如这里url.search的返回值是'?s=url'。
searchParams 返回一个URLSearchParams对象，可以调用URLSearchParams对象各种方法，对查询字符串进行非常方便的处理。例如我们想要知道查询关键字s对应的值，可以：
url.searchParams.get('s');
方法
toString() 返回的完整的URL地址，你可以理解为URL.href的另外一种形式，不过这个只能输出，不能修改值。
toJSON() 同样返回完整的URL地址，返回的字符串和href属性一样。
静态方法
URL.createObjectURL(object) 可以把File，Blob或者MediaSource对象变成一个一个唯一的blob URL。其中参数object可以是File，Blob或者MediaSource对象。
URL.revokeObjectURL(objectURL) 撤消之前使用URL.createObjectURL()创建的URL对象。其中参数objectURL表示之前使用URL.createObjectURL()创建的URL返回值。
二 . URLSearchParams
URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。
用法
let myUrlsearch = URLSearchParams(url)
URLSearchParams()方法返回一个 myUrlsearch 实例对象。
URL查询字符串。使用如下：
var params1 = new URLSearchParams('?s=url');
或者对当前地址栏地址的查询字符串进行实例化：
var params2 = new URLSearchParams(location.search);
方法
插入一个指定的键/值对作为新的搜索参数。
var params = new URLSearchParams('?s=url'); // 也可以没有问号直接's=url'
params.append('from', 'zxx');
// 此时的查询字符串是：'s=url&from=zxx'
从搜索参数列表里删除指定的搜索参数及其对应的值。
var params = new URLSearchParams('?s=url');
params.delete('s');
// 此时的查询字符串是：''
返回一个iterator可以遍历所有键/值对的对象。
var searchParams = new URLSearchParams("s=url&from=zxx");
// 显示所有的键值对
for (var pair of searchParams.entries()) {
console.log(pair[0]+ ', '+ pair[1]);
}
获取指定搜索参数的第一个值。
var params = new URLSearchParams('s=url&from=zxx');
params.get('s');
// 返回值是：'url'
获取指定搜索参数的所有值，返回是一个数组。
var params = new URLSearchParams('s=url&s=urlsearchparams&from=zxx');
params.getAll('s');
// 返回值是：['url', 'urlsearchparams']
返回 Boolean 判断是否存在此搜索参数。
var params = new URLSearchParams('?s=url');
params.has('s') == true; // true
返回iterator 此对象包含了键/值对的所有键名。
var searchParams = new URLSearchParams("s=url&from=zxx");
// 显示所有的键
for (var key of searchParams.keys()) {
console.log(key);
}
设置一个搜索参数的新值，假如原来有多个值将删除其他所有的值。
var params = new URLSearchParams('s=url&s=urlsearchparams&from=zxx');
params.set('s', 'hello world');params.getAll('s'); // 返回值是：['hello world']
按键名排序。
var searchParams = new URLSearchParams('c=4&a=2&b=3&a=1');
// 键值对排序
searchParams.sort();
// 显示排序后的查询字符串
console.log(searchParams.toString()); // 结果是：a=2&a=1&b=3&c=4
返回搜索参数组成的字符串，可直接使用在URL上。
var searchParams = new URLSearchParams('https://juejin.cn/editor/drafts');
searchParams.toString()// 输出字符串 https://juejin.cn/editor/drafts
返回iterator 此对象包含了键/值对的所有值。
var searchParams = new URLSearchParams("s=url&from=zxx");
// 显示所有的值
for (var value of searchParams.values()) {
console.log(value);
}
兼容性如下图：
注意： 不支持IE，兼容性并不怎么友好，如果需要支持，可以使用polyfill， 这里有一个一直支持到ES7最新规范的URL和URLSearchParams polyfill项目：github.com/lifaon74/ur…。
