前言
URL在日常开发中使用最高频的api莫过于createObjectURL()，使用createObjectURL将一个File对象、Blob对象或MediaSource转换成blob协议的url地址。
关于url我们还有一些其他的需求：
- 给定一个url地址，我们需要匹配其中的协议头、host、端口号和基础路径信息
- 给定一个url地址以及一个相对路径推断出相对路径指向的url地址
- 给定一个url地址，我们需要从url地址中提取url携带的参数
在nodejs环境中有开箱即用的path包，它可以帮我们解决大部分关于url的需求。
也可以使用url-parse、query-string等npm包轻松完成我们的需求。
在浏览器环境中，一切可能都不是那么的美妙，我们不希望我们的程序臃肿，我们可能需要使用?去分离出search部分，然后使用&分割后再使用=分割来构造query（对于类似http://site.com/a?foo=1&foo=2&foo=3的url一个不小心就会发生值覆盖）
使用URL实现需求
上面的需求点可以完全由URL轻松实现，无需我们导入任何的额外包，全局可用的URL，浏览器环境和nodejs环境轻松兼容
需要我们提取url中的协议头、host、端口号等信息
// 实例化url轻松实现
const url = new URL('http://website.com/a?id=1&foo=1&foo=2');
需要我们推断相对路径指向的url地址
const relativePath = 'b.html', currentPath = 'http://website.com/a?id=1&foo=1&foo=2';
// console => href: "http://website.com/b.html"
const relativeUrlInfo = new URL(relativePath, currentPath);
需要我们读取url中携带的参数
const currentUrl = 'http://website.com/a?id=1&foo=1&foo=2';
const currentUrlInfo = new URL(currentUrl);
// console => 1
const id = currentUrlInfo.searchParams.get('id');
// console => [1, 2]
const foo = currentUrlInfo.searchParams.getAll('foo');
需要注意的是针对数组类型的参数我们可能见过类似
http://website.com/a?id=1&foo[]=1&foo[]=2的写法，URL依然可以正确提取searchParams.getAll('foo[]')
