JS获取几种URL地址的方法小结

在JavaScript中，获取或操作URL地址的方法主要有几种，这里我将简要概述一些常用的方法，并给出相应的示例代码。

### 1. 使用`window.location`对象

`window.location`对象包含了当前页面的URL信息。你可以直接访问其属性来获取URL的不同部分。

- **获取完整的URL**

var url = window.location.href;
console.log(url); // 输出完整的URL

- **获取协议类型（如http/https）**

var protocol = window.location.protocol;
console.log(protocol); // 输出例如：https:

- **获取主机名（包括端口号，如果有的话）**

var hostname = window.location.hostname;
console.log(hostname); // 输出例如：www.example.com

// 如果需要包括端口号
var host = window.location.host;
console.log(host); // 输出例如：www.example.com:8080

- **获取路径名**

var pathname = window.location.pathname;
console.log(pathname); // 输出例如：/path/to/page.html

- **获取查询字符串（URL中"?"后的部分）**

var search = window.location.search;
console.log(search); // 输出例如：?key=value&anotherkey=anothervalue

- **获取哈希值（URL中"#"后的部分）**

var hash = window.location.hash;
console.log(hash); // 输出例如：#section1

### 2. 使用`URL`构造函数（推荐用于解析和构造URL）

`URL`构造函数允许你解析URL字符串，并方便地访问其各个部分。

var myURL = new URL('https://www.example.com:8080/path/to/page.html?key=value#section1');

console.log(myURL.href); // 完整的URL
console.log(myURL.protocol); // 协议
console.log(myURL.hostname); // 主机名
console.log(myURL.port); // 端口号
console.log(myURL.pathname); // 路径名
console.log(myURL.search); // 查询字符串
console.log(myURL.hash); // 哈希值

### 3. 使用`URLSearchParams`处理查询字符串

`URLSearchParams`接口提供了用于处理URL的查询字符串的实用功能。

var searchParams = new URLSearchParams('key=value&anotherkey=anothervalue');

// 获取参数
console.log(searchParams.get('key')); // 输出：value

// 添加或更新参数
searchParams.append('newkey', 'newvalue');
console.log(searchParams.toString()); // 输出：key=value&anotherkey=anothervalue&newkey=newvalue

// 删除参数
searchParams.delete('anotherkey');
console.log(searchParams.toString()); // 输出：key=value&newkey=newvalue

以上就是JavaScript中获取和操作URL地址的一些常用方法。希望这能帮助到你！