一个JavaScript函数把URL参数解析成Json对象

要把URL参数解析成Json对象，可以使用JavaScript的内置方法URLSearchParams，该方法可用于解析URL查询字符串中的参数。具体步骤如下。

步骤一：获取URL参数字符串

使用window.location.search获取URL的查询字符串，然后去除开头的问号“?”，得到纯参数字符串。

const searchParams = window.location.search.slice(1); // 去除开头的问号“?”

步骤二：将参数字符串转成URLSearchParams对象

使用URLSearchParams构造函数将参数字符串转为一个URLSearchParams对象，便于后续解析。

const params = new URLSearchParams(searchParams);

步骤三：遍历URLSearchParams对象，将参数转成Json对象

使用URLSearchParams.entries()方法遍历params对象的所有参数，再将每个参数转成一个键值对，最终将所有键值对存储到一个Json对象中。

const json = {};
for(const [key, value] of params.entries()) {
  json[key] = value;
}

完整代码

将以上三个步骤合成一个函数parseParamsToJSON()，可以得到如下实现。

function parseParamsToJSON() {
  const searchParams = window.location.search.slice(1);
  const params = new URLSearchParams(searchParams);
  const json = {};
  for (const [key, value] of params.entries()) {
    json[key] = value;
  }
  return json;
}

示例说明

例如，我们有以下一个URL：

http://example.com/?name=john&age=21&gender=male

使用以上代码调用parseParamsToJSON()函数，可以得到如下结果：

{
  name: "john",
  age: "21",
  gender: "male"
}

如果有多个同名参数，例如以下URL：

http://example.com/?name=john&age=21&name=emily

使用以上代码调用parseParamsToJSON()函数，可以得到如下结果：

{
  name: ["john", "emily"],
  age: "21"
}