JS生成唯一ID：NanoID与UUID对比及实现

作者：异步漫步时间：2026-10-24 21:03:01浏览：582

本文对比了JavaScript中生成唯一ID的两种主流方式：UUID与NanoID。NanoID凭借使用crypto模块提升安全性，以及比UUID快60%的性能和更紧凑的字符集，正逐渐取代传统UUID。文章详细展示了JS生成UUID的三种方法及NanoID的安装与使用代码，帮助开发者选择更高效的方案。

前言：

生成唯一ID有了更优的选择，即NanoID。本文旨在探讨NanoID 是否正在取代传统方案，并介绍在JavaScript中生成UUID及NanoID的具体方法。

一、为什么 NanoID 正在取代 UUID

1、安全性更高：大多数随机生成器依赖不安全的Math.random() 。相比之下，NanoID利用crypto 模块和Web Crypto API，确保了更高的安全性。此外，NanoID在ID生成算法中采用了自研的“统一算法”，摒弃了传统的“随机 % 字母表” random % alphabet机制。

2、速度与紧凑性：NanoID的执行速度比UUID 快60%。在字符集方面，UUID包含36个字符，而NanoID仅使用21个字符，使得生成的ID更加紧凑。

此外，NanoID兼容14种不同的编程语言，具体包括：


C#、C++、Clojure 和 ClojureScript、Crystal、Dart & Flutter、Deno、Go、Elixir、Haskell、Janet、Java、Nim、Perl、PHP、带字典的 Python、Ruby、Rust、Swift

3、兼容性：

它还支持PouchDB、CouchDB WebWorkers、Rollup 以及React 和 Reach-Native等库。开发者可以通过npx nanoid 在终端中直接获取唯一ID。

二、js如何生成

接下来我们看看它们是如何在JavaScript中实现的。

首先回顾一下之前生成uuid的常见做法。

方法一：


function guid() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = Math.random() * 16 | 0,
            v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}
guid() // "a1ca0f7b-51bd-4bf3-a5d5-6a74f6adc1c7"

方法二：


var _S4 = function() {
  return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
}

// 获取广告请求唯一ID 方式是当前时间戳+13位随机吗
export function GetsingleId() {
  var _res = (_S4() + _S4() + '-' + _S4() + '-' + _S4() + '-' + _S4() + '-' + _S4() + _S4() + _S4())
  return '_' + config.version + '_' + _res
}

方法三：


function uuid() {
    var s = [];
    var hexDigits = "0123456789abcdef";
    for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
    }
    s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
    s[8] = s[13] = s[18] = s[23] = "-";

    var uuid = s.join("");
    return uuid;
}
uuid() // "ffb7cefd-02cb-4853-8238-c0292cf988d5"

三、NanoID的方式


import { nanoid } from 'nanoid'
let  idA = nanoid() //=> "V1StGXR8_Z5jdHi6B-myT"
//也可以指定生成字符串的长度
let  idB = nanoid(5)

主要通过npm包进行安装，核心代码如下：


let urlAlphabet =
  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict'

let nanoid = (size = 21) => {
  let id = ''
  // A compact alternative for `for (var i = 0; i < step; i++)`.
  let i = size
  while (i--) {
    // `| 0` is more compact and faster than `Math.floor()`.
    id += urlAlphabet[(Math.random() * 64) | 0]
  }
  return id
}

到此这篇关于JS生成唯一id方式之UUID和NanoID的文章就介绍到这了,更多相关JS生成唯一id方式内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

D3.js 比例尺与坐标轴的配置详解

2026-11-05 16:54:46

JavaScript怎么遍历对象的Symbol键和不可枚举属性

2026-11-05 13:13:39

封装一个健壮的JS字符串判空工具函数

2026-11-05 12:16:14

JavaScript合并数组的三种常用方法：concat、扩展运算符与push

2026-11-05 11:22:29

JavaScript立即执行函数(IIFE)是什么及基本语法

2026-11-05 10:51:19