当前位置:首页 > JavaScript

js 实现uuid

2026-04-05 19:52:00JavaScript

生成 UUID 的方法

使用 crypto.randomUUID()

现代浏览器支持 crypto.randomUUID() 方法,直接生成符合 RFC 4122 标准的 UUID v4:

const uuid = crypto.randomUUID();
console.log(uuid); // 输出类似 "d1a3e5f7-9b8c-4d2e-a6f0-3c7b9e8d2a1f"

使用第三方库 uuid

安装 uuid 库(Node.js 或浏览器环境均可):

npm install uuid

代码示例:

import { v4 as uuidv4 } from 'uuid';
const uuid = uuidv4(); // 生成 UUID v4
console.log(uuid);

手动实现 UUID v4

以下是一个简单的 UUID v4 生成函数:

function generateUUID() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        const r = Math.random() * 16 | 0;
        const v = c === 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}

const uuid = generateUUID();
console.log(uuid);

使用 URL.createObjectURL

浏览器环境中可利用 URL.createObjectURL 生成唯一标识符(非标准 UUID):

js 实现uuid

const uuid = URL.createObjectURL(new Blob()).split('/').pop();
console.log(uuid); // 输出类似 "blob:http://origin/550e8400-e29b-41d4-a716-446655440000"

注意事项

  • crypto.randomUUID() 是原生 API,性能最佳且符合标准。
  • 手动实现的 UUID 可能不符合严格的 RFC 4122 规范,适用于简单场景。
  • 生产环境推荐使用 uuid 库,支持多种 UUID 版本和跨平台兼容性。

标签: jsuuid
分享给朋友:

相关文章

js实现拖拽

js实现拖拽

实现拖拽的基本步骤 通过监听鼠标事件(mousedown、mousemove、mouseup)实现拖拽功能。以下是核心代码逻辑: const draggableElement = document.…

js实现选项卡

js实现选项卡

实现选项卡的基本思路 选项卡通常由一组标签和对应的内容面板组成。点击标签时,显示对应的内容面板,隐藏其他面板。实现这一效果需要结合HTML结构、CSS样式和JavaScript交互逻辑。 HTML结…

js实现pdf在线预览

js实现pdf在线预览

使用PDF.js实现PDF在线预览 PDF.js是由Mozilla开发的一个开源JavaScript库,可以在网页中直接渲染PDF文件。以下是实现PDF在线预览的步骤: 引入PDF.js库 在HT…

js树实现

js树实现

树的基本概念 树是一种非线性的数据结构,由节点和边组成。每个节点包含一个值和指向子节点的引用。树的顶部节点称为根节点,没有子节点的节点称为叶节点。 树的实现方式 在JavaScript中,树可以通过…

js图片上传实现

js图片上传实现

图片上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API实现基础图片上传功能。HTML部分需要设置accept="image/…

js实现显示隐藏

js实现显示隐藏

显示隐藏的实现方法 在JavaScript中,实现元素的显示和隐藏可以通过多种方式完成。以下是几种常见的方法: 修改CSS的display属性 通过改变元素的display属性可以在none(隐藏)…