# URL API 参考

URL: https://caijiao.org/reference/web-api/url
Source: docs/reference/web-api/url.md
Description: URL API Reference，整理 URL 构造函数、常用属性、查询参数处理、对象 URL、示例和常见错误。

URL API 用于解析、构造、规范化和修改 URL。相比手写字符串拆分，`new URL()` 更适合处理协议、域名、路径、查询参数和 hash。

## 语法

```js
const url = new URL(input, base);
```

## 参数

- `input`：完整 URL 或相对路径。
- `base`：可选，解析相对路径时使用的基础 URL。

## 常用属性

| 属性 | 说明 |
| --- | --- |
| `href` | 完整 URL 字符串 |
| `origin` | 协议、主机和端口 |
| `protocol` | 协议，例如 `https:` |
| `hostname` | 主机名 |
| `pathname` | 路径 |
| `search` | 查询字符串，包含开头的 `?` |
| `searchParams` | `URLSearchParams` 对象 |
| `hash` | 片段标识，包含开头的 `#` |

## 示例

```js
const url = new URL("/search?q=javascript&page=1", "https://caijiao.org");

url.searchParams.set("page", "2");
url.hash = "result";

console.log(url.href);
// https://caijiao.org/search?q=javascript&page=2#result
```

## 常见用法

- 从 `location.href` 中读取当前页面信息。
- 用 `new URL(path, location.origin)` 拼接站内地址。
- 通过 `url.searchParams` 安全读写查询参数。
- 配合 `URL.createObjectURL(blob)` 创建临时下载地址。

## 常见错误

- 直接 `new URL("/path")` 会报错，因为相对路径需要 `base`。
- 手写字符串拼接查询参数容易漏掉 URL 编码，应使用 `URLSearchParams`。
- 用 `URL.createObjectURL()` 创建 Blob URL 后，应在不再使用时调用 `URL.revokeObjectURL()`。

## 相关内容

- [Web API Reference](/reference/web-api/)
- [URLSearchParams](/reference/web-api/urlsearchparams)
- [Blob](/reference/web-api/blob)
- [JavaScript 如何获取 URL 参数](/how-to/javascript/get-url-params)
- [URL Encoder / Decoder](/tool/url-encoder-decoder)
- [MDN URL](https://developer.mozilla.org/en-US/docs/Web/API/URL)