js一行代码解析 querystring

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

{
  "foo": "bar",
![](https://user-gold-cdn.xitu.io/2019/3/6/16950dd36d815c2b?w=957&h=282&f=png&s=52881)
  "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 中。

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

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

转载于:https://juejin.im/post/5c7f326751882546c846c3ed