JavaScript动态生成唯一ID的三种实现方案
本文详解JavaScript中动态生成唯一ID的三种常用方法。第一种结合时间戳与随机数,通过Math.random和Date.now实现可控长度的唯一标识;第二种基于UUID标准算法生成符合规范的长字符串;第三种介绍使用NanoID库,轻量高效且支持自定义长度。文章提供具体代码示例与安装步骤,帮助开发者根据场景选择合适方案。
一、引入时间戳,生成可控长度的随机数
为了控制随机数的长度,可以定义一个长度变量(length),从而生成指定长度的随机数:
Math.random().toString(36).substr(3,length)
同时引入时间戳:
Date.now().toString(36)
将上述两部分结合,即可得到最终方案:
genID(length){
return Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);
}或者参考以下代码实现:
<script>
/**
* 获取当前时间戳、生成唯一标识id, 以及常见方法。
* **/
// 方法一传值转换,注意格式
var date = Date.parse(new Date())
console.log(date); // 1656581121000
// //Date.parse("2022/6/30 10:05") 或者 Date.parse("2022-6-30 10:05")
var date = Date.parse("2022-6-30 10:05:50")
//方法二通过原型方法直接获得当前时间的毫秒值
var date = new Date().getTime()
//方法三Date.now()可以获得当前的时间戳
var date = Date.now()
//方法四valueOf()函数返回时间戳值
var data = (new Date()).valueOf()
//方法五将获取时间方法对象转化为一个number类型的数值
var data = Number(new Date())
</script>二、JS 生成随机字符串(UUID风格)
例如生成格式如:07854BB7-6572-496E-918B-81115BCF396E
getUuid () {
var s = [];
var hexDigits = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
}
s[14] = "4"
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1)
s[8] = s[13] = s[18] = s[23] = "-"
let uuid = s.join("")
return uuid
}三、使用ID生成器NanoID
2.1-安装
npm i nanoid
2.2-使用
import {nanoid} from 'nanoid';
let idA = nanoid() //=> "V1SyGzR8_Z5jdHd8B-myT"
// 也可以指定生成字符串的长度
let idB = nanoid(10)
下面是一些补充说明
在 JavaScript 中,可以通过使用 Date 对象的 getTime 方法来生成一个毫秒级别的唯一 ID。具体示例如下:
let uniqueId = new Date().getTime(); console.log(uniqueId); // 输出的结果类似于 1633067982824
如果需要生成更长的 ID,可以将该 ID 转换为字符串,并在后面添上一个随机数。示例如下:
let uniqueId = String(new Date().getTime()) + String(Math.floor(Math.random() * 1000)); console.log(uniqueId); // 输出的结果类似于 1633067982824432
上述代码将自动生成一个长度为 16 位的唯一 ID,其中前 13 位是时间戳,后 3 位是随机数。
到此这篇关于js动态生成唯一id的两种方法的文章就介绍到这了,更多相关js动态生成唯一id内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!
什么时候该用JS构造器:与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选?场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38
