JS URL对象详细介绍

JavaScript中的URL对象提供了一种方便的方式来操作URL字符串。可以使用URL对象来解析URL、创建新的URL和修改现有的URL。以下是URL对象的详细介绍：

创建URL对象

可以使用URL构造函数来创建一个新的URL对象。构造函数有两个参数：URL字符串和基本URL字符串。如果基本URL字符串没有提供，则假定为当前页面的URL。

下面是一个创建URL对象的例子：

let url = new URL('https://www.example.com/path?query=value#fragment');

获取URL的各个部分

URL对象提供了许多属性，用于获取URL的各个部分。以下是一些常用的属性：

• href：完整的URL字符串。
• origin：URL的协议、域名和端口部分。
• protocol：URL的协议部分。
• host：URL的域名和端口部分。
• hostname：URL的域名部分。
• port：URL的端口部分。
• pathname：URL的路径部分。
• search：URL的查询部分（以问号“?”开头）。
• hash：URL的片段部分（以井号“#”开头）。

以下是一个获取URL各个部分的例子：

console.log(url.href); // <https://www.example.com/path?query=value#fragment>
console.log(url.origin); // <https://www.example.com>
console.log(url.protocol); // https:
console.log(url.host); // www.example.com
console.log(url.hostname); // www.example.com
console.log(url.port); // (空字符串)
console.log(url.pathname); // /path
console.log(url.search); // ?query=value
console.log(url.hash); // #fragment

修改URL的各个部分

URL对象的属性是可写的，这意味着可以使用它们来修改URL的各个部分。以下是一些修改URL的例子：

url.protocol = 'http:';
url.host = 'example.com:8080';
url.pathname = '/newpath';
url.search = '?newquery=value';
url.hash = '#newfragment';
console.log(url.href); // http://example.com:8080/newpath?newquery=value#newfragment

解析URL查询参数

URL对象提供了一个方便的方法来解析URL查询参数。使用URLSearchParams对象可以轻松地获取和设置查询参数。以下是一个解析URL查询参数的例子：

let params = new URLSearchParams(url.search);
console.log(params.get('query')); // value
params.set('newquery', 'newvalue');
console.log(params.toString()); // newquery=newvalue

以上就是JavaScript中URL对象的详细介绍。