js怎么获取当前页面url

在JavaScript中获取当前页面的URL的方法有多种，其中最常用的是使用 window.location 对象。 通过 window.location 对象，我们可以获取当前页面的完整URL、协议、主机名、路径等多种信息。使用 window.location.href、解析URL对象、使用第三方库 是获取当前页面URL的几种主要方式。下面将详细介绍如何使用这些方法来获取当前页面的URL，以及在不同场景下的应用。

一、使用 window.location.href

使用 window.location.href 是获取当前页面URL最简单、最常用的方法。window.location 对象包含了当前页面的URL信息，通过访问其 href 属性，可以直接获取当前页面的完整URL。

const currentURL = window.location.href;
console.log(currentURL);

window.location.href 返回的是一个字符串，包含了当前页面的完整URL，包括协议、主机名、端口号（如果有的话）、路径以及查询参数等。

1、获取URL的各个组成部分

window.location 对象不仅可以获取完整URL，还可以获取URL的各个组成部分，如协议、主机名、路径等。

console.log(window.location.protocol); // 协议，例如 "http:" 或 "https:"
console.log(window.location.hostname); // 主机名，例如 "www.example.com"
console.log(window.location.port);     // 端口号，例如 "80" 或 "443"
console.log(window.location.pathname); // 路径，例如 "/path/to/page"
console.log(window.location.search);   // 查询字符串，例如 "?query=string"
console.log(window.location.hash);     // 哈希值，例如 "#section"

通过这些属性，可以方便地获取URL的各个部分，适用于需要分别处理URL各部分信息的场景。

2、使用 window.location.assign 和 window.location.replace

除了获取URL信息外，window.location 对象还提供了两种方法来跳转到新的URL：assign 和 replace。

// assign 会在浏览器历史记录中保留当前页面的记录 window.location.assign("https://www.example.com"); // replace 不会在浏览器历史记录中保留当前页面的记录 window.location.replace("https://www.example.com");

assign 和 replace 的区别在于前者会在浏览器历史记录中保留当前页面的记录，而后者不会。

二、解析 URL 对象

在现代浏览器中，可以使用 URL 对象来解析和操作URL。URL 对象提供了丰富的属性和方法，方便我们对URL进行各种操作。

const url = new URL(window.location.href);
console.log(url.href);       // 完整URL
console.log(url.origin);     // 原点，例如 "https://www.example.com"
console.log(url.protocol);   // 协议
console.log(url.hostname);   // 主机名
console.log(url.port);       // 端口号
console.log(url.pathname);   // 路径
console.log(url.search);     // 查询字符串
console.log(url.hash);       // 哈希值
console.log(url.searchParams); // URLSearchParams 对象

解析URL对象 可以让我们更方便地操作和修改URL的各个部分。特别是 URLSearchParams 对象，可以方便地操作查询字符串。

1、使用 URLSearchParams 操作查询字符串

URLSearchParams 对象提供了丰富的方法来操作查询字符串，包括获取、设置、添加、删除查询参数等。

const params = new URLSearchParams(window.location.search);
console.log(params.get('param1')); // 获取参数 "param1" 的值
params.set('param2', 'value2');    // 设置参数 "param2" 的值
params.append('param3', 'value3'); // 添加参数 "param3"
params.delete('param4');           // 删除参数 "param4"
console.log(params.toString());    // 转换为查询字符串

通过 URLSearchParams 对象，可以方便地操作查询字符串，适用于需要动态修改查询参数的场景。

三、使用第三方库

在一些复杂的应用中，可能需要使用第三方库来处理URL。这些库通常提供了更加丰富和方便的方法来操作URL，例如 qs 和 query-string。

1、使用 qs 库

qs 是一个常用的库，用于解析和字符串化查询字符串。可以通过 npm 或 yarn 安装该库。

npm install qs

使用 qs 库解析查询字符串：

const qs = require('qs');
const query = window.location.search.substring(1); // 移除 "?"
const params = qs.parse(query);
console.log(params);

使用 qs 库字符串化查询对象：

const queryString = qs.stringify({ param1: 'value1', param2: 'value2' });
console.log(queryString);

2、使用 query-string 库

query-string 是另一个常用的库，用于解析和字符串化查询字符串。可以通过 npm 或 yarn 安装该库。

npm install query-string

使用 query-string 库解析查询字符串：

const queryString = require('query-string');
const params = queryString.parse(window.location.search);
console.log(params);

使用 query-string 库字符串化查询对象：

const queryString = require('query-string');
const query = queryString.stringify({ param1: 'value1', param2: 'value2' });
console.log(query);

四、综合应用场景

在实际开发中，获取当前页面URL以及操作URL的各个部分是非常常见的需求。我们可以结合上述方法，根据具体需求选择合适的方式来处理URL。

1、动态修改查询参数

在单页应用（SPA）中，可能需要根据用户操作动态修改查询参数，以便在刷新页面或分享链接时保留当前状态。

const params = new URLSearchParams(window.location.search);
params.set('page', '2');
params.set('sort', 'asc');
window.history.replaceState({}, '', `${window.location.pathname}?${params}`);

通过修改 window.history 对象，可以在不刷新页面的情况下，更新当前URL的查询参数。

2、解析和处理复杂URL

在一些复杂的应用中，可能需要解析和处理复杂的URL，例如处理多级路径、动态路由等。

const url = new URL(window.location.href);
const pathSegments = url.pathname.split('/').filter(segment => segment);
console.log(pathSegments);

通过解析路径，可以获取路径的各个部分，适用于需要根据路径动态加载内容的场景。

3、使用第三方库简化操作

在一些需要频繁操作查询字符串的场景中，使用第三方库可以大大简化代码，提高开发效率。

const qs = require('qs');
const params = qs.parse(window.location.search.substring(1));
params.page = 2;
params.sort = 'asc';
const queryString = qs.stringify(params);
window.history.replaceState({}, '', `${window.location.pathname}?${queryString}`);

通过使用第三方库，可以更加方便地解析和字符串化查询对象，适用于需要处理复杂查询参数的场景。

五、总结

在JavaScript中获取当前页面的URL及其各个部分，有多种方法可以选择。使用 window.location.href 是最简单和常用的方式，解析 URL 对象可以更加灵活地操作URL的各个部分，使用第三方库可以大大简化对查询字符串的操作。根据具体需求，选择合适的方法可以提高开发效率，减少代码复杂度。希望本文能够帮助你更好地理解和应用这些方法，在实际开发中解决相关问题。