如何使用 JavaScript 获取 URL 参数？

在本文中，我们将学习如何在 Javascript 中获取 URL 参数，并通过示例了解它们的实现。

要获取 URL 参数，有两种方法：

• 通过使用 URLSearchParams 对象
• 通过使用分离和访问每个参数对

方法一：使用 URLSearchParams 对象

URLSearchParams 是一个接口，用于提供可用于处理 URL 的方法。 URL字符串首先被分离以仅获取 URL 的参数部分。 split() 方法用于带有“？”的给定 URL分隔器。它将字符串分成两部分。仅使用参数选择第二部分。然后将其传递给 URLSearchParams 构造函数。

该对象的entries()方法返回一个带有键/值对的迭代器。然后可以通过访问该对的第一个索引来检索该对的关键部分，并且可以通过访问第二个索引来检索该值。这可以用来获取URL中所有可以根据需要使用的参数。

句法：

let paramString = urlString.split('?')[1];
let queryString = new URLSearchParams(paramString);

for (let pair of queryString.entries()) {
   console.log("Key is: " + pair[0]);
   console.log("Value is: " + pair[1]);
}

示例：此示例说明了使用 URLSearchParams 对象来获取 URL 参数。

HTML

  

    How To Get URL Parameters using JavaScript?

  

    
        GeeksforGeeks
     
    
        How To Get URL Parameters
        With JavaScript?
    
     The url used is: 
https://www.example.com/login.php? a=GeeksforGeeks&b=500&c=Hello Geeks 
    
  
     Click on the button to get the url parameters in the console. 
  
     Get URL parameters 
    
    function getParameters() {
        let urlString = 
"https://www.example.com/login.php?a=GeeksforGeeks&b=500&c=Hello Geeks";
        let paramString = urlString.split('?')[1];
        let queryString = new URLSearchParams(paramString);
        for(let pair of queryString.entries()) {
            console.log("Key is:" + pair[0]);
            console.log("Value is:" + pair[1]);
        }
    }
    

  

输出：

entry() 方法

方法2：分离和访问每个参数对

查询字符串首先被分离以仅获取字符串的参数部分。 split() 方法用于带有“？”的给定 URL分隔器。这会将 URL 分成 2 部分，并且仅使用参数选择第二部分。再次使用 split() 方法将该字符串分隔为参数，其中“&”作为分隔符。这会将每个参数字符串分成一个数组。

该数组循环遍历每个键，值通过拆分以“=”作为分隔符进行分隔。它将这些对分成一个数组。可以通过访问该对的第一个索引来检索该对的关键部分，并且可以通过访问第二个索引来检索该值。这可以用来获取URL中所有可以根据需要使用的参数。

句法：

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');

for (let i = 0; i < params_arr.length; i++) {
   let pair = params_arr[i].split('=');
   console.log("Key is:", pair[0]);
   console.log("Value is:", pair[1]);
}

示例：此示例说明了每个参数对的单独访问。

HTML

  

     How To Get URL Parameters using JavaScript? 

  

    
        GeeksforGeeks
     
        How To Get URL Parameters
        With JavaScript?
    
     The url used is: 
https://www.example.com/login.php? a=GeeksforGeeks&b=500&c=Hello Geeks 
    
  
     Click on the button to get the url parameters in the console. 
  
     Get URL parameters 
    
    function getParameters() {
        let urlString = 
"https://www.example.com/login.php?a=GeeksforGeeks&b=500&c=Hello Geeks";
        let paramString = urlString.split('?')[1];
        let params_arr = paramString.split('&');
        for(let i = 0; i < params_arr.length; i++) {
            let pair = params_arr[i].split('=');
            console.log("Key is:" + pair[0]);
            console.log("Value is:" + pair[1]);
        }
    }
    

  

输出：