本文介绍如何在使用 URLSearchParams 设置含 $ 符号的 URL 参数时，避免其被自动编码为 %24，确保最终 URL 中参数名原样显示为 $param1，并提供安全、可靠的一行修复方案。
本文介绍如何在使用 `urlsearchparams` 设置含 `$` 符号的 url 参数时，避免其被自动编码为 `%24`，确保最终 url 中参数名原样显示为 `$param1`，并提供安全、可靠的一行修复方案。
在 Web 开发中，URLSearchParams 是处理查询参数的标准化工具，但它严格遵循 URL 编码规范（RFC 3986）：所有非“未保留字符”（unreserved characters）均会被百分号编码。而 $ 虽在 URI 中属于“子分隔符”（sub-delimiter），在查询参数的键（name）位置并不被视为安全未保留字符，因此 params.set('$param1', '60') 会自动将 $ 编码为 %24，最终生成 ?%24param1=60 —— 这往往与后端约定（如 GraphQL 变量、自定义 API 协议）冲突。
⚠️ 注意：不能对整个 params.toString() 手动调用 encodeURI() 或 encodeURIComponent()，因为这会导致已正确编码的值（如空格、中文）被重复编码，引发乱码；同样，也不应在 set() 前手动编码键名（如 params.set(encodeURIComponent('$param1'), '60')），这会使键名双重编码，完全失效。
✅ 正确做法是：利用 URL 对象的天然能力，仅对最终字符串结果做精准、轻量的字符还原。URL.searchParams 直接挂载在 URL 实例上，修改后调用 url.toString() 生成完整 URL，此时再用 .replace(/%24/g, '$') 安全替换——该正则仅作用于 $ 的编码形式，不影响其他合法编码（如 %20、%E4%B8%AD），且不改变参数值部分。
以下是推荐实现：
const myUrl = new URL("http://www.example.com/");
// 直接操作 searchParams（更简洁，无需额外 params 变量）
myUrl.searchParams.set('$param1', '60');
myUrl.searchParams.set('$param2', '100');
// 生成 URL 并还原 $ 符号（仅替换 %24 → $）
const finalUrl = myUrl.toString().replace(/%24/g, '$');
console.log(finalUrl);
// 输出：http://www.example.com/?$param1=60&$param2=100? 补充说明：
- 此方案兼容所有现代浏览器（Chrome 55+、Firefox 52+、Safari 10.1+、Edge 79+）；
- 若需支持大量特殊字符（如 @, +, / 等），应评估服务端是否真需原始符号——多数标准 REST API 应遵循编码规范，强行绕过可能引入安全或解析风险；
- 生产环境建议封装为工具函数，并添加注释说明“此行为绕过标准编码，仅适用于明确支持未编码 $ 的服务端”；
- 绝对避免在 fetch() 或 axios 请求中直接拼接未编码参数字符串，务必优先使用 URL + searchParams 流程，再按需微调。
总结：URL 构建应以标准合规为默认，仅在服务端契约明确要求时，采用 toString().replace() 方式精准修正特定字符。既保持代码可维护性，又满足特殊协议需求。
