JavaScript 获取 URL 中参数值的详解
1. 了解 URL 参数2. 使用 URLSearchParams 获取参数值2.1 什么是 URLSearchParams？2.2 示例代码2.3 优缺点
3. 使用正则表达式获取参数值3.1 示例代码3.2 分析
4. 自定义解析函数4.1 示例代码4.2 分析
5. 小结与注意事项
在开发 Web 应用时，我们经常需要从 URL 中提取参数值，比如获取用户的查询条件、跟踪统计信息等。本文将详细介绍几种在 JavaScript 中获取 URL 参数值的方法，包括现代浏览器支持的 URLSearchParams、正则表达式解析以及自定义函数解析方案，并讨论各自的优缺点及适用场景。
1. 了解 URL 参数
一个 URL 的参数部分通常位于问号（?）之后，例如：
https://example.com/page?name=alice&age=25
在上面的 URL 中，name 和 age 都是参数，值分别为 alice 和 25。获取这些参数在前端开发中非常常见。
2. 使用 URLSearchParams 获取参数值
2.1 什么是 URLSearchParams？
ES6 引入了 URLSearchParams 接口，用于方便地解析和操作 URL 查询字符串。该接口提供了一系列方法，例如 get()、has()、append() 等，让我们能够快速获取和操作参数。
2.2 示例代码
// 假设当前 URL 为：https://example.com/page?name=alice&age=25
// 获取查询字符串（问号后面的部分）
const queryString = window.location.search;
// 创建 URLSearchParams 实例
const params = new URLSearchParams(queryString);
// 获取单个参数的值
const name = params.get('name'); // "alice"
const age = params.get('age'); // "25"
console.log('Name:', name);
console.log('Age:', age);
2.3 优缺点
优点：
简洁直观，代码可读性高。提供了丰富的方法来操作参数。 缺点：
IE 不支持该接口（可通过 polyfill 解决）。
3. 使用正则表达式获取参数值
对于不支持 URLSearchParams 的浏览器或特殊需求，可以使用正则表达式来提取 URL 参数值。
3.1 示例代码
function getQueryParam(param) {
const url = window.location.href;
// 构造正则表达式，匹配 ? 或 & 后面跟随的参数名称和其值
const regex = new RegExp('[?&]' + param + '=([^&#]*)', 'i');
const result = regex.exec(url);
return result ? decodeURIComponent(result[1]) : null;
}
// 假设 URL 为：https://example.com/page?name=alice&age=25
console.log(getQueryParam('name')); // "alice"
console.log(getQueryParam('age')); // "25"
3.2 分析
该方法通过正则表达式匹配参数名和参数值。使用 decodeURIComponent 解码 URL 编码字符。可在不支持 URLSearchParams 的环境下使用。
4. 自定义解析函数
如果需要更加灵活地处理 URL 参数（比如支持数组参数、重复参数等），可以编写自定义函数来解析查询字符串。
4.1 示例代码
function parseQueryString(queryString) {
const params = {};
// 移除问号
queryString = queryString.replace(/^\?/, '');
// 分割成键值对数组
const pairs = queryString.split('&');
pairs.forEach(pair => {
if (!pair) return;
const [key, value] = pair.split('=');
const decodedKey = decodeURIComponent(key);
const decodedValue = value ? decodeURIComponent(value) : '';
// 如果键已经存在，则将其转换为数组
if (params[decodedKey]) {
if (Array.isArray(params[decodedKey])) {
params[decodedKey].push(decodedValue);
} else {
params[decodedKey] = [params[decodedKey], decodedValue];
}
} else {
params[decodedKey] = decodedValue;
}
});
return params;
}
// 示例：URL 为：https://example.com/page?name=alice&age=25&hobby=reading&hobby=swimming
const queryString = window.location.search;
const queryParams = parseQueryString(queryString);
console.log(queryParams);
// 输出: { name: "alice", age: "25", hobby: ["reading", "swimming"] }
4.2 分析
该函数先去除 URL 中的问号，再以 & 分割所有键值对。每个键值对使用 = 分割，并解码编码后的字符。如果同一个参数出现多次，则将其值转换为数组存储，方便处理多个值的情况。
5. 小结与注意事项
推荐使用 URLSearchParams：在支持该接口的现代浏览器中，它是获取 URL 参数最简单、最安全的方式。正则表达式方法：适合需要兼容老旧浏览器或特定需求时使用，但代码可读性略低。自定义解析函数：灵活性更高，适用于需要特殊处理（如数组参数）的场景，但需要更多测试以确保兼容性和健壮性。编码与解码：无论哪种方法，都要注意 URL 编码问题，使用 encodeURIComponent 和 decodeURIComponent 进行编码转换。
通过本文，你可以根据项目需求选择最合适的方法来获取 URL 参数值。希望这篇文章能为你在 Web 开发中处理 URL 参数问题提供有用的参考和解决方案！