new URLSearchParams 功能用法详解

什么是URLSearchParams？

URLSearchParams是一个Web API，提供了一系列方法来处理URL的查询字符串。它让我们能够以更直观、更安全的方式构建和解析URL参数。

传统方式 vs URLSearchParams

 

传统方式（字符串拼接）：

// ❌ 不推荐 - 容易出错，需要手动编码
const url = `/api/data?businessId=${projectTrialId}&subjectId=${subjectId}&projectSubjectId=${projectSubjectId}`;

// 如果参数值包含特殊字符，可能会破坏URL结构
const badUrl = `/api/data?name=John&Doe`; // &符号会被错误解析

 

现代方式（URLSearchParams）：

const params = new URLSearchParams({
    businessId: projectTrialId,
    subjectId: subjectId,
    projectSubjectId: projectSubjectId,
})
const url = `/api/data?${params}`;

 

用法详解

1. 创建URLSearchParams实例

// 方式1：从对象创建（最常用）
const params = new URLSearchParams({
    businessId: '123',
    subjectId: '456',
    projectSubjectId: '789'
});

// 方式2：从查询字符串创建
const params2 = new URLSearchParams('businessId=123&subjectId=456');

// 方式3：空实例，后续添加
const params3 = new URLSearchParams();
params3.append('businessId', '123');

 

2. 自动URL编码

URLSearchParams会自动处理特殊字符的编码，避免常见的URL构造错误：

const params = new URLSearchParams({
    name: 'John & Doe',
    email: 'john@example.com'
});

console.log(params.toString());
// 输出：name=John+%26+Doe&email=john%40example.com
// & 被编码为 %26，@ 被编码为 %40

 

 

高级特性

const params = new URLSearchParams();

// 添加参数
params.append('tag', 'javascript');
params.append('tag', 'web'); // 可以添加同名参数

// 设置参数（会覆盖同名参数）
params.set('page', '1');

// 获取参数
const page = params.get('page');

// 检查参数是否存在
const hasTag = params.has('tag');

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