js一行代码解析 querystring

笔者最近遇到了一个题目 给你一个 url: https://a.b.com/c/d?foo=bar&alo=ha 要求按以下格式输出：

{
  "foo": "bar",
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/6/16950dd36d815c2b~tplv-t2oaga2asx-image.image)
  "alo": "ha"
}

聪明的小伙伴一定很快能想到使用 URL接口来处理，直接看代码：

let url = `https://a.b.com/c/d?foo=bar&alo=ha`;

function parse(url) {
  return [...new URL(url).searchParams].reduce(
    (cur, [key, value]) => ((cur[key] = value), cur),
    {}
  );
}

parse(url); // {foo: "bar", alo: "ha"}

讲解

URL 接口为我们提供了一个非常方便的解析 url 的方法 基本用法如下

let url = `https://a.b.com/c/d?foo=bar&alo=ha`;

let urlParsed = new URL(url);

解析出来的 urlParsed 格式如下：

可以看到 URL 接口已经很贴心地帮我们把需 要解析的大部分关键字都提取了出来，并且把 querystring 中的关键字都封装在了一个可迭代对象 searchParams 中。

常规操作让我们来看看这个小妖精究竟包含了啥：

简单格式化一下就是我们想要的东西了：