JavaScript 程序可以通过多种方式获取请求参数，这些方式包括：使用 URLSearchParams 对象、操作 window.location 对象、运用正则表达式匹配、使用第三方库。使用 URLSearchParams 对象 是现代浏览器中获取请求参数的标准方法，这种方法简单易用且功能强大。
URLSearchParams 对象提供了一系列方法来处理 URL 中的查询字符串。例如，如果要获取URL中名为'id'的查询参数，可以这样做：
const params = new URLSearchParams(window.location.search);
const id = params.get('id');
在这里，我们首先使用 window.location.search 获取到当前URL的查询字符串部分，然后利用 URLSearchParams 的 get 方法获取特定的参数值。这种方法的优点在于可以很容易地处理多值参数，并且不需要编写复杂的正则表达式。
接下来，本文将详尽讲解如何在不同场景下获取请求参数，并提供实际代码示例。
一、使用 URLSearchParams
获取单个请求参数
首先创建一个 URLSearchParams 对象，传入 window.location.search 作为参数，然后可以通过 get 方法来获取指定名称的请求参数值。
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const parameter = urlParams.get('name');
获取多个请求参数
URLSearchParams 也支持遍历所有的查询字符串参数，可以使用 forEach 方法进行操作。
urlParams.forEach((value, key) => {
console.log(`${key}: ${value}`);
});
二、使用 Window.Location 对象
解析查询字符串
通过 window.location.search 属性可以直接获取到URL的查询字符串部分，然后可以自行解析。
const queryString = window.location.search.substring(1); // 移除查询字符串前的？
const paramsArray = queryString.split('&');
for (const param of paramsArray) {
const [key, value] = param.split('=');
console.log(`${key}: ${value}`);
}
修改和替换参数
可以使用 window.location 对象的 href 或 replace 方法修改或替换URL参数。
window.location.href += '?newparam=value';
window.location.replace(window.location.href + '&newparam=value');
三、运用正则表达式匹配
创建获取参数的函数
利用正则表达式进行查询字符串的匹配，编写一个可复用的函数来获取URL参数。
function getQueryParam(name) {
const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
const r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURIComponent(r[2]);
return null;
}
const id = getQueryParam('id');
console.log(id);
四、使用第三方库
利用jQuery或其他库
很多前端库和框架都提供了获取URL参数的便捷方法，例如jQuery的$.param()。
// 假设你已经在页面中引入了jQuery库
const id = $.param('id');
使用其他小型库
存在许多专门解析URL参数的小型JavaScript库，如 query-string，可通过npm安装使用。
// 先安装库：npm install query-string
import queryString from 'query-string';
const parsed = queryString.parse(location.search);
console.log(parsed.id);
获取请求参数 是Web开发中的常见任务，JavaScript提供了多种途径来实现这一功能，可以根据项目需求和个人偏好选择合适的方法。在现代Web开发实践中，倾向于使用 URLSearchParams 和第三方库，因为它们提供了更多的便利和兼容性。
相关问答FAQs：
1. 如何使用 JavaScript 获取网页 URL 中的查询参数？
JavaScript 提供了一种简单的方法来获取当前网页 URL 中的查询参数。您可以使用 window.location.search 属性来获取完整的查询字符串，然后使用字符串操作函数（如 split() 或 substring()）来提取所需的参数。例如，如果 URL 为 http://example.com?id=123&name=John，您可以使用以下代码获取 id 和 name 参数的值：
var queryParams = window.location.search.substring(1).split('&');
var params = {};
queryParams.forEach(function(param) {
var paramPAIr = param.split('=');
params[paramPair[0]] = decodeURIComponent(paramPair[1] || '');
});
var id = params.id; // 123
var name = params.name; // John
2. 如何使用 JavaScript 获取表单提交的参数？
如果您有一个 HTML 表单，并希望在用户提交表单时获取表单参数，您可以使用 JavaScript 提供的 FormData 对象来简化操作。可以通过监听表单的 submit 事件，并在事件处理函数中使用 FormData 对象来获取所有表单字段的值。以下是一个示例代码：
<form id="myForm">
<input type="text" name="username">
<input type="email" name="email">
<button type="submit">提交</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单的默认提交行为
var formData = new FormData(this);
var username = formData.get('username');
var email = formData.get('email');
// 在这里处理获取到的参数
});
</script>
3. 如何通过 JavaScript 获取 URL 中的动态路由参数？
如果您使用的是包含动态路由参数的 URL，例如 http://example.com/users/123，您可以使用 JavaScript 的正则表达式来匹配和提取这些参数。以下代码示例展示了如何获取 /users/123 URL 中的用户 ID：
var url = 'http://example.com/users/123';
var userId = url.match(/\/users\/(\d+)/)[1]; // 提取匹配的数字
console.log(userId); // 123
您可以使用类似的方法来提取其他动态路由参数，只需根据您的 URL 格式调整正则表达式即可。
