URL参数解析：一行代码搞定，告别繁琐的传统方法
大家上网时，肯定对网址里的“?”和“&”不陌生。比如你在淘宝搜索商品后，网址可能变成这样：
https://s.taobao.com/search?q=运动鞋&sort=default问号后面的 q=运动鞋&sort=default 就是 URL 参数。它们是网页间传递信息的“小纸条”。电商网站靠它知道你搜了什么，分享出去的链接靠它记录是谁分享的，问卷调查靠它追踪来源。作为开发者，我们经常需要从这串字符里“拆”出想要的信息。以前，这通常意味着要写一段啰嗦的代码。但现在，浏览器给我们提供了一个更优雅的解决方案，甚至一行代码就能搞定。
传统方式：那段熟悉的“老黄牛”代码
在过去，我们可能会这样写一个获取参数的函数：
function getQueryParams() {
var params = {};
// 1. 去掉URL中的问号
var queryString = window.location.search.substring(1);
if (queryString) {
// 2. 用&分割成键值对数组
var pairs = queryString.split('&');
for (var i = 0; i < pairs.length; i++) {
// 3. 用=分割每一对，并解码
var pair = pairs[i].split('=');
var key = decodeURIComponent(pair[0]);
var value = decodeURIComponent(pair[1] || '');
params[key] = value;
}
}
return params;
}
// 假设当前URL是：https://xxx.com/product?name=笔记本电脑&promo=618
var params = getQueryParams();
console.log(params.name); // 输出：笔记本电脑这段代码功能完备，但每次看到它，心里总会想：“又要写一遍了……” 十几行代码，手动分割、解码、处理边界情况，确实有点麻烦，对吧？
现代方案：让浏览器自己干活
得益于现代浏览器提供的 URL 和 URLSearchParams 接口，我们现在可以写得更聪明。
核心代码：
const getParams = (url = window.location.href) =>
Object.fromEntries(new URL(url).searchParams);没错，就这么短。它把所有参数都变成了一个我们最熟悉的对象。
如何使用：
// 假设当前URL是：https://news.com/article?title=今日头条&id=10086
const articleParams = getParams();
console.log(articleParams.title); // 输出：今日头条
console.log(articleParams.id); // 输出：10086拆解一下：看看这行代码的“秘密”
这行代码虽然短，但“五脏俱全”。我们来一步步拆解，看它是如何工作的。
const getParams = (url = window.location.href) => ...定义了一个函数，可以传入一个 URL 地址。如果不传，它就默认帮你获取当前浏览器标签页的地址。
new URL(url)这是核心所在。URL 是浏览器内置的一个“地址解析大师”。你给它一个网址，它就能把这个网址拆解成协议 (protocol)、主机名 (hostname)、路径 (pathname) 和参数 (search) 等部分。比我们用字符串分割的方法可靠得多。
.searchParamsnew URL(url) 对象里有一个 searchParams 属性。这属性本身就是一个 URLSearchParams 对象，它就像一个专门用来操作 URL 参数的“瑞士军刀”，提供了 get()、set()、has()、entries() 等各种好用的方法。
.entries()这个方法会返回一个迭代器，里面包含了所有参数的键值对数组，类似 [['title', '今日头条'], ['id', '10086']] 这样的结构。
Object.fromEntries(...)这是最后一步，也是最巧妙的一步。Object.fromEntries() 的作用，正好是把 [['title', '今日头条'], ['id', '10086']] 这种键值对列表，转换成我们最熟悉的 {title: '今日头条', id: '10086'} 对象。
所以，这行代码的逻辑就是：解析URL -> 拿到参数列表 -> 转换成对象。一气呵成。
看个Demo，更直观
我们来模拟一个活动页面的场景。
假设我们正在做一个圣诞抽奖活动页面，URL是：https://fly63.com?user=小明&from=微信&campaign=xmas2023
我们可以这样用：
<div id="app">
<h1>圣诞抽奖活动</h1>
<p id="welcome-message"></p>
<p id="source-info"></p>
</div>
<script>
const getParams = (url = window.location.href) => Object.fromEntries(new URL(url).searchParams);
// 获取当前页面的所有URL参数
const userInfo = getParams();
// 动态更新页面内容
const welcomeEl = document.getElementById('welcome-message');
const sourceEl = document.getElementById('source-info');
if (userInfo.user) {
welcomeEl.textContent = `欢迎您，${userInfo.user}！`;
}
if (userInfo.from) {
sourceEl.textContent = `您是从【${userInfo.from}】找到我们的，感谢关注！`;
}
// 还可以根据 campaign 参数做不同的埋点统计
console.log(`活动来源统计：${userInfo.campaign || '直接访问'}`);
</script>效果就是，当不同渠道的用户访问页面时，页面会展示出个性化的欢迎语。整个过程清晰、简洁，没有任何冗余的循环代码。
如果你想兼容老浏览器
如果你需要支持那些比较老的浏览器，可以用下面这个稍微详细一点的版本，核心思路是一样的，但写法更稳妥：
function getParams(url) {
url = url || window.location.href;
const urlObj = new URL(url);
const params = {};
for (let [key, value] of urlObj.searchParams.entries()) {
params[key] = value;
}
return params;
}一些可能用得上的“小工具”
基于上面的方法，你可以很方便地扩展出一些实用的功能，直接复制到项目里就能用。
1. 只获取一个参数
如果你只关心 URL 里的某一个值，比如 id。
const getParam = (name, url = window.location.href) =>
new URL(url).searchParams.get(name);
// 使用：console.log(getParam('id')); // 输出：100862. 带默认值的参数
如果参数不存在，就给它一个默认值，避免页面出错。
const getParamsWithDefault = (defaults = {}, url = window.location.href) => ({
...defaults,
...Object.fromEntries(new URL(url).searchParams)
});
// 使用：即使 URL 中没有 'page' 参数，它也会默认为 1
const filters = getParamsWithDefault({ page: 1, size: 20 });
console.log(filters.page); // 输出：1 (如果URL中没有page参数)3. 处理“真假”值
URL 参数全是字符串，有时需要把它们变成布尔值或数字。
const getParamsTyped = (url = window.location.href) => {
const params = Object.fromEntries(new URL(url).searchParams);
const result = {};
for (const key in params) {
const value = params[key];
// 如果是数字字符串，转成数字
if (!isNaN(value) && value.trim() !== '') {
result[key] = Number(value);
}
// 如果是 'true' 或 'false'，转成布尔值
else if (value === 'true' || value === 'false') {
result[key] = value === 'true';
}
// 否则还是字符串
else {
result[key] = value;
}
}
return result;
};写在最后
现在，当你再需要获取 URL 参数时，不妨试试这个一行代码的方案。它不仅让你的代码看起来更清爽，更重要的是，它利用浏览器原生能力，让程序运行得更可靠。把这个小技巧记下来，相信你以后会经常用到它。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
