在操作Url地址的时候，你还在正则匹配 + 字符串操作的刀耕火种的时代吗，费时费力，还容易出错。这里介绍一种方式，让你轻松拿捏。
这种方式就是使用URL
1. 兼容性
从图中可以看出，大部分的主流浏览器都是兼容的。当然如果存在兼容性的问题，可以使corejs的polyfill: web.url.constructor
2. URL
URL是一个构造函数，接受两个参数
// 签名
new URL(url, base)
传参有两种方式：
- 绝对路径
const absUrl = new URL('https://juejin.cn/editor/drafts/7136116704933281799')
// absUrl实例有个toString方法，可以获取完整的location.href
absUrl.toString() // https://juejin.cn/editor/drafts/7136116704933281799
- 相对路径
const relUrl = new URL('../test-url', 'https://juejin.cn/editor/drafts/7136116704933281799')
absUrl.toString() // https://juejin.cn/editor/test-url
3. 实例属性
通过URL构造一个对象之后，可以看下原型链：
从图中可以看出，location中的属性href,hostname,pathname,hash。。。甚至protocol都设置了setting和getter。但是， origin是没有setter的，因为origin是由其他属性 protocal + hostname + port拼接的。(的有了getter可以轻松从对象中获取这些属性值，而重要的是有setter，可以轻松修改这些值。
const juejin = new URL('https://juejin.cn/editor/drafts/7136116704933281799')
juejin.protocol = 'http:' // 修改协议
juejin.pathname = '/frontend' // 修改路径
juejin.port = '9999'
juejin.hostname = 'juejin' // 路径
juejin.search = 'drafts=7136116704933281799'
juejin.hash = 'tny'
juejin.toString() // http://juejin:9999/frontend?drafts=7136116704933281799#tny
4. URLSearchParams
针对 search，还有一个方法，URLSearchParams，他可以更细粒度的操作search。
const t = new URLSearchParams('a=b&c=d')
t.toString() // a=b&c=d
// 添加新的key=value键值对
t.append('e', 'f') // a=b&c=d&e=f
// 修改
t.set('a', 'b1') // a=b1&c=d&e=f
// 如果不存在就添加
t.set('a1', 'b1a1') // a=b1&c=d&e=f&a1=b1a1
// 排序
t.sort() // a=b1&a1=b1a1&c=d&e=f
// 实例是可迭代的
// 所有支持for...of...
for(let k of t) {
console.log(k) // ['a', 'b1'] ['a1', 'b1a1'] ['c', 'd'] ['e', 'f']
}
// 同样的 entries() 和 keys() 和 values() 的值都是 迭代器 所以都可以被迭代取值
[...t.entries()] // [['a', 'b1'], ['a1', 'b1a1'], ['c', 'd'], ['e', 'f']]
[...t.keys()] // ['a', 'a1', 'c', 'e']
[...t.values()] // ['b1', 'b1a1', 'd', 'f']
// 可以通过has判断是否存在key
t.has('a1') // true
t.has('g') // false
// 通过get获取值
t.get('a1') // b1a1
t.get('g') // null 不存在
5.总结
通过构造函数URL和URLSearchParams以及实例方法可以方便可靠地操作url，解脱于正则和字符串操作的水深火热。
