JavaScript 怎样获取 URL 的参数

在Web开发中，经常需要从URL中获取参数来实现各种功能，比如根据用户选择的不同参数展示不同的内容。JavaScript提供了多种方法来获取URL的参数，下面我们就来详细了解一下。

最常见的一种方法是通过解析window.location.search属性。这个属性返回的是URL中问号（?）后面的部分，也就是包含所有参数的字符串。例如，对于URL "https://example.com/page.html?name=John&age=30"，window.location.search的值就是 "?name=John&age=30"。

要获取具体的参数值，我们可以编写一个函数来解析这个字符串。以下是一个简单的示例代码：

function getUrlParams() {
  const params = {};
  const search = window.location.search.substring(1);
  const pairs = search.split('&');
  for (let i = 0; i < pairs.length; i++) {
    const pair = pairs[i].split('=');
    const key = decodeURIComponent(pair[0]);
    const value = decodeURIComponent(pair[1] || '');
    params[key] = value;
  }
  return params;
}
const urlParams = getUrlParams();
console.log(urlParams.name); 
console.log(urlParams.age); 

这种方法可以将参数解析为一个对象，方便我们通过参数名来获取对应的值。

另一种方法是使用URLSearchParams API。这个API提供了更方便的操作URL参数的方法。示例代码如下：

const searchParams = new URLSearchParams(window.location.search);
const name = searchParams.get('name');
const age = searchParams.get('age');
console.log(name);
console.log(age);

这种方法更加简洁直观，而且兼容性也较好。

在实际应用中，我们可以根据具体的需求选择合适的方法来获取URL的参数。无论是构建动态网页还是开发Web应用程序，掌握这些方法都能帮助我们更好地处理URL参数，提升用户体验。在使用时也要注意对参数进行合法性校验和安全处理，以防止潜在的安全风险。熟练掌握JavaScript获取URL参数的方法是Web开发中的一项重要技能。