URL 参数（也称为查询字符串）是 Web 开发的重要组成部分，允许您在页面之间传递数据或从客户端传递到服务器。无论您是在构建搜索功能、处理表单提交还是跟踪用户偏好，了解如何提取和使用这些参数都是必不可少的。
在本文中，我将向您展示使用 JavaScript 获取 URL 参数的最有效方法，从现代方法到传统解决方案。
关键要点
URLSearchParams 是处理 URL 参数的现代推荐方法
使用 urlParams.get('param') 检索单个参数值
使用 urlParams.has('param') 检查参数是否存在
对于较旧的浏览器，实现自定义解析函数
始终解码参数值以处理特殊字符
使用 URL 参数时要注意安全性影响
理解 URL 参数
URL 参数出现在 URL 中问号（?）之后，格式为键值对：
https://example.com/page?name=john&id=123
在此示例中，有两个参数：name 的值为 john，id 的值为 123。
现代方法：URLSearchParams
在现代浏览器中处理 URL 参数最简单、最可靠的方法是使用 URLSearchParams 接口。
基本用法
// 假设 URL: https://example.com/page?product=shirt&color=blue&size=m
// 获取查询字符串
const queryString = window.location.search;
// 解析查询字符串
const urlParams = new URLSearchParams(queryString);
// 获取特定参数值
const product = urlParams.get('product'); // "shirt"
const color = urlParams.get('color'); // "blue"
检查参数是否存在
// 检查参数是否存在
if (urlParams.has('product')) {
// 参数存在
console.log('Product 参数存在');
}
处理多个值
如果参数在 URL 中出现多次，您可以检索所有值：
// URL: https://example.com/page?tag=javascript&tag=frontend
// 获取参数的所有值
const tags = urlParams.getAll('tag'); // ["javascript", "frontend"]
遍历参数
URLSearchParams 提供迭代器方法来处理所有参数：
// 遍历所有参数键
for (const key of urlParams.keys()) {
console.log(key);
}
// 遍历所有参数值
for (const value of urlParams.values()) {
console.log(value);
}
// 遍历所有参数条目（键值对）
for (const [key, value] of urlParams.entries()) {
console.log(`${key}: ${value}`);
}
传统方法：自定义函数
对于不支持 URLSearchParams 的较旧浏览器，您可以创建自定义函数：
function getUrlParam(param) {
const queryString = window.location.search.substring(1);
const urlParams = queryString.split('&');
for (let i = 0; i < urlParams.length; i++) {
const paramPair = urlParams[i].split('=');
if (paramPair[0] === param) {
return decodeURIComponent(paramPair[1] || "");
}
}
return null;
}
// 使用方法
const productValue = getUrlParam('product');
处理常见边缘情况
编码字符
URL 参数通常包含编码字符。例如，空格被编码为 %20：
// URL: https://example.com/search?query=web%20development
const query = urlParams.get('query');
console.log(query); // "web development" (自动解码)
使用自定义函数时，确保使用 decodeURIComponent() 正确处理这些编码字符。
缺失参数
在使用参数之前，始终检查参数是否存在：
const size = urlParams.has('size') ? urlParams.get('size') : 'default';
空参数
参数可以存在但没有值：
// URL: https://example.com/page?newsletter=&theme=dark
const newsletter = urlParams.get('newsletter'); // "" (空字符串)
const hasNewsletter = urlParams.has('newsletter'); // true
完整示例：获取所有 URL 参数
以下是一个获取所有 URL 参数作为对象的综合函数：
function getAllUrlParams() {
const params = {};
const queryString = window.location.search.substring(1);
if (queryString) {
const pairs = queryString.split('&');
for (const pair of pairs) {
const [key, value] = pair.split('=');
// 如果参数没有值，设置为 true
if (typeof value === 'undefined') {
params[key] = true;
} else {
// 如果我们已经有这个参数，转换为数组
if (params[key]) {
if (!Array.isArray(params[key])) {
params[key] = [params[key]];
}
params[key].push(decodeURIComponent(value));
} else {
params[key] = decodeURIComponent(value);
}
}
}
}
return params;
}
浏览器兼容性
URLSearchParams 在所有现代浏览器中都受支持，包括：
Chrome 49+
Firefox 44+
Safari 10.1+
Edge 17+
对于像 Internet Explorer 这样的较旧浏览器，您需要使用 polyfill 或自定义函数方法。
性能考虑
对于大多数应用程序，不同方法之间的性能差异可以忽略不计。但是：
URLSearchParams 经过优化并由浏览器供应商维护
自定义函数可以根据您的特定需求进行定制
如果您只获取单个参数，简单的正则表达式可能更快
安全注意事项
请记住，URL 参数在浏览器的地址栏中是可见的，对于敏感信息来说不安全。在应用程序中使用参数值之前，始终验证和清理它们。
结论
URLSearchParams 接口提供了一种在 JavaScript 中处理 URL 参数的清洁、标准化方法。对于大多数现代 Web 应用程序，这是推荐的方法。对于传统浏览器支持，自定义函数可以用稍多的代码提供相同的功能。
通过了解如何有效地提取和使用 URL 参数，您可以构建更动态和交互式的 Web 应用程序。
常见问题
我可以用 JavaScript 修改 URL 参数吗？ 是的，您可以使用 URLSearchParams 修改参数，然后使用 history.pushState() 或 history.replaceState() 更新 URL。
如何在单页应用程序中处理 URL 参数？ 大多数 SPA 框架（React、Vue、Angular）都有内置的路由系统来处理 URL 参数。查看您的框架文档了解详情。
URL 参数是否区分大小写？ 根据 URL 规范，参数名称是区分大小写的，所以 'name' 和 'Name' 是不同的参数。
如何在 URL 参数中处理数组？ 您可以多次使用相同的参数名称（例如 ?color=red&color=blue）或使用括号表示法（例如 ?colors[]=red&colors[]=blue）。
URL 参数的最大长度是多少？ 没有官方限制，但浏览器和服务器通常对整个 URL 有 2,000-8,000 个字符的实际限制。
Listen to your bugs 🧘, with OpenReplay See how users use your app and resolve issues fast.
Self-Host
Try Cloud Free
Loved by thousands of developers