URL

[TOC]

索引

属性：

与 Location 属性一致
href：https://example.com:8080/path?q=1#hash，获取或设置完整的 URL。修改会触发页面跳转。
protocol：https:，URL 的协议（含 :）。修改可能触发跳转。
hostname：example.com，域名部分。修改会跳转到新域名。
port：8080，端口号（字符串形式）。若无则为空。修改会跳转到新端口。
host：example.com:8080，域名 + 端口（若端口非默认）。修改会跳转。
pathname：/path/，路径部分（以 / 开头）。修改会跳转到新路径。
search：?q=1，查询字符串（含 ?）。修改会重新加载页面。
hash：#hash，哈希部分（含 #），用于页面锚点。修改不会重载页面，但会记录历史。
origin：https://example.com:8080，只读，协议 + 域名 + 端口。
特有属性：
url.searchParams：URLSearchParams，返回专门用于操作 URL 查询参数的 URLSearchParams 对象（即 ? 后的键值对）。

方法：

new URL()：(urlString,baseUrlString?)，用于创建并解析一个 URL 对象，提供对 URL 各组成部分的标准化访问和操作。
URL.createObjectURL()：(object)，用于为 Blob 或 File 对象生成临时 URL 的方法，允许在浏览器中直接引用本地文件或内存中的数据（如图片、视频、二进制流等）。
URL.revokeObjectURL()：(objectURL)，用于释放由 URL.createObjectURL() 生成的临时 URL 所占用的内存，避免内存泄漏。

URL

属性

与 Location 属性一致
href：https://example.com:8080/path?q=1#hash，获取或设置完整的 URL。修改会触发页面跳转。
protocol：https:，URL 的协议（含 :）。修改可能触发跳转。
hostname：example.com，域名部分。修改会跳转到新域名。
port：8080，端口号（字符串形式）。若无则为空。修改会跳转到新端口。
host：example.com:8080，域名 + 端口（若端口非默认）。修改会跳转。
pathname：/path/，路径部分（以 / 开头）。修改会跳转到新路径。
search：?q=1，查询字符串（含 ?）。修改会重新加载页面。
hash：#hash，哈希部分（含 #），用于页面锚点。修改不会重载页面，但会记录历史。
origin：https://example.com:8080，只读，协议 + 域名 + 端口。
特有属性：
url.searchParams：URLSearchParams，返回专门用于操作 URL 查询参数的 URLSearchParams 对象（即 ? 后的键值对）。

方法

new URL()

new URL()：(urlString,baseUrlString?)，用于创建并解析一个 URL 对象，提供对 URL 各组成部分的标准化访问和操作。

urlString：string，要解析的 URL 字符串，可以是绝对路径或相对路径。
baseUrlString?：string，当 urlString 为相对路径时，必须提供基础地址（否则抛出错误）。
返回：
url：URL，返回一个包含解析后 URL 信息的对象。

特性：

参数行为详解：

仅传递绝对 URL

// 直接传入完整 URL
const absoluteURL = new URL("https://example.com/path?q=1");

传递相对 URL + 基地址：将相对路径与基地址合并，生成完整 URL。

// 基于基地址解析相对路径
const base = "https://example.com";
const relativeURL = new URL("/about", base); // 完整 URL: https://example.com/about

自动编码/解码：URL 对象自动处理特殊字符的编码和解码，避免手动操作。

const url = new URL("https://example.com");
url.pathname = "/path with space"; // 自动转为 "/path%20with%20space"
console.log(url.href); // "https://example.com/path%20with%20space"

操作查询参数 searchParams：通过 url.searchParams 便捷操作查询参数。

const url = new URL("https://example.com?name=John");
url.searchParams.append("age", "30");
console.log(url.href); // "https://example.com?name=John&age=30"

动态修改 URL 属性：直接修改对象的属性值会同步更新 href。

const url = new URL("https://example.com");
url.protocol = "http:";      // 修改协议
url.hostname = "test.com";  // 修改域名
console.log(url.href);      // "http://test.com/"

必填的基地址：若 urlString 是相对路径且未提供 baseURLString，会抛出错误：
js
```
// 错误示例（缺少基地址）
new URL("/about"); // TypeError: Invalid URL
```
1
2
对比 location：
- new URL() 创建的是独立对象，不会影响页面 URL 或触发导航。
- location 对象表示当前页面 URL，修改其属性会触发页面跳转。

示例：

解析绝对 URL：

const url = new URL("https://www.google.com:8080/search?q=js#docs");
console.log(url.hostname); // "www.google.com"
console.log(url.port);     // "8080"
console.log(url.hash);     // "#docs"

基于基地址解析相对路径：

const base = "https://example.com/api/v1";
const endpoint = new URL("users?id=5", base);
console.log(endpoint.href); // "https://example.com/api/v1/users?id=5"

错误处理（无效 URL）：

try {
  const invalidURL = new URL("invalid-url"); // 缺少协议且无基地址
} catch (err) {
  console.error("错误:", err.message); // 输出：TypeError: Invalid URL
}

createObjectURL()

URL.createObjectURL()：(object)，用于为 Blob 或 File 对象生成临时 URL 的方法，允许在浏览器中直接引用本地文件或内存中的数据（如图片、视频、二进制流等）。

object：Blob|File|MediaSource，需要生成 URL 的文件或二进制数据对象（如用户上传的文件、内存中的 Blob）
返回：
url：string，返回一个指向 object 的临时 URL（格式如 blob:https://example.com/550e8400-e29b-41d4-a716-446655440000）。

特性：

核心用途：将文件或二进制数据转换为可在浏览器中直接使用的 URL。常用于：
- 预览用户上传的图片/视频（无需上传到服务器）。
- 处理 WebRTC 或 MediaRecorder API 生成的媒体流。
- 动态加载内存中的二进制数据（如通过 fetch 获取的 Blob 数据）。
内存管理：生成的 URL 会占用内存，需手动调用 URL.revokeObjectURL(objectURL) 释放资源，避免内存泄漏。
js
```
// 释放 URL 资源
URL.revokeObjectURL(objectURL);
```
1
2
临时性：
- 生成的 URL 仅在当前文档生命周期内有效（页面关闭或刷新后自动失效）。
- 已释放（revoke）的 URL 立即失效，引用它的元素（如 <img>）会显示空白。
安全限制：
- 临时 URL 仅在当前浏览器上下文中有效，无法跨域共享。
- 无法直接通过 fetch(objectURL) 获取数据（需通过 blob 响应类型处理）。
兼容性：对于旧版浏览器，可使用 FileReader.readAsDataURL() 替代（返回 Data URL，但性能较差）。

对比 readAsDataURL() ：

特性	`URL.createObjectURL()`	`FileReader.readAsDataURL()`
返回值	临时 URL（`blob:...`）	Base64 编码的 Data URL（`data:...`）
性能	高效（直接引用内存/文件）	低效（需编码为长字符串）
内存管理	需手动释放	自动释放
适用场景	大文件预览、媒体播放	小文件内联（如直接在 HTML 中嵌入图片）错误处理

错误处理：若传入无效参数（如非 Blob 或 File 对象），浏览器会抛出 TypeError：

try {
  URL.createObjectURL("invalid-data"); // 错误：参数不是 Blob/File
} catch (err) {
  console.error("生成 URL 失败:", err);
}

示例：

预览用户上传的图片：

// 用户选择文件后触发
document.getElementById("fileInput").addEventListener("change", function(e) {
  const file = e.target.files[0]; // 获取用户上传的 File 对象
  if (file) {
    const objectURL = URL.createObjectURL(file); // 生成临时 URL
    const img = document.createElement("img");
    img.src = objectURL; // 直接显示图片
    document.body.appendChild(img);
    
    // 使用完毕后释放内存（重要！）
    img.onload = () => URL.revokeObjectURL(objectURL);
  }
});

为 Blob 数据生成 URL：

// 创建一个文本文件的 Blob
const textBlob = new Blob(["Hello, World!"], { type: "text/plain" });
const blobURL = URL.createObjectURL(textBlob);

// 创建链接供用户下载
const link = document.createElement("a");
link.href = blobURL;
link.download = "hello.txt";
link.textContent = "下载文件";
document.body.appendChild(link);

// 点击后释放内存
link.onclick = () => URL.revokeObjectURL(blobURL);

revokeObjectURL()

URL.revokeObjectURL()：(objectURL)，用于释放由 URL.createObjectURL() 生成的临时 URL 所占用的内存，避免内存泄漏。

objectURL：string，由 URL.createObjectURL() 生成的临时 URL 字符串。
特性：
1. 行为说明：
  - 释放内存：撤销对 objectURL 的引用，允许浏览器回收相关内存。
  - 失效性：调用后，objectURL 立即失效，任何使用该 URL 的元素（如 <img>、<video>）将无法加载资源，图片会变为空白。
  - 静默处理：若 objectURL 无效或已被撤销，浏览器会静默忽略，不会抛出错误。
2. 及时释放：忘记释放会导致内存占用持续增长，一旦不再需要临时 URL（如资源已加载、文件已下载），立即调用 revokeObjectURL()。
  js
```
// 多次上传文件生成 URL 但未释放 → 内存泄漏！
fileInput.addEventListener("change", (e) => {
  const file = e.target.files[0];
  const url = URL.createObjectURL(file);
  // 未调用 revokeObjectURL(url)
});
```
  1
  2
  3
  4
  5
  6
3. 避免过早释放：确保 objectURL 在需要时可用，避免过早释放。
  js
```
const url = URL.createObjectURL(blob);
someAsyncOperation().then(() => {
  // 异步操作完成后可能已释放 URL → 错误！
  element.src = url; 
});
URL.revokeObjectURL(url); // 错误：此处过早释放
```
  1
  2
  3
  4
  5
  6
示例：
1. 图片预览后释放内存：见 createObjectURL()
2. 下载文件后释放内存：见 createObjectURL()

URL ​

索引 ​

URL ​

属性 ​

方法 ​

new URL() ​

createObjectURL() ​

revokeObjectURL() ​

URL

索引

URL

属性

方法

new URL()

createObjectURL()

revokeObjectURL()