将 URL 参数转换为 JavaScript 对象

在 Web 开发中，经常会遇到需要将 URL 参数转换为 JavaScript 对象的场景。这通常会涉及到 URL 的解析和参数的拆分，但是使用 JavaScript 则可以轻松地实现这一过程。以下是如何将 URL 参数转换为 JavaScript 对象的方法。

URLSearchParams

最近 JavaScript 增加了一个新对象 URLSearchParams，用于解析和操作 URL 的 query 参数部分。以下是如何使用 URLSearchParams 将 URL 参数转换为 JavaScript 对象的代码片段。

const urlParams = new URLSearchParams(window.location.search); // 获取 URL 参数
const paramsObj = {}; // 定义一个空对象
for (const [key, value] of urlParams.entries()) {
  paramsObj[key] = value; // 将参数转换为对象属性和值
}
console.log(paramsObj); // 输出 JavaScript 对象

在此示例中，我们首先使用 URLSearchParams 获取 URL 参数并创建一个空对象。然后，我们使用 for...of 循环迭代 URL 参数并将其添加到 JavaScript 对象中。最后，我们将新对象从控制台输出。这之后我们就可以像使用其他 JavaScript 对象一样操作这个对象了。

当然 'URLSearchParams'并不是所有浏览器都支持，如果你需要支持一些不支持的浏览器， 也可以使用以下正则表达式来处理URL参数：

function paramsToObj(paramsStr) {
  const paramsArr = paramsStr.split('&');
  const paramsObj = {};
  paramsArr.forEach(param => {
    const [key, value] = param.split('=');
    paramsObj[key] = decodeURIComponent(value || '');
  });
  return paramsObj;
}

const url = new URL(window.location.href);
const paramsStr = url.search.substr(1); // 去掉 '?' 
const paramsObj = paramsToObj(paramsStr);
console.log(paramsObj);

上面的代码将对 URL 中的参数字符串进行拆分并使用正则表达式将其转换为 JavaScript 对象。该方法逐个拆分每个参数，并将其添加到新对象中。

总结一下，通过这两种方法，您可以轻松地将 URL 中的参数转换为 JavaScript 对象。无论您选择哪种方法，都可以使用新的对象属性和值在您的应用程序中而不需要处理字符串。