⏹主要通过以下几个方法完成转换需求
new URL()
new URLSearchParams()
Object.fromEntries()
location.search
location.href
一. 封装前的测试准备
⏹ 假定存在如下包含参数的url
// 可以通过 location.search 来获取地址栏中的查询参数,可直接得到 ?name=jiafeitian&age=28
const urlStr = "https://api.github.com/users/fengyehong123?name=jiafeitian&age=28";
⏹通过JS原生的方法将查询参数转换为对象
const urlObj = new URL(urlStr /* location.href */);
// 直接得到相应的参数
console.log(urlObj.search); // ?name=jiafeitian&age=28
// new URL().searchParams 得到的是一个 URLSearchParams 对象
const urlSearchParams = urlObj.searchParams;
// 配合 Object.fromEntries 将查询参数转换为对象
const paramObj = Object.fromEntries(urlSearchParams);
console.log(paramObj);
/*
{
"name": "jiafeitian",
"age": "28"
}
*/
二. 转换方式1
- 将url中的查询参数转换为对象的方式封装为方法
const searchParamToObj = (url = location.href) => Object.fromEntries(new URL(url).searchParams);
console.log(searchParamToObj(urlStr));
/*
{
"name": "jiafeitian",
"age": "28"
}
*/
二. 转换方式2
- 转换查询参数为对象
const urlParamsToObject = (query) => Array.from(new URLSearchParams(query))
.reduce((p, [k, v]) => Object.assign({}, p, { [k]: p[k] ? (Array.isArray(p[k]) ? p[k] : [p[k]]).concat(v) : v}), {});
// 获取url中的查询参数 项目中可以使用 location.search 来代替
const searchParamStr = new URL(urlStr).search;
console.log(searchParamStr); // ?name=jiafeitian&age=28
console.log(urlParamsToObject(searchParamStr));
/*
{
"name": "jiafeitian",
"age": "28"
}
*/