使用URLSearchParams和URL API可高效操作URL参数。首先通过new URLSearchParams(window.location.search)获取参数，用get()读取值，set()更新、append()添加、delete()删除参数，最后toString()生成新查询字符串，并结合history.pushState()或replaceState()更新地址栏而不刷新页面；对于不支持环境，可用正则或split()手动解析查询字符串为对象；构造带参URL时推荐使用new URL()配合searchParams自动处理编码与重复参数，避免手动拼接错误。
在Web开发中，经常需要通过JavaScript获取或修改URL中的参数。比如从链接https://example.com/page?name=john&age=25中提取name和age的值，或者动态添加、更新、删除参数。下面详细介绍几种常用方法。
使用URLSearchParams获取和操作参数
URLSearchParams 是现代浏览器提供的原生API，专门用于处理URL查询字符串，支持增删改查操作，兼容性良好（IE除外）。
假设当前页面URL为：https://example.com/page?name=john&age=25
通过window.location.search获取查询部分，然后创建URLSearchParams实例：
立即学习“Java免费学习笔记（深入）”；
const params = new URLSearchParams(window.location.search);const name = params.get('name'); // 'john'const age = params.get('age'); // '25'
params.set('age', 30); // 更新ageparams.append('city', 'beijing'); // 添加新参数
params.delete('city');
console.log(params.toString()); // "name=john&age=30"
可以结合history.pushState或location.replace更新地址栏：
window.history.replaceState({}, '', '?' + params.toString());
手动解析查询字符串（兼容老浏览器）
如果需要兼容不支持URLSearchParams的环境，可以通过正则或字符串分割方式手动解析。
示例函数：
function getQueryParam(url, key) {
const match = RegExp('[?&]' + key + '=([^&]*)').exec(url);
return match ? decodeURIComponent(match[1]) : null;
}
// 使用：
const name = getQueryParam(window.location.href, 'name');
或一次性解析所有参数为对象：
function parseQueryParams(query) {
const params = {};
if (!query) return params;
const pairs = query.slice(1).split('&');
pairs.forEach(pair => {
const [key, value] = pair.split('=');
params[decodeURIComponent(key)] = decodeURIComponent(value || '');
});
return params;
}
// 使用：
const queryParams = parseQueryParams(window.location.search);
修改URL并更新浏览器地址
获取和修改参数后，通常需要更新页面URL而不刷新。可使用history.pushState或replaceState。
-
pushState：添加新历史记录 -
replaceState：替换当前历史记录
示例：
const url = new URL(window.location);
url.searchParams.set('page', 2);
window.history.pushState({}, '', url);
这样地址栏会变为包含新参数的URL，且不会刷新页面，适合SPA应用。
构造和拼接带参数的URL
使用URL构造函数是最推荐的方式，能自动处理编码和格式。
const url = new URL('https://example.com/search');
url.searchParams.set('q', 'js教程');
url.searchParams.set('type', 'article');
console.log(url.href); // 输出完整URL
避免手动拼接字符串，防止出现?q=js&type=article&q=test这类重复参数问题。
基本上就这些。用URLSearchParams和URL API 能解决绝大多数场景，代码更清晰，不易出错。
