JavaScript中创建GUID/UUID的方法及实现步骤

 更新时间:2025年06月27日 11:11:19   作者:1010n111  
在JavaScript开发中,有时需要生成全局唯一标识符(GUID)或通用唯一识别码(UUID),本文给大家介绍JavaScript中创建GUID/UUID的方法及实现步骤,感兴趣的朋友一起看看吧

JavaScript中创建GUID/UUID的方法

技术背景

在JavaScript开发中,有时需要生成全局唯一标识符(GUID)或通用唯一识别码(UUID)。GUID/UUID是一种由数字和字母组成的标识符,通常为32或36个字符,用于确保在全球范围内的唯一性。这些标识符在数据库、分布式系统、网络通信等领域有着广泛的应用。然而,JavaScript本身并没有直接提供生成GUID/UUID的内置方法,因此需要开发者自己实现或使用第三方库。

实现步骤

1. 使用crypto.randomUUID()

在现代浏览器和JS运行时中,crypto.randomUUID()是生成RFC4122-compliant UUID的标准方法。但该方法仅适用于本地(localhost或127.0.0.1)或通过HTTPS提供服务的页面。

const uuid = crypto.randomUUID();
console.log(uuid);

2. 使用uuid模块

对于旧版平台或非安全上下文,uuid模块是一个不错的选择。它经过了充分的测试和支持,可以生成不同版本的UUID。
安装:

npm install uuid

使用示例:

const { v4: uuidv4 } = require('uuid');
const uuid = uuidv4();
console.log(uuid);

3. 自定义实现

如果不想依赖第三方库,也可以自己实现一个简单的UUID生成函数。以下是一个基于原始答案的实现:

function uuidv4() {
  return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
    (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
  );
}
console.log(uuidv4());

核心代码

自定义UUID生成函数

function uuidv4() {
  return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
    (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
  );
}

使用uuid模块生成UUID

const { v4: uuidv4 } = require('uuid');
const uuid = uuidv4();
console.log(uuid);

最佳实践

  • 优先使用标准方法:如果你的项目运行在支持crypto.randomUUID()的环境中,优先使用该方法,因为它是标准且安全的。
  • 使用成熟的第三方库:对于需要兼容旧版平台或非安全上下文的项目,使用uuid模块可以确保生成的UUID符合RFC4122标准。
  • 避免使用Math.random():基于Math.random()的UUID生成方法不能提供良好的唯一性保证,因此不建议在生产环境中使用。

常见问题

1. crypto.randomUUID()在某些环境中不可用

crypto.randomUUID()仅适用于本地(localhost或127.0.0.1)或通过HTTPS提供服务的页面。如果在其他环境中使用,会导致该方法不可用。此时可以考虑使用uuid模块或自定义实现。

2. 基于Math.random()的UUID生成方法存在碰撞风险

Math.random()生成的随机数质量较低,不能保证生成的UUID的唯一性。因此,在对唯一性要求较高的场景中,应避免使用基于Math.random()的UUID生成方法。

3. 不同版本的UUID有什么区别

根据RFC 4122标准,UUID有不同的版本,常见的有版本1(基于时间)、版本4(基于随机数)和版本5(基于命名空间和名称)。版本4是最常用的版本,它基于随机数生成,具有较高的唯一性。

到此这篇关于JavaScript中创建GUID/UUID的方法及实现步骤的文章就介绍到这了,更多相关js 创建guid和uuid内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 浅析JavaScript原型继承的陷阱

    浅析JavaScript原型继承的陷阱

    JavaScript和其它面向对象语言一样,对象类型采用引用方式。持有对象的变量只是一个地址,而基本类型数据是值。当原型上存储对象时,就可能有一些陷阱
    2013-12-12
  • Layui实现多条件查询的示例代码

    Layui实现多条件查询的示例代码

    本文主要介绍了Layui实现多条件查询,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • JS动态添加Table的TR,TD实现方法

    JS动态添加Table的TR,TD实现方法

    这篇文章主要介绍了JS动态添加Table的TR,TD实现方法,涉及js针对Table中TR、TD节点的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • 深入理解jQuery()方法的构建原理

    深入理解jQuery()方法的构建原理

    对于JQuery,想必大家都很熟悉。目前,很多web项目,在实施的过程中,考虑到各浏览器原生JS API的兼容性,大都会选用JQuery或类似于JQuery这样的框架来进行网页效果开发。这篇文章将给大家深入介绍jQuery()方法的构建原理,有需要的朋友们可以参考借鉴。
    2016-12-12
  • JavaScript代理模式原理与用法实例详解

    JavaScript代理模式原理与用法实例详解

    这篇文章主要介绍了JavaScript代理模式原理与用法,结合实例形式详细分析了JavaScript代理模式基本概念、原理、用法与操作注意事项,需要的朋友可以参考下
    2020-03-03
  • 详解如何在在浏览器中使用WebRTC获取用户IP地址

    详解如何在在浏览器中使用WebRTC获取用户IP地址

    如果需要在程序中获取当前用户的IP,通常手段都是需要使用服务器,但现在借助WebRTC的强大功能,我们可以直接在浏览器客户端获取用户IP,所以本文小编将给大家介绍一下如何在在浏览器中使用WebRTC获取用户IP地址,文中通过代码示例讲解的非常详细,需要的朋友可以参考下
    2023-11-11
  • JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析

    JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析

    这篇文章主要介绍了JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析,包括懒加载和onbeforeunload等要点的理解,需要的朋友可以参考下
    2016-05-05
  • js右下角弹出提示框示例代码

    js右下角弹出提示框示例代码

    这篇文章主要介绍了js右下角弹出提示框示例代码,即网页右下角弹出广告信息框实例代码,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 使用defer和async实现高效加载JavaScript

    使用defer和async实现高效加载JavaScript

    async和defer都是异步加载脚本,但async是加载完脚本后立即执行,而defer是在HTML解析完成后再执行脚本,本文给大家介绍了如何使用defer和async高效加载JavaScript,文中通过代码和图文讲解的非常详细,需要的朋友可以参考下
    2024-06-06
  • javascript 终止函数执行操作

    javascript 终止函数执行操作

    本篇文章主要是对javascript 终止函数执行的操作方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02

最新评论