js如何取url

2025-10-20 21:03:29 世界杯视频回放

在JavaScript中，可以通过多种方法获取URL，包括window.location、URL对象和各种属性。通过这些方法，你可以获取整个URL、协议、主机名、路径等。

window.location.href 是最常用的方法之一，它可以直接返回当前页面的完整URL。此外，window.location对象还提供了其他属性，如 protocol、hostname、pathname 和 search，分别用于获取协议、主机名、路径名和查询字符串。URL对象则是另一种强大且灵活的方法，它允许你通过构造函数创建一个新的URL实例，从而访问和操纵URL的各个组成部分。

一、使用window.location对象

window.location对象是获取当前页面URL及其各个部分的最常用方法。这个对象包含了多个属性，可以分别获取URL的不同部分。

1.1 window.location.href

window.location.href 是获取当前页面完整URL的最简单方法。例如：

let currentUrl = window.location.href;

console.log(currentUrl); // 输出完整的URL

1.2 window.location.protocol

window.location.protocol 返回URL的协议部分，例如：http: 或 https:。

let protocol = window.location.protocol;

console.log(protocol); // 输出: http: 或 https:

1.3 window.location.hostname

window.location.hostname 返回URL的主机名，例如：www.example.com。

let hostname = window.location.hostname;

console.log(hostname); // 输出: www.example.com

1.4 window.location.pathname

window.location.pathname 返回URL的路径部分，例如：/path/to/page。

let pathname = window.location.pathname;

console.log(pathname); // 输出: /path/to/page

1.5 window.location.search

window.location.search 返回URL的查询字符串部分，例如：?query=123。

let search = window.location.search;

console.log(search); // 输出: ?query=123

二、使用URL对象

URL对象是一种更强大且灵活的方法来解析和操纵URL。在现代浏览器中，你可以通过URL构造函数创建一个新的URL实例。

2.1 创建URL对象

你可以通过URL构造函数创建一个新的URL实例。这个实例允许你访问和修改URL的各个部分。例如：

let url = new URL('https://www.example.com/path/to/page?query=123');

2.2 URL.protocol

URL.protocol 返回URL的协议部分，例如：http: 或 https:。

let protocol = url.protocol;

console.log(protocol); // 输出: https:

2.3 URL.hostname

URL.hostname 返回URL的主机名，例如：www.example.com。

let hostname = url.hostname;

console.log(hostname); // 输出: www.example.com

2.4 URL.pathname

URL.pathname 返回URL的路径部分，例如：/path/to/page。

let pathname = url.pathname;

console.log(pathname); // 输出: /path/to/page

2.5 URL.search

URL.search 返回URL的查询字符串部分，例如：?query=123。

let search = url.search;

console.log(search); // 输出: ?query=123

三、解析查询字符串

查询字符串包含在URL中以问号（?）开头，后面跟随键值对。你可以使用URLSearchParams对象来解析查询字符串。

3.1 使用URLSearchParams解析查询字符串

URLSearchParams对象提供了一种简便的方法来解析和操作查询字符串。例如：

let url = new URL('https://www.example.com/path/to/page?query=123&name=JohnDoe');

let params = new URLSearchParams(url.search);

// 获取查询参数的值

let queryValue = params.get('query');

console.log(queryValue); // 输出: 123

let nameValue = params.get('name');

console.log(nameValue); // 输出: JohnDoe

四、修改URL

你不仅可以获取URL的各个部分，还可以使用JavaScript来修改URL。这在单页面应用程序（SPA）和动态网页中非常有用。

4.1 修改URL的路径

你可以通过修改window.location.pathname来改变URL的路径。例如：

window.location.pathname = '/new/path';

console.log(window.location.href); // 输出修改后的URL

4.2 修改URL的查询字符串

你可以通过URLSearchParams对象来修改URL的查询字符串。例如：

let url = new URL(window.location.href);

let params = new URLSearchParams(url.search);

// 添加或修改查询参数

params.set('query', '456');

url.search = params.toString();

console.log(url.href); // 输出修改后的URL

五、总结

JavaScript提供了多种方法来获取和操作URL。其中，window.location对象是最常用的方法，它提供了获取URL及其各个部分的属性。URL对象则提供了更强大且灵活的方式来解析和操纵URL。通过这些方法，你可以轻松地获取和修改URL的各个部分，以满足不同的需求。

推荐使用PingCode和Worktile进行项目管理和团队协作，因为它们提供了强大的功能和灵活的配置，能够有效提高团队的协作效率和项目的管理水平。