推荐使用 URLSearchParams 构建查询字符串，它自动编码、语义清晰、不易出错；Axios 可直接传 params 对象由其内部处理；手动拼接需用 encodeURIComponent 编码键值并过滤空值。
在 JavaScript 中调用接口时传递 URL 查询参数，核心是把参数拼接到请求 URL 的 ?key=value&key2=value2 部分。方式取决于你用的是原生 fetch、XMLHttpRequest，还是封装库（如 Axios）。关键不是“怎么加”，而是“怎么加得安全、可读、不易出错”。
用 URLSearchParams 构建查询字符串（推荐）
这是现代浏览器（Chrome 49+、Firefox 44+、Edge 17+、Safari 10.1+）原生支持的方式，自动处理编码，语义清晰，不易漏转义：
- 创建
URLSearchParams实例，传入对象或键值对数组 - 用
.toString()得到已编码的查询字符串 - 拼接到基础 URL 后面即可
示例：
const baseUrl = 'https://api.example.com/users';
const params = new URLSearchParams({
page: 2,
limit: 10,
sort: 'name',
q: '前端工程师'
});
// 自动编码：q=%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%88
const url = `${baseUrl}?${params}`;
fetch(url)
.then(res => res.json())
.then(data => console.log(data));
手动拼接（不推荐，仅用于简单场景）
如果需兼容极老环境（如 IE），或参数极少且确定无特殊字符，可手动拼接，但必须用 encodeURIComponent 对每个值编码：
立即学习“Java免费学习笔记（深入）”；
- 不能只对值编码，键也建议编码（虽然多数 API 只校验值）
- 避免直接字符串拼接：
?name=张三&city=上海→ 中文会乱码 - 空值、
undefined、null要提前过滤，否则变成key=undefined
示例：
const params = {
page: 1,
q: 'JavaScript & TypeScript',
category: null
};
const searchParts = Object.entries(params)
.filter(([, v]) => v != null && v !== '')
.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
.join('&');
const url = `https://api.example.com/search?${searchParts}`;
// → ?page=1&q=JavaScript+%26+TypeScript
在 Axios 中传递查询参数
Axios 提供了更简洁的写法：直接传 params 配置项，它内部会用 URLSearchParams 或等效逻辑处理：
- 对象形式最常用，Axios 自动序列化并编码
- 支持嵌套对象（默认扁平化）和数组（默认生成
key[]=a&key[]=b） - 如需自定义序列化，可配置
paramsSerializer
示例：
axios.get('https://api.example.com/posts', {
params: {
author: 'Alice',
tags: ['js', 'web'],
published: true
}
});
// → /posts?author=Alice&tags[]=js&tags[]=web&published=true
注意边界情况
实际开发中容易忽略但影响功能的点：
-
重复键：如
{id: [1, 2, 3]}，不同库行为不同（Axios 默认多个id=1&id=2；URLSearchParams只保留最后一个） -
布尔值和数字：
true→"true"，0→"0"，不会被过滤，需按后端要求显式转换 -
空格和符号：
+在 URL 中表示空格，但encodeURIComponent('a+b')会变成a%2Bb，确保后端能正确解析 - 长度限制：GET 请求 URL 总长受浏览器和服务器限制（通常 2000 字符左右），大量参数建议改用 POST + body
