JavaScript 怎么使用 URLSearchParams 处理 GET 请求的查询参数-js教程-PHP中文网

urlsearchparams 是浏览器原生 api，用于安全解析、构造和操作 url 查询参数，自动处理编码解码，支持对象/formdata 初始化及增删改查等 map 风格方法。

javascript 怎么使用 urlsearchparams 处理 get 请求的查询参数

URLSearchParams 是浏览器原生提供的 API，专门用来解析、构造和操作 URL 中的查询参数（即 ? 后面的部分），处理 GET 请求参数非常直观、安全且无需手动拼接或转义。

创建和解析查询字符串

可以直接用查询字符串初始化 URLSearchParams 实例，它会自动解码并拆分键值对：

const params = new URLSearchParams('name=张三&city=%E4%B8%8A%E6%B5%B7&age=25');
console.log(params.get('name'));   // "张三"
console.log(params.get('city'));   // "上海"
console.log(params.get('age'));    // "25"

也支持传入对象或 FormData，但注意：对象需是普通键值对（不嵌套），且值会被自动转为字符串并编码：

new URLSearchParams({ name: '李四', city: '北京' }) → "name=%E6%9D%8E%E5%9B%9B&city=%E5%8C%97%E4%BA%AC"
new URLSearchParams(new FormData(formElement)) 可直接从表单获取参数

增删改查常用方法

URLSearchParams 提供了类似 Map 的接口，操作简单可靠：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

读取：get(key)（第一个值）、getAll(key)（所有同名值，如多选框）、has(key) 判断是否存在
设置：set(key, value) —— 覆盖已有值；append(key, value) —— 追加（允许重复 key）
删除：delete(key) 或 delete(key, value)（只删匹配值）
遍历：forEach((value, key) => {...}) 或 for (const [key, value] of params) {...}

拼接到 URL 发起 GET 请求

构造好参数后，用 toString() 得到标准编码后的查询字符串，再拼入 URL 即可：

const params = new URLSearchParams();
params.set('q', '前端开发');
params.append('sort', 'date');
params.append('sort', 'relevance');

const url = `/api/search?${params.toString()}`;
// → "/api/search?q=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91&sort=date&sort=relevance"

fetch(url)
  .then(res => res.json())
  .then(data => console.log(data));

也可直接作用于现有 URL 对象：