JavaScript程序中接收GET请求参数的方法有多种，包括使用 URLSearchParams、直接解析URL、第三方库（如jQuery）等手段。这些方法的使用取决于你的具体需求、代码的运行环境（浏览器还是Node.js）以及对兼容性的要求。
在这些方法中，使用URLSearchParams是最现代且推荐的方式。这是因为URLSearchParams提供了一套标准的API来操作URL中的查询字符串。它大大简化了解析查询字符串的过程，不需要你编写复杂的正则表达式或字符串处理逻辑。只需简单几行代码，就能轻松获取到所需的参数值。
一、使用URLSearchParams
URLSearchParams是Web APIs的一部分，可以用于处理URL中的查询字符串。这个API允许你轻松地读取、修改、删除查询字符串中的参数，非常适合用在需要解析GET请求参数的场景。
获取单个参数
要获取URL中的单个参数，首先需要创建一个URLSearchParams对象，然后使用get方法：
const params = new URLSearchParams(window.location.search);
const value = params.get('paramName'); // 'paramName'是你想获取的参数名
window.location.search返回当前URL的查询字符串部分。这行代码首先从URL中抽取查询字符串，然后把它传递给URLSearchParams构造函数，创建了一个新的URLSearchParams实例。之后，通过调用get方法并提供参数的名称，就可以获取到这个参数的值。
获取所有参数
如果想要获取所有的参数及其值，可以使用以下代码：
const params = new URLSearchParams(window.location.search);
params.forEach((value, key) => {
console.log(key, value);
});
这段代码会遍历所有的查询参数，打印出每个参数的名称和值。
二、直接解析URL
在一些特定的情况下，如果你想要更底层或者更灵活的处理URL，可能就需要自己手动解析URL中的查询字符串了。
解析查询字符串
一个典型的URL解析过程涉及到分割字符串、循环遍历各部分，然后从中提取出你需要的信息：
function getQueryParam(url, paramName) {
const queryString = url.split('?')[1];
if (queryString) {
const params = queryString.split('&');
for (let param of params) {
const pAIr = param.split('=');
if (pair[0] === paramName) {
return pair[1];
}
}
}
return null;
}
const value = getQueryParam(window.location.href, 'paramName');
这段代码首先获取URL的查询字符串部分，然后将其拆分为单独的参数。对于每个参数，它再次拆分为键和值，然后检查键是否匹配所需的参数名。如果找到匹配的，就返回该参数的值。
三、使用第三方库
对于某些项目，特别是当你已经在使用像是jQuery这样的库时，利用这些库自带的工具来获取GET请求参数也是一个很好的选择。
jQuery示例
const value = $.url('?paramName');
jQuery通过插件或者简洁的语法提供了获取URL参数的功能。上述代码示例展示了如何使用jQuery插件轻松获取URL参数的值。需要注意的是，这要求你已经在项目中引入了jQuery及相关插件。
结论
在JavaScript程序中接收GET请求参数并不复杂。建议首选使用URLSearchParams，因为它是现代Web开发的标准做法，易于理解和使用，且在大多数现代浏览器中都得到了良好的支持。对于需要兼容旧浏览器的场景，或者需要更复杂处理的场合，你可能需要考虑直接解析URL或使用第三方库。无论哪种方式，重要的是选择最适合你项目需求的方法。
相关问答FAQs：
问题1：如何在 JavaScript 程序中获取 GET 请求的参数？
要在 JavaScript 中获取 GET 请求的参数，可以使用浏览器提供的 URLSearchParams 对象来解析 URL 中的参数。你可以通过以下方法进行操作：
- 首先，获取当前页面的 URL，可以使用
window.location对象的search属性或者URL构造函数。 - 其次，使用
URLSearchParams对象来解析 URL 的查询字符串。你可以通过创建新的URLSearchParams实例，并将 URL 的查询字符串作为参数传入。 - 然后，通过
get()方法获取指定参数的值。你可以以参数名作为get()方法的参数，并将其值存储在变量中进行进一步的处理。
以下是一个示例代码：
// 获取当前页面的 URL 查询字符串
const queryString = window.location.search;
// 解析 URL 查询字符串
const params = new URLSearchParams(queryString);
// 获取指定参数的值
const name = params.get('name');
const age = params.get('age');
请注意，以上代码中的 name 和 age 是你期望从 URL 查询字符串中获取的参数名，你可以根据实际情况进行修改。另外，如果 URL 查询字符串中存在多个相同的参数名，get() 方法只会返回第一个匹配的值。如果你需要获取所有匹配的值，可以使用 getAll() 方法来代替。
