JavaScript 浏览器对象怎么通过 URLSearchParams 处理参数-js教程-PHP中文网

urlsearchparams 是浏览器原生 api，用于可靠解析、构造和操作 url 查询字符串；支持 get/getall/has/for...of/set/append/delete 等方法，自动处理 uri 编解码，兼容现代浏览器（ie 不支持）。

javascript 浏览器对象怎么通过 urlsearchparams 处理参数

URLSearchParams 是浏览器原生提供的 API，专门用来解析、构造和操作 URL 查询字符串（即 ? 后面的部分），比手动 split 和正则更可靠、更易读。

从当前 URL 获取并读取参数

可以通过 window.location.search 获取当前地址栏中的查询字符串，再传给 URLSearchParams 构造函数：

const params = new URLSearchParams(window.location.search);
console.log(params.get('id'));      // 获取单个值，如 ?id=123 → '123'
console.log(params.getAll('tag'));  // 获取所有同名参数值，如 ?tag=a&tag=b → ['a', 'b']
console.log(params.has('page'));    // 判断是否存在某个键 → true / false

遍历和修改参数

URLSearchParams 支持 for...of 遍历，也提供 set、append、delete 等方法动态操作参数：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

const params = new URLSearchParams('a=1&b=2');

// 遍历所有键值对
for (const [key, value] of params) {
  console.log(`${key} = ${value}`);
}

// 修改或新增：set 会覆盖同名项，append 会追加
params.set('b', '99');   // b 变成 '99'
params.append('c', '3'); // 新增 c=3（支持重复键）

// 删除
params.delete('a');

console.log(params.toString()); // 'b=99&c=3'

构造新 URL 或更新地址栏

常用于跳转前拼接参数，或配合 History API 更新当前 URL 而不刷新页面：

// 方法一：拼接完整 URL
const baseUrl = '/search';
const params = new URLSearchParams({ q: 'js', page: 2 });
const url = `${baseUrl}?${params}`; // '/search?q=js&page=2'

// 方法二：用 history.replaceState 更新地址栏（不刷新）
params.set('sort', 'date');
history.replaceState(null, '', `?${params}`);

// 方法三：直接赋值给 location.search（会触发页面跳转）
location.search = params.toString(); // 等价于 location.href = location.origin + location.pathname + '?' + params

注意编码与兼容性

URLSearchParams 自动处理 URI 编码/解码，传入的键和值无需手动 encodeURI，它内部会调用 encodeURIComponent：

const params = new URLSearchParams();
params.set('q', 'hello world & 你好'); // ✅ 自动编码为 'hello%20world%20%26%20%E4%BD%A0%E5%A5%BD'
console.log(params.toString()); // 'q=hello%20world%20%26%20%E4%BD%A0%E5%A5%BD'

// 解析时也自动解码
const p = new URLSearchParams('name=%E4%BD%A0%E5%A5%BD');
console.log(p.get('name')); // '你好'

兼容性方面：Chrome 49+、Firefox 44+、Safari 10.1+、Edge 17+ 均支持；IE 不支持，需引入 polyfill（如 url-search-params-polyfill）。