如何在JavaScript和Node.js里解析URL及参数？

2022-01-20大约7分钟

在编程的时候，我们有时候需要拿到URL并解析里面的参数，这种情况下，需要有个简单的办法来解析URL。

在以往，我们可能习惯用第三方的库来做这件事情，比如jquery或者parse-url之类的库，好处是这类库大家都熟悉，很容易找到使用的文档，能够快速地解决问题。

不过随着大而全的库（如jquery, AngularJS）日趋弱势，像React、Vue等专注于解决某一方面问题的库日益更加流行，框架里面并不会自带URL解析之类的功能，如果再额外引入一个第三方的库来解析URL，反而变得有点笨重了。不过，习惯归习惯，实际上我们可以利用浏览器/Node.js原始的方法来解决这个问题，而不必依赖第三方的库。

解析URL

解析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，否则会抛Invalid URL的异常。

可以看到URL里完整的内容都已经被解析出来了。当然我们会更关注URL里search的部分，因为这个部分经常会带一些需要用到的参数。在url对象里，我们注意到有searchParams这样一个属性，类型是URLSearchParams。这个对象提供了对url里search部分参数的操作。

解析参数

URLSearchParams类可以用来解析URL里search部分的参数。可以从URL对象里取得这个对象url.searchParams，或者直接用URLSearchParams类来新创建一个对象。

const params = new URLSearchParams('?page=1&offset=10');
// 或者不用带?也行：new URLSearchParams('page=1&offset=10');
const page = params.get('page'); // 1
const offset = params.get('offset'); // 10
console.log(`page:${page}  offset:${offset}`);

这样，很容易就解析出了search部分的参数了。

URLSearchParams类强大的部分不仅仅是在解析参数上，还可以对参数进行增删查改、遍历等操作。

const params = new URLSearchParams('?page=1&offset=10');
// 增加参数
params.append('take', 20);
console.log(params.get('take')) // 输出20

// 删除参数
params.delete('take');
console.log(params.get('take')) // 输出null

// 查询是否存在参数
console.log(params.has('take')) // 输出false
console.log(params.has('page')) // 输出true

// 更新或添加参数
params.set('take', 30);
console.log(params.get('take')) // 输出30

//转成字符串
console.log(params.toString()) // page=1&offset=10&take=30

兼容性

URL和URLSearchParams类，在新的浏览器内核中都普遍实现了，所以除非要兼容老的IE浏览器，基本上都是可以放心用的。

JavaScript