你不用URL？

在操作Url地址的时候，你还在正则匹配 + 字符串操作的刀耕火种的时代吗，费时费力，还容易出错。这里介绍一种方式，让你轻松拿捏。

这种方式就是使用URL

1. 兼容性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EGjSgzbb-1661602661011)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fb39cf864fe4495c96ef55d7a2c2f826~tplv-k3u1fbpfcp-watermark.image?)]

从图中可以看出，大部分的主流浏览器都是兼容的。当然如果存在兼容性的问题，可以使corejs的polyfill: web.url.constructor

2. URL

URL是一个构造函数，接受两个参数

    // 签名
    new URL(url, base)
1
2

传参有两种方式：

• 绝对路径

const absUrl = new URL('https://juejin.cn/editor/drafts/7136116704933281799')

// absUrl实例有个toString方法，可以获取完整的location.href
absUrl.toString() // https://juejin.cn/editor/drafts/7136116704933281799
1
2
3
4

• 相对路径

const relUrl = new URL('../test-url', 'https://juejin.cn/editor/drafts/7136116704933281799')
absUrl.toString() // https://juejin.cn/editor/test-url
1
2

3. 实例属性

通过URL构造一个对象之后，可以看下原型链：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bM9C8gZN-1661602661012)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a8e6036031a74bd586f1a9ac6ac5130e~tplv-k3u1fbpfcp-watermark.image?)]

从图中可以看出，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
1
2
3
4
5
6
7
8
9
10

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 不存在

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

5.总结

通过构造函数URL和URLSearchParams以及实例方法可以方便可靠地操作url，解脱于正则和字符串操作的水深火热。