在编程的时候,我们有时候需要拿到URL并解析里面的参数,这种情况下,需要有个简单的办法来解析URL。
在以往,我们可能习惯用第三方的库来做这件事情,比如jquery或者parse-url之类的库,好处是这类库大家都熟悉,很容易找到使用的文档,能够快速地解决问题。
不过随着大而全的库(如jquery, AngularJS)日趋弱势,像React、Vue等专注于解决某一方面问题的库日益更加流行,框架里面并不会自带URL解析之类的功能,如果再额外引入一个第三方的库来解析URL,反而变得有点笨重了。不过,习惯归习惯,实际上我们可以利用浏览器/Node.js原始的方法来解决这个问题,而不必依赖第三方的库。
解析URL的话,可以使用URL类:
const url = new URL('https://www.lema.fun/post?page=1#abc'); // 或者采用这个形式 // url = new URL('/post?page=1#abc', 'https://www.lema.fun'); /* url对象的属性是 { hash: "#abc", host: "www.lema.fun", hostname: "www.lema.fun", href: "https://www.lema.fun/post?page=1#abc", origin: "https://www.lema.fun", password: "", pathname: "/post", port: "", protocol: "https:", search: "?page=1", username: "", searchParams: URLSearchParams } */
这样,只要一行代码就可以拿到解析后的url
对象了。
可以看到URL里完整的内容都已经被解析出来了。当然我们会更关注URL里search的部分,因为这个部分经常会带一些需要用到的参数。在url
对象里,我们注意到有searchParams
这样一个属性,类型是URLSearchParams
。这个对象提供了对url
里search
部分参数的操作。
URLSearchParams
类可以用来解析URL里search
部分的参数。可以从URL对象里取得这个对象url.searchParams
,或者直接用URLSearchParams
类来新创建一个对象。
这样,很容易就解析出了search部分的参数了。
URLSearchParams
类强大的部分不仅仅是在解析参数上,还可以对参数进行增删查改、遍历等操作。
URL和URLSearchParams类, 在新的浏览器内核中都普遍实现了,所以除非要兼容老的IE浏览器,基本上都是可以放心用的。