js location.search(JavaScript获取URL参数)

什么是URL参数？

在Web开发中，URL参数通常是从目标页面中获取信息的最常用方法。URL参数是指通过在URL中链接的查询字符串传递给服务器的值。例如，在以下URL中，查询字符串是"id=123"：www.example.com/products?id=123。

JavaScript中的location.search方法

location.search是JavaScript中一个内置的方法，可以返回URL中查询字符串的部分。查询字符串是以问号(?)开头，然后是一些键值对，每个键值对之间用&连接。例如，在以下URL中，查询字符串是"?id=123"：www.example.com/products?id=123。

有了location.search方法，我们可以使用JavaScript获取URL参数。例如，在以下URL中，我们需要获取"id"参数的值：

www.example.com/products?id=123&name=apple。使用location.search方法，我们可以像这样获取"id"参数：

  const searchParams = new URLSearchParams(location.search);
  const id = searchParams.get('id');
  console.log(id); // "123"

支持和降级

location.search方法在所有现代浏览器中都得到支持，包括Chrome、Firefox、Safari和Edge等。然而，如果你想在一个旧版本的Internet Explorer浏览器中使用location.search方法，你需要手动编写代码去支持该方法。

如果location.search方法不受支持，你可以使用其他方法来获取URL参数。通常，URL参数可以使用正则表达式来获取。例如，以下函数使用正则表达式从URL中获取参数：

  function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
    var results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
  }
  const id = getParameterByName('id', window.location.href);
  console.log(id); // "123"

使用URLSearchParams API

在现代浏览器中，URLSearchParams API提供了更方便的方式来获取URL参数。这个API可以将URL查询字符串解析为一个键值对的列表，并提供了许多方便的方法来操作这个列表。

以下是一些URLSearchParams API的使用示例：

  const searchParams = new URLSearchParams(window.location.search);
  console.log(searchParams.has('id')); // true
  console.log(searchParams.get('id')); // "123"
  console.log(searchParams.getAll('id')); // ["123"]
  console.log(searchParams.toString()); // "?id=123&name=apple"
  console.log(searchParams.append('type', 'fruit')); // "?id=123&name=apple&type=fruit"

总结

location.search是一个方便的JavaScript函数，可以使我们在浏览器中获取URL参数。如果你想在旧版本的Internet Explorer中使用location.search方法，你可以手动编写代码，或者使用正则表达式来获取URL参数。在现代浏览器中，URLSearchParams API提供了更方便的方式来获取URL参数，并提供了许多方便的方法来操作这个列表。