JS代码获取查询参数是可以通过URL、URLSearchParams、正则表达式、Location对象来实现，这四种主要方法都可以获取当前页面URL中的查询字符串参数。其中，URLSearchParams是一个非常方便的现代API，它提供了一系列方法来处理URL中的查询字符串。
例如，使用URLSearchParams，我们可以简单地创建一个该对象的实例，并传入当前页面的URL查询字符串，然后使用get方法获取特定参数的值。这种方法的好处在于它直接、简洁，并且避免了手动解析查询字符串的麻烦。这是一个现代浏览器支持的API，但不支持IE浏览器。
一、使用 URLSearchParams
URLSearchParams是一个内建的浏览器API，它提供了一系列的方法来处理URL查询参数。要使用它，首先需要创建它的一个实例，并将查询字符串作为参数传入。
const paramsString = window.location.search;
const searchParams = new URLSearchParams(paramsString);
接下来，你可以使用get方法获取特定名称的参数值：
const paramValue = searchParams.get('name'); // 假设URL中存在"?name=value"的查询参数
此外，URLSearchParams还提供了其他有用的方法，如has来检查参数是否存在，set来添加或修改参数，delete来删除参数等。
二、使用 Location 对象
Location对象是浏览器内建的一个对象，表示当前页面的URL，并提供了获取查询字符串的属性和方法。
const queryString = window.location.search;
获取到查询字符串后，您可以通过自定义函数来解析这个字符串，提取出您需要的参数值：
function getQueryParam(param) {
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
return urlParams.get(param);
}
这样就可以通过调用getQueryParam('paramName')来获取具体参数的值。
三、使用正则表达式
如果环境不支持URLSearchParams，或者您需要更复杂的查询字符串解析，可以使用正则表达式。首先定义一个函数，用于提取URL中的查询参数：
function getQueryParamByName(name) {
name = name.replace(/[\[\]]/g, "\\$&");
const regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)");
const results = regex.exec(window.location.href);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
这个函数通过传递参数名称，返回对应的值，或者在参数不存在时返回null或空字符串。
四、使用 URL 对象
另外一种现代方法是使用URL对象，它同样提供了解析URL的功能。创建一个新的URL实例，然后通过实例的searchParams属性来获取查询参数：
const currentUrl = new URL(window.location.href);
const searchParams = currentUrl.searchParams;
const paramValue = searchParams.get('name');
这种方法同样简便易用，且相比于Location.search，URL可以用于任何URL，不仅仅是当前页面的。
在实际开发中，选择哪种方法取决于你的需要以及要支持的浏览器。现代浏览器建议使用URLSearchParams或URL对象，为了更好的兼容性，也可以考虑使用正则表达式方法。这些方法都是实现JS代码获取查询参数的有效手段，可以根据项目需求和个人喜好进行选择。
相关问答FAQs：
1. 如何通过前端 JavaScript 代码获取网页中的查询参数？
通过以下步骤，您可以使用前端 JavaScript 代码获取当前网页的查询参数：
- 使用
window.location.search属性获取包含查询参数的完整字符串。 - 使用
URLSearchParams对象或自定义的查询参数解析函数来解析查询参数字符串。 - 使用查询参数的键来获取相应的值，以进行进一步的处理或显示。
2. 是否有现成的JavaScript库可用于简化获取查询参数的过程？
是的，您可以使用一些现成的 JavaScript 库来简化获取查询参数的过程，例如：
query-string库：它提供了方便且易于使用的方法来解析查询参数，并将其转换为 JavaScript 对象。URLSearchParams对象：这是浏览器内置的对象，它提供了一组方法来处理查询参数的解析和操作。
这些库可以帮助您更轻松地处理查询参数，并提供更多的功能选项，如处理复杂的查询字符串和处理编码字符。
3. 如何处理多个相同名称的查询参数？
当查询参数具有相同的名称时，您可以使用不同的方法来处理它们：
- 使用
URLSearchParams对象的getAll()方法，它会返回与指定名称匹配的所有值的数组。 - 使用自定义的查询参数解析函数，将所有匹配的值存储在一个数组中，并对它们进行进一步处理或显示。
您还可以选择仅获取第一个匹配的值，或使用所有匹配的值进行后续处理，具体取决于您的需求。请根据具体情况选择适合您的情况的方法。
