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

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);
});

区别总结

1. 用途不同：

   • URL 对象用于解析和操作标准的URL字符串。
   • URL.createObjectURL(blob) 用于创建一个指向 Blob 或 File 对象的临时URL，以便在网页中直接使用二进制数据。

2. 返回值不同：

   • URL 对象返回一个URL实例，可以通过其属性和方法进一步操作URL。
   • URL.createObjectURL(blob) 返回一个字符串，表示一个临时的、唯一的URL。

3. 生命周期不同：

   • URL 对象创建的URL是持久的，不会自动释放。
   • URL.createObjectURL(blob) 创建的URL是临时的，会在页面卸载或调用 URL.revokeObjectURL(url) 时被释放。

通过理解这些区别，你可以更好地选择合适的工具来处理不同的URL需求。