当前位置：首页 > JavaScript

js实现queryparams

2026-03-14 12:27:24JavaScript

获取 URL 查询参数（QueryParams）

在 JavaScript 中，可以通过 URLSearchParams API 或手动解析 window.location.search 来获取 URL 的查询参数。

使用 `URLSearchParams`

URLSearchParams 是一个现代 API，用于处理 URL 的查询字符串。

// 假设当前 URL 是 https://example.com?name=John&age=30
const params = new URLSearchParams(window.location.search);

// 获取单个参数
const name = params.get('name'); // 'John'
const age = params.get('age'); // '30'

// 检查参数是否存在
const hasName = params.has('name'); // true

// 获取所有参数的键值对
for (const [key, value] of params.entries()) {
  console.log(key, value); // 'name John', 'age 30'
}

手动解析 `window.location.search`

如果不需要支持复杂场景，可以通过字符串操作解析查询参数。

// 假设当前 URL 是 https://example.com?name=John&age=30
const search = window.location.search.substring(1); // 去掉开头的 '?'
const params = {};

search.split('&').forEach(pair => {
  const [key, value] = pair.split('=');
  params[key] = decodeURIComponent(value); // 解码 URL 编码的字符
});

console.log(params.name); // 'John'
console.log(params.age); // '30'

设置或修改查询参数

可以通过 URLSearchParams 修改查询参数，并更新 URL。

const params = new URLSearchParams(window.location.search);

// 设置参数
params.set('name', 'Jane');
params.set('city', 'New York');

// 删除参数
params.delete('age');

// 生成新的查询字符串
const newSearch = params.toString(); // 'name=Jane&city=New+York'

// 更新浏览器 URL（不刷新页面）
window.history.pushState({}, '', `?${newSearch}`);

构建带查询参数的 URL

如果需要动态生成带查询参数的 URL，可以使用 URL 对象或手动拼接字符串。

js实现queryparams

使用 `URL` 对象

const url = new URL('https://example.com');
url.searchParams.set('name', 'John');
url.searchParams.set('age', '30');

console.log(url.toString()); // 'https://example.com?name=John&age=30'

手动拼接字符串

const baseUrl = 'https://example.com';
const params = {
  name: 'John',
  age: 30
};

const queryString = Object.keys(params)
  .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
  .join('&');

const fullUrl = `${baseUrl}?${queryString}`;
console.log(fullUrl); // 'https://example.com?name=John&age=30'