Web API 入门指南

URL API (URL 操作)#

URL (Uniform Resource Locator) 是我们访问网页、图片或其他网络资源的地址。Web 开发中经常需要解析或构建 URL。浏览器提供了内置的 URL 对象和 URLSearchParams 接口来简化这些操作。

Tips: URL 接口是处理 URL 的现代标准方式，相比旧的 location 对象属性（如 location.href）或手动字符串处理，它更健壮和易用。

解析 URL#

要解析一个 URL 字符串，最简单的方法是使用 URL 构造函数创建一个 URL 对象实例。之后就可以方便地访问 URL 的各个部分。

通过 URL 对象的这些属性，你可以轻松获取 URL 的协议、主机、端口、路径、查询参数和哈希值等信息。

构建 URL#

除了直接传入 URL 字符串，URL 构造函数还可以接受第二个参数作为基础 URL (base URL)，用于解析相对路径。

const baseUrl = 'https://www.example.com/path/';
const relativeUrl = '../other/page.html';

const absoluteUrl = new URL(relativeUrl, baseUrl);

console.log(absoluteUrl.href); // 输出 'https://www.example.com/other/page.html'

你也可以直接修改 URL 对象的属性来动态构建或修改 URL。

URLSearchParams#

处理 URL 查询参数（? 后面的部分）是一项常见任务。URLSearchParams 接口为此提供了便捷的方法。

你可以直接用查询字符串或者 URL 对象的 search 属性来创建 URLSearchParams 实例。