如何使用JS读取所有URL参数？未知参数时如何全部返回？

嘿，看来你想一次性获取URL里的所有参数对吧？完全没问题，我给你两种实用的方案，适配不同的场景：

方法一：用现代浏览器原生API（简洁首选） #

现在主流浏览器（Chrome、Firefox、Edge等）都支持URLSearchParams这个API，写法超简洁，还能轻松处理各种参数情况：

// 获取当前页面的URL查询参数
const urlParams = new URLSearchParams(window.location.search);
// 直接把参数转换成普通对象，方便你随时访问
const allParams = Object.fromEntries(urlParams.entries());

// 举个例子，如果你的URL是?name=Alice&age=25&hobby=reading，控制台会输出：
// {name: "Alice", age: "25", hobby: "reading"}
console.log(allParams);

如果是要解析某个特定的URL字符串（不是当前页面的），也很简单：

const targetUrl = 'https://example.com/post?id=123&tag=js&tag=frontend';
const params = new URLSearchParams(new URL(targetUrl).search);
const paramsObj = Object.fromEntries(params.entries());
console.log(paramsObj); // {id: "123", tag: "frontend"}
// 注：如果同一个参数有多个值，最后一个会覆盖前面的；如果想保留所有值，可以用params.getAll('tag')获取数组

方法二：兼容旧浏览器的自定义函数 #

如果你的项目需要兼容IE这类旧环境，那可以自己写一个解析函数，还能处理同一个参数多值的情况：

function getAllUrlParams() {
  // 提取URL里的查询字符串（去掉开头的?）
  const queryStr = window.location.search.slice(1);
  const params = {};

  // 如果没有参数，直接返回空对象
  if (!queryStr) return params;

  // 把字符串分割成键值对数组
  const paramPairs = queryStr.split('&');

  paramPairs.forEach(pair => {
    // 分割键和值，处理可能的空值
    const [key, value] = pair.split('=');
    // 解码URL编码的字符（比如空格、中文这类特殊字符）
    const decodedKey = decodeURIComponent(key);
    const decodedValue = decodeURIComponent(value || '');

    // 处理同一个参数多次出现的情况（比如?color=red&color=blue）
    if (params[decodedKey]) {
      // 如果已经存在这个键，转成数组存储多个值
      if (!Array.isArray(params[decodedKey])) {
        params[decodedKey] = [params[decodedKey]];
      }
      params[decodedKey].push(decodedValue);
    } else {
      params[decodedKey] = decodedValue;
    }
  });

  return params;
}

// 使用示例
const allParams = getAllUrlParams();
console.log(allParams);
// 比如URL是?color=red&color=blue&size=M，会输出：{color: ["red", "blue"], size: "M"}

这个函数不仅兼容旧环境，还贴心处理了重复参数和URL解码的问题，实用性拉满~

内容的提问来源于stack exchange，提问作者nope123