笔者最近遇到了一个题目 给你一个 url: https://a.b.com/c/d?foo=bar&alo=ha
要求按以下格式输出:
{
"foo": "bar",
"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 格式如下:
![af3377d4b6a156647accc855cbdc04ed.png](https://i-blog.csdnimg.cn/blog_migrate/85b9556f5810eb8f1d849c45a7d2564c.jpeg)
可以看到 URL 接口已经很贴心地帮我们把需要解析的大部分关键字都提取了出来,并且把 querystring 中的关键字都封装在了一个可迭代对象 searchParams
中。
常规操作让我们来看看这个小妖精究竟包含了啥:
![a5f5ec37f9638850a37fca1e9861df42.png](https://i-blog.csdnimg.cn/blog_migrate/280de1293f638d590c567f3a5c4e71a2.jpeg)
简单格式化一下就是我们想要的东西了:
![15a0f603a79dd38aae6144517231bc9a.png](https://i-blog.csdnimg.cn/blog_migrate/6480878e04d6355b1cdd8c32d1d614e8.png)