推荐使用urlsearchparams api解析url参数，因为它自动处理编码、支持重复参数名并提供简洁的增删改查方法；2. 手动解析需通过字符串分割和decodeuricomponent处理编码，适用于旧浏览器但易出错；3. 常见陷阱包括忽略url编码导致乱码、重复参数被覆盖、空值误判及混淆search与hash；4. 当查询参数位于哈希内时，需先提取hash中问号后的字符串再用urlsearchparams解析。使用现代api能有效避免这些问题，提升代码健壮性。
解析URL参数在JavaScript中主要有两种方式：现代浏览器支持的
URLSearchParamsAPI，以及通过字符串操作手动解析
location.search。推荐使用
URLSearchParams，因为它更简洁、健壮，能自动处理编码和多种边缘情况。
解决方案
在JavaScript中解析URL参数，最现代且推荐的方式是使用
URLSearchParams接口。这个API提供了非常方便的方法来获取、设置和操作URL的查询字符串。
使用 URLSearchParams
：
URLSearchParams对象可以直接从当前URL的查询字符串 (
window.location.search) 或任何包含查询字符串的自定义字符串中创建。
// 假设当前URL是 https://example.com/page?name=张三&age=30&tags=js&tags=web开发
const urlParams = new URLSearchParams(window.location.search);
// 获取单个参数值
const name = urlParams.get('name'); // 输出: "张三"
const age = urlParams.get('age'); // 输出: "30"
// 获取所有同名参数值（返回数组）
const tags = urlParams.getAll('tags'); // 输出: ["js", "web开发"]
// 检查是否存在某个参数
const hasAge = urlParams.has('age'); // 输出: true
const hasGender = urlParams.has('gender'); // 输出: false
// 遍历所有参数
for (const [key, value] of urlParams.entries()) {
console.log(`${key}: ${value}`);
}
// 输出:
// name: 张三
// age: 30
// tags: js
// tags: web开发
// 修改或添加参数
urlParams.set('city', '北京'); // 如果存在则更新，不存在则添加
urlParams.append('tags', '前端'); // 添加一个同名参数
// 删除参数
urlParams.delete('age');
// 将修改后的参数重新转换为查询字符串
const newSearchString = urlParams.toString();
// 示例输出: "name=%E5%BC%A0%E4%B8%89&tags=js&tags=web%E5%BC%80%E5%8F%91&city=%E5%8C%97%E4%BA%AC&tags=%E5%89%8D%E7%AB%AF"
// 注意：toString() 会自动进行URL编码手动解析（传统方式，适用于旧浏览器或特定场景）：
虽然不推荐作为首选，但了解手动解析的逻辑也很有用。它主要涉及字符串的分割和解码。
// 假设当前URL是 https://example.com/page?name=张三&age=30&tags=js&tags=web开发
function parseUrlParamsManually() {
const params = {};
const search = window.location.search; // 获取查询字符串，例如 "?name=%E5%BC%A0%E4%B8%89&age=30"
if (search.length > 1) { // 确保有查询参数
const queryString = search.substring(1); // 移除开头的 '?'
const pairs = queryString.split('&'); // 分割成键值对数组
pairs.forEach(pair => {
const parts = pair.split('=');
if (parts.length === 2) {
const key = decodeURIComponent(parts[0]);
const value = decodeURIComponent(parts[1]);
if (params[key]) {
// 处理重复参数名，例如 ?tags=js&tags=web
if (Array.isArray(params[key])) {
params[key].push(value);
} else {
params[key] = [params[key], value];
}
} else {
params[key] = value;
}
}
});
}
return params;
}
const manualParams = parseUrlParamsManually();
console.log(manualParams);
// 示例输出: { name: "张三", age: "30", tags: ["js", "web开发"] }手动解析时，特别要注意
decodeURIComponent()的使用，因为URL参数在传输过程中通常会被编码。
URLSearchParams 与传统手动解析方式，我该如何选择？
在现代Web开发中，几乎没有理由不选择
URLSearchParams。这是一个Web标准API，设计之初就是为了解决URL查询字符串解析的痛点，它不仅代码量少，可读性高，而且在处理URL编码、多个同名参数等复杂情况时表现得更为健壮和自动化。
我个人在项目中，如果不是面对IE11以下这种极端的兼容性要求（而且现在IE11也越来越少见了），我一定会直接用
URLSearchParams。它省去了自己写一堆字符串分割、循环、条件判断的麻烦，也避免了因为编码问题或者参数缺失导致的各种小bug。想想看，如果自己手动处理，你得考虑
?a=1&a=2这种重复参数怎么存？空值
?b=怎么处理？特殊字符
?c=你好怎么解码？
URLSearchParams这些都给你考虑好了。
当然，如果你真的需要支持非常老的浏览器，或者出于某种极其特殊的原因不想引入任何Polyfill，手动解析仍然是一种选择。它能让你对整个解析过程有完全的控制，理解底层逻辑。但话说回来，为了那一点点“控制”，放弃现代API带来的便利和稳定性，我觉得有点得不偿失。大多数情况下，如果非要兼容旧环境，引入一个
URLSearchParams的Polyfill会是更好的方案，既享受了API的便利，又解决了兼容性问题。
解析URL参数时，有哪些常见的陷阱或需要注意的问题？
解析URL参数看似简单，但实际操作中确实存在一些容易掉进去的“坑”。
一个最常见的陷阱就是URL编码和解码。用户在浏览器地址栏直接输入的中文、特殊符号（如空格、
&、
=等）都会被浏览器自动进行URL编码，变成
%xx的形式。例如，
张三会变成
%E5%BC%A0%E4%B8%89。如果你手动解析，忘记使用
decodeURIComponent()来解码，那么你获取到的就会是乱码或者编码后的字符串，这肯定不是你想要的。
URLSearchParams在这方面做得很好，它在
get()或
getAll()时会自动帮你解码，但在你使用
toString()生成新的查询字符串时，也会自动编码，非常方便。
第二个常见问题是重复的参数名。比如
?item=apple&item=banana。在这种情况下，如果你只是简单地用
split('=')然后存到一个对象里，后面的值会覆盖前面的值。URLSearchParams提供了
getAll()方法来完美解决这个问题，它会返回一个包含所有同名参数值的数组。手动解析的话，你需要额外写逻辑来判断如果键已存在，是覆盖还是将其转换为数组并添加新值。
还有就是参数值为空的情况，比如
?name=&age=30。这里的
name参数值是一个空字符串。有些解析逻辑可能会把它误判为不存在或者忽略掉，但实际上它是有值的，只是值是空的。
URLSearchParams能够正确获取到空字符串。
最后，要特别注意URL中的哈希（#
）部分。
window.location.search只会返回问号
?后面的查询参数部分，而
#后面的哈希值（通常用于锚点定位或单页应用路由）则通过
window.location.hash获取。这两者是独立的，参数解析时不要混淆。如果你的参数是放在哈希值里的（比如
#/path?id=123），那么常规的
URLSearchParams(window.location.search)是解析不到的，你需要先处理哈希值。
如何处理URL中包含哈希（#）和查询参数的复杂情况？
URL的结构通常是
协议://主机名:端口/路径?查询参数#哈希值。在JavaScript中，
window.location对象提供了访问这些部分的属性：
window.location.search
：包含问号?
及其后面的查询参数。window.location.hash
：包含井号#
及其后面的哈希值。
常规情况下，
URLSearchParams是直接作用于
window.location.search的，因为它就是用来处理标准查询字符串的。
然而，在一些单页应用（SPA）中，特别是那些使用哈希路由（Hash Router）的框架，你可能会遇到查询参数被放置在哈希值内部的情况。例如：
https://example.com/#/dashboard?id=123&name=test。
在这种“复杂”场景下，
window.location.search会是空的，因为问号
?和参数都在哈希
#的后面。这时，你需要做一些额外的步骤来提取和解析：
-
获取哈希值： 使用
window.location.hash
，它会返回#/dashboard?id=123&name=test
。 -
从哈希值中提取查询字符串： 你需要找到哈希值中第一个问号
?
的位置。如果存在，问号后面的部分就是你想要的查询字符串。 - 使用
URLSearchParams
解析提取出的字符串：
// 假设URL是 https://example.com/#/dashboard?id=123&name=test
const fullHash = window.location.hash; // 结果: "#/dashboard?id=123&name=test"
let hashQueryParams = '';
const queryStartIndex = fullHash.indexOf('?');
if (queryStartIndex !== -1) {
hashQueryParams = fullHash.substring(queryStartIndex); // 结果: "?id=123&name=test"
}
if (hashQueryParams) {
const paramsInHash = new URLSearchParams(hashQueryParams);
const id = paramsInHash.get('id'); // 结果: "123"
const name = paramsInHash.get('name'); // 结果: "test"
console.log(`ID from hash: ${id}, Name from hash: ${name}`);
} else {
console.log('哈希中没有查询参数。');
}
// 如果URL是标准的带查询参数的，比如 https://example.com/?param1=value1
const standardParams = new URLSearchParams(window.location.search);
const param1 = standardParams.get('param1'); // 结果: "value1" (如果URL是这样的话)
console.log(`Standard param1: ${param1}`);这种处理哈希内参数的方法在老旧的SPA项目或者特定需求下比较常见。它本质上是将哈希值的一部分当作了新的查询字符串来处理。理解URL各个部分的职责，能帮助你更清晰地定位和解析所需的参数。
