JavaScript 中 BOM 怎么使用 URLSearchParams 解析和构建 URL 查询参数-js教程-PHP中文网

urlsearchparams 是 bom 提供的原生接口，用于安全解析、构建和操作 url 查询字符串；支持从 location.search 初始化、set/append/delete 方法修改参数、tostring() 生成编码字符串，并可与 url 对象配合实现完整 url 操作。

javascript 中 bom 怎么使用 urlsearchparams 解析和构建 url 查询参数

在 JavaScript 中，URLSearchParams 是 BOM（Browser Object Model）提供的原生接口，专门用于解析、构建和操作 URL 查询字符串（即 ?key=value&foo=bar 部分），无需手动拆分或拼接字符串，安全且兼容性好（Chrome 49+、Firefox 44+、Safari 10.1+、Edge 17+）。

从当前 URL 解析查询参数

直接读取浏览器地址栏的查询部分，推荐用 location.search 初始化：

location.search 返回带问号的字符串（如 "?name=Tom&age=25"），需去掉开头的 ? 才能正确解析
可直接传入完整 location.href，URLSearchParams 会自动提取并忽略路径、哈希等其他部分

示例：

const params = new URLSearchParams(location.search);
// 或更稳妥地：new URLSearchParams(location.search.slice(1))

console.log(params.get('name')); // 'Tom'
console.log(params.getAll('tag')); // 支持重复键，如 ?tag=a&tag=b → ['a', 'b']
console.log(params.has('age')); // true

构建或修改查询参数并更新 URL

创建空实例后，用 set()、append()、delete() 等方法操作，再通过 toString() 生成标准查询字符串：

Alibabacloud Sdk Client Initialization For Java

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

下载

set(key, value)：设置键值，覆盖已有同名项
append(key, value)：追加键值，允许重复（如多选标签）
delete(key)：移除指定键的所有值
toString()：返回编码后的查询字符串（自动处理空格、中文等）

示例：

const params = new URLSearchParams();

params.set('q', 'JavaScript BOM');
params.append('sort', 'date');
params.append('sort', 'relevance'); // 多个 sort
params.set('page', '2');

const queryString = params.toString();
// "q=JavaScript+BOM&sort=date&sort=relevance&page=2"

// 更新当前页面 URL（不刷新）
history.replaceState(null, '', `?${queryString}`);

与 URL 对象配合使用（推荐进阶场景）

当需要同时操作协议、域名、路径、查询、哈希时，结合 URL 构造函数更健壮：

new URL() 可解析完整 URL，其 .searchParams 属性就是 URLSearchParams 实例
修改 .searchParams 后，.href 自动更新，避免手动拼接错误
适合生成跳转链接、构造 API 请求地址等场景

示例：

const url = new URL('https://example.com/search');

url.searchParams.set('q', 'BOM');
url.searchParams.set('limit', '10');
url.searchParams.delete('debug');

console.log(url.href);
// "https://example.com/search?q=BOM&limit=10"