推荐使用 URLSearchParams 将对象转为查询字符串并拼接到 URL 后，自动编码键值、兼容主流浏览器；若需兼容旧环境则手动实现并确保调用 encodeURIComponent；注意嵌套对象需扁平化、数组需多 append、避免敏感信息入 URL。
JavaScript 中将对象参数拼接到 URL 后面，本质是把对象转成标准的查询字符串（query string），再以 ?key1=value1&key2=value2 形式追加到 URL 末尾。核心步骤是：序列化对象 + 安全编码 + 拼接。
用 URLSearchParams（推荐，现代浏览器）
这是最简洁、安全、原生支持的方式，自动处理 URL 编码，兼容性已覆盖主流浏览器（Chrome 49+、Firefox 44+、Edge 17+、Safari 10.1+）。
示例：
const url = 'https://api.example.com/search';
const params = { q: '前端开发', page: 2, sort: 'date' };
const searchParams = new URLSearchParams(params);
const fullUrl = `${url}?${searchParams.toString()}`;
// 结果：https://api.example.com/search?q=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91&page=2&sort=date
注意：URLSearchParams 会自动对键和值做 encodeURIComponent，中文、空格、特殊符号都安全。
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
如果 URL 已含参数，可用 new URL(url) 直接操作：
const url = new URL('https://api.example.com/search?category=js');
url.searchParams.set('q', 'Vue');
url.searchParams.append('page', 1);
console.log(url.toString());
// https://api.example.com/search?category=js&q=Vue&page=1
手动拼接（兼容老环境或需自定义逻辑）
若需支持 IE 或要控制编码方式，可手写转换函数。关键点：必须对每个 value（和 key）调用 encodeURIComponent，否则空格、中文、&、= 等会破坏 URL 结构。
简单实现：
function objectToQueryString(obj) {
return Object.keys(obj)
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`)
.join('&');
}
const url = 'https://api.example.com/list';
const params = { name: '张三', tag: 'web dev' };
const fullUrl = `${url}?${objectToQueryString(params)}`;
// https://api.example.com/list?name=%E5%BC%A0%E4%B8%89&tag=web%20dev
- 避免直接用
JSON.stringify或字符串拼接，那样不会编码，极不安全 - 值为
null或undefined时建议过滤掉，或显式转成空字符串 - 数组参数如
{ tags: ['a', 'b'] }需额外处理（例如重复 key 或用逗号分隔）
处理嵌套对象或数组（进阶场景）
原生 URLSearchParams 不支持嵌套（如 { user: { name: 'A' } }），此时需扁平化或约定格式。常见做法：
- 用点号表示层级：
user.name=A&user.age=25 - 数组转为多个同名参数：
id=1&id=2&id=3（searchParams.append()可实现） - JSON 字符串化后编码（服务端需解析）：
filter=%7B%22status%22%3A%22active%22%7D
示例（数组多值）：
const params = new URLSearchParams();
['apple', 'banana'].forEach(val => params.append('fruit', val));
// fruit=apple&fruit=banana
注意事项和避坑点
- 不要用
encodeURI替代encodeURIComponent—— 前者不编码/ ? : @ & = + $ , #，会导致 URL 解析错误 - URL 中已有
?时，新参数要用&连接，不是再次加? - 服务端接收时，确保能正确解析多次出现的相同 key（如数组型参数）
- 敏感信息（如 token、密码）不应放在 URL 中，有泄露风险
