`URL.createObjectURL(blob)` 和 `URL` 对象的区别

news2024/11/23 6:20:26

URL.createObjectURL(blob) 和 URL 对象虽然都与URL相关，但它们有不同的用途和功能。让我们详细了解一下它们的区别：

`URL` 对象

URL 对象用于解析和操作URL。它提供了丰富的属性和方法来处理URL的各个部分，如协议、主机名、路径、查询参数等。URL 对象主要用于解析和构建标准的URL字符串。

主要属性和方法

属性：
- href：完整的URL字符串。
- protocol：URL的协议部分（例如，http:、https:）。
- host：主机名和端口号（如果有）。
- hostname：主机名。
- port：端口号（如果没有端口号，则为空字符串）。
- pathname：路径部分。
- search：查询字符串，包括问号（?）。
- searchParams：一个 URLSearchParams 对象，用于处理查询参数。
- hash：锚点部分，包括井号（#）。
方法：
- toString()：返回URL的字符串表示形式，等同于 href 属性。
- toJSON()：返回URL的字符串表示形式，等同于 href 属性。此方法主要用于JSON序列化。

`URL.createObjectURL(blob)`

URL.createObjectURL(blob) 方法用于创建一个指向 Blob 对象或 File 对象的URL。这个URL是一个临时的、唯一的字符串，可以在网页中作为资源的引用，例如 <img> 标签的 src 属性或 <a> 标签的 href 属性。这个URL在页面卸载或 revokeObjectURL 被调用时会被自动释放。

主要用途

创建临时URL：用于在网页中直接使用二进制数据，而不需要将其上传到服务器。
资源引用：可以用于显示图片、播放音频或视频、下载文件等。

示例

// 创建一个包含文本的Blob对象
const text = "Hello, world!";
const blob = new Blob([text], { type: "text/plain" });

// 创建一个指向Blob对象的URL
const url = URL.createObjectURL(blob);

// 使用这个URL作为<a>标签的href属性，提供下载链接
const link = document.createElement('a');
link.href = url;
link.download = 'hello.txt';
link.textContent = 'Download Text File';
document.body.appendChild(link);

// 使用完毕后，释放URL
link.addEventListener('click', () => {
  URL.revokeObjectURL(url);
});

区别总结

用途不同：
- URL 对象用于解析和操作标准的URL字符串。
- URL.createObjectURL(blob) 用于创建一个指向 Blob 或 File 对象的临时URL，以便在网页中直接使用二进制数据。
返回值不同：
- URL 对象返回一个URL实例，可以通过其属性和方法进一步操作URL。
- URL.createObjectURL(blob) 返回一个字符串，表示一个临时的、唯一的URL。
生命周期不同：
- URL 对象创建的URL是持久的，不会自动释放。
- URL.createObjectURL(blob) 创建的URL是临时的，会在页面卸载或调用 URL.revokeObjectURL(url) 时被释放。