使用 URLSearchParams 时，应分别调用 set() 或 append() 添加各参数，而非手动拼接 & 或 =；浏览器会自动对键值进行 URL 编码，并由内部逻辑生成合法的查询字符串结构。
使用 urlsearchparams 时，应分别调用 `set()` 或 `append()` 添加各参数，而非手动拼接 `&` 或 `=`；浏览器会自动对键值进行 url 编码，并由内部逻辑生成合法的查询字符串结构。
在构建动态 URL 查询参数时，一个常见误区是试图通过字符串拼接（如 'q=4100&origin=pdp'）或手动插入 &、= 符号来构造查询部分。这不仅违背了 URLSearchParams 的设计初衷，还会导致特殊字符被双重编码——例如 & 变成 %26、= 变成 %3D，最终生成类似 deviceSearch?q=4100%26origin%3Dpdp 的错误结果。
正确做法是将每个参数视为独立的键值对，交由 URLSearchParams 统一管理：
const url = new URL('https://example.com/deviceSearch');
url.searchParams.set('q', item.selectionText); // 自动编码 value 中的特殊字符
url.searchParams.set('origin', 'pdp'); // 自动添加 & 分隔符并编码
console.log(url.toString());
// 输出：https://example.com/deviceSearch?q=4100&origin=pdp
✅
set(key, value)：适用于单值参数，重复调用同 key 会覆盖前值。
✅append(key, value)：适用于需支持多值的场景（如?tag=js&tag=web），同 key 可多次出现。
❌ 避免url.searchParams.set('q', '4100&origin=pdp')：这会把整个字符串作为q的值编码，导致语义错误和 URL 污染。
此外，URLSearchParams 会自动处理 UTF-8 编码与保留字符（如空格 → %20，中文 → %E4%B8%AD 等），无需手动 encodeURIComponent() —— 仅当直接操作原始字符串（如拼接 location.href）时才需自行编码。
总结：信任 URLSearchParams 的内置逻辑，按语义添加参数，让浏览器负责格式化与编码。这是安全、可维护且符合 Web 标准的最佳实践。
