在前端开发中，我们通常需要从URL中获取参数来执行相应的操作。这个过程涉及到解析URL并提取其中的参数。本文将介绍如何在JavaScript中使用URL的GET参数。
URL格式
一个URL由多个部分组成，包括协议、主机名、路径和查询字符串等。其中查询字符串是用来传递参数的一种方式。它以?为起始标识符，并用&连接多个参数，例如：
http://www.example.com/path/page.html?key1=value1&key2=value2
在上面的URL中，查询字符串是?key1=value1&key2=value2，其中key1和key2是参数名称，value1和value2是参数值。
解析URL
要访问URL的GET参数，我们需要先从当前页面的URL中获取查询字符串。通过JavaScript提供的window.location.search属性可以轻松地实现这一点。该属性返回从问号开始的完整查询字符串，例如：
const queryString = window.location.search; console.log(queryString);
执行上述代码后，控制台输出的内容将是查询字符串的完整值。
提取参数
获取到查询字符串之后，接下来我们需要将其解析出每个参数及其对应的值。这可以通过 JavaScript 中的 URLSearchParams 对象来实现，例如：
const urlParams = new URLSearchParams(queryString);
console.log(urlParams.get('key1')); // 'value1'
console.log(urlParams.get('key2')); // 'value2'这段代码将解析出key1和key2两个参数的值。如果我们希望获取所有参数及其对应的值，可以使用 entries() 方法：
for (const [key, value] of urlParams.entries()) {
console.log(`${key}: ${value}`);
}执行上述代码后，控制台输出的内容将是所有参数及其对应值。
示例代码
下面是一个完整的示例代码，演示如何从当前页面的URL中获取GET参数，并输出它们的值：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------ --- ---------- -- ------------------
-------
------
--------
----- ----------- - -----------------------
----- --------- - --- -----------------------------
-- --- - -------- ---------
----- ----------- - ------------------------
---------------- ----- -- ------ --- -----------------
-- ---- ------- --- ----------
--- ------ ----- ------ -- -------------------- -
-------------------- -----------
-
---------
-------
-------在浏览器中打开此HTML文件，通过URL传递GET参数，例如：http://localhost/sample.html?param1=value1¶m2=value2，然后查看浏览器控制台的输出。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26411