js中怎么使用window.location获取参数

在JavaScript中，我们可以使用window.location对象来获取当前页面的URL，这个对象包含了很多有用的属性和方法，可以帮助我们解析和操作URL，本文将详细介绍如何使用window.location获取URL中的参数。

1. 获取完整的URL

我们需要获取当前页面的完整URL，可以使用window.location.href属性来实现这一点：

var fullUrl = window.location.href;
console.log(fullUrl);

这段代码将输出当前页面的完整URL，包括协议、主机名、端口、路径和查询参数。

2. 解析URL

接下来，我们需要解析URL以获取各个组成部分，可以使用window.location.protocol、window.location.host、window.location.port、window.location.pathname和window.location.search属性来实现这一点：

var protocol = window.location.protocol; // 协议，如http:或https:
var host = window.location.host; // 主机名，如www.example.com
var port = window.location.port; // 端口号，如80或443
var pathname = window.location.pathname; // 路径，如/index.html
var search = window.location.search; // 查询参数，如？key=value&key2=value2

3. 获取查询参数

现在我们已经解析了URL，接下来需要获取查询参数，查询参数是URL中问号（？）后面的部分，通常用于传递额外的信息给服务器，可以使用window.location.search属性来获取查询参数字符串，然后使用正则表达式或字符串方法来解析它：

// 使用正则表达式解析查询参数
var queryParams = {};
var searchParams = new URLSearchParams(search);
for (var key of searchParams.keys()) {
  queryParams[key] = searchParams.get(key);
}
console.log(queryParams);

或者，可以使用以下方法直接解析查询参数字符串：

// 使用字符串方法解析查询参数
function getQueryParams(query) {
  var params = {};
  var pairs = query.split('&');
  for (var i = 0; i < pairs.length; i++) {
    var pair = pairs[i].split('=');
    params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
  }
  return params;
}
var queryParams = getQueryParams(search);
console.log(queryParams);

这两种方法都可以将查询参数解析为一个键值对对象，方便我们在JavaScript中使用。

4. 示例代码

下面是一个完整的示例代码，演示了如何使用window.location获取URL中的参数：

// 获取完整的URL
var fullUrl = window.location.href;
console.log("Full URL:", fullUrl);
// 解析URL的各个组成部分
var protocol = window.location.protocol;
var host = window.location.host;
var port = window.location.port;
var pathname = window.location.pathname;
var search = window.location.search;
console.log("Protocol:", protocol);
console.log("Host:", host);
console.log("Port:", port);
console.log("Pathname:", pathname);
console.log("Search:", search);
// 获取查询参数并解析为键值对对象
function getQueryParams(query) {
  var params = {};
  var pairs = query.split('&');
  for (var i = 0; i < pairs.length; i++) {
    var pair = pairs[i].split('=');
    params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
  }
  return params;
}
var queryParams = getQueryParams(search);
console.log("Query Params:", queryParams);

相关问题与解答：

1、问题：如何在JavaScript中设置查询参数？答案：要设置查询参数，可以修改window.location.search属性的值，要将名为key的参数设置为value，可以执行以下操作：window.location.search = "?key=value";，请注意，这将覆盖现有的查询参数，如果需要添加新的查询参数而不删除现有参数，可以使用URLSearchParams对象来操作查询参数。new URLSearchParams(window.location.search).append('key', 'value');，不要忘记将修改后的搜索字符串赋值回window.location.search属性。