JavaScript 获取 URL361

在编写 JavaScript 代码时，我们经常需要获取当前 URL 以便进行各种操作，例如：

检查当前页面是否与特定 URL 匹配
获取页面中资源（如图像、脚本）的完整 URL
将数据发送到服务器端，该服务器端将基于 URL 路径执行不同的操作
创建到当前页面的书签或链接

JavaScript 提供了几种方法来获取 URL：

对象表示当前的 URL，可以通过以下属性访问：

href：获取或设置完整的 URL
protocol：获取或设置 URL 协议（例如，http 或 https）
host：获取或设置主机名和端口号（例如，:80）
hostname：获取或设置主机名（例如，）
port：获取或设置端口号（例如，80）
pathname：获取或设置路径（例如，/path/to/file）
search：获取或设置查询字符串（例如，?query=string）
hash：获取或设置哈希（例如，#hash）

例如：

const url = ;
(url); // /path/to/file?query=string#hash

属性返回当前文档的完整 URL，与相同。

const url = ;
(url); // /path/to/file?query=string#hash

3. URLSearchParams

URLSearchParams 接口允许我们获取和设置查询字符串参数。它可以与结合使用。

const url = ;
const params = new URLSearchParams(url);
const query = ('query');
(query); // string

4. ()

() 方法允许我们设置新的 URL。这与使用相同。

(''); // 导航到新的 URL

5. history API

History API（history 对象）提供了一种以编程方式控制浏览器历史记录和导航的方法。我们可以使用 () 和 () 方法来修改 URL 而无需重新加载页面。

({ foo: 'bar' }, 'Title', '/new-url'); // 将新 URL 推入历史记录
({ foo: 'bar' }, 'Title', '/new-url'); // 替换当前 URL

通过了解 JavaScript 获取 URL 的不同方法，我们可以在 Web 开发中灵活地操作 URL。这使我们能够构建基于 URL 的动态应用程序，并向用户提供一致的导航体验。

2024-12-23

上一篇：JavaScript 的本质理解：动力引擎下的灵活语言

下一篇：JavaScript 编程指南：从初学者到高级