在操作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)
传参有两种方式:
- 绝对路径
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
构造一个对象之后,可以看下原型链:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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
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
,解脱于正则和字符串操作的水深火热。