js实现queryparams

获取 URL 的查询参数

在 JavaScript 中，可以通过 URLSearchParams API 解析当前 URL 的查询参数。以下是一个简单的实现方式：

const params = new URLSearchParams(window.location.search);
const value = params.get('key');

URLSearchParams 提供了一系列方法来操作查询参数，例如 get()、has()、getAll() 等。

解析查询字符串为对象

如果需要将查询参数转换为对象形式，可以使用以下代码：

function parseQueryParams() {
  const params = new URLSearchParams(window.location.search);
  const result = {};
  for (const [key, value] of params.entries()) {
    result[key] = value;
  }
  return result;
}

构建查询字符串

当需要构建查询字符串时，可以使用 URLSearchParams 的 append() 方法：

const params = new URLSearchParams();
params.append('key1', 'value1');
params.append('key2', 'value2');
const queryString = params.toString();

更新 URL 的查询参数

如果需要更新当前 URL 的查询参数而不刷新页面，可以使用 History API：

const params = new URLSearchParams(window.location.search);
params.set('key', 'newValue');
window.history.replaceState(null, '', `${window.location.pathname}?${params}`);

兼容性处理

对于需要支持旧浏览器的场景，可以手动解析查询字符串：

function getQueryParams() {
  const query = window.location.search.substring(1);
  const pairs = query.split('&');
  const params = {};
  pairs.forEach(pair => {
    const [key, value] = pair.split('=');
    params[decodeURIComponent(key)] = decodeURIComponent(value || '');
  });
  return params;
}

注意事项

处理查询参数时需要注意 URL 编码问题。URLSearchParams 会自动处理编码，但手动实现时需要调用 decodeURIComponent() 和 encodeURIComponent()。

对于数组参数的处理，URLSearchParams 会保留重复的键值，而手动实现可能需要特殊处理数组形式。