Генерация уникального ID

Способы сгенерировать уникальный идентификатор на клиенте — от нативного crypto.randomUUID до лёгкого кастомного решения.

Задача

Нужно сгенерировать уникальный ID для элемента формы, временного ключа в списке или идентификатора сессии. ID должен быть уникальным с высокой вероятностью, не требовать сервера.

Решение

Способ 1 — crypto.randomUUID (рекомендуемый)

const id = crypto.randomUUID;
// '550e8400-e29b-41d4-a716-446655440000'

Поддерживается: Node 14.17+, Chrome 92+, Firefox 95+, Safari 15.4+. В HTTPS и localhost. Криптографически стойкий UUID v4.

Способ 2 — укороченный random ID

function generateId(prefix = 'id') {
  return `${prefix}-${Math.random.toString(36).slice(2, 9)}`;
}

generateId;        // 'id-k3m9xqp'
generateId('user'); // 'user-4z7rw2a'

Подходит для ключей в DOM или временных объектов. Не гарантирует уникальность при очень большом числе генераций.

Способ 3 — timestamp + random

function uid() {
  return Date.now().toString(36) + Math.random.toString(36).slice(2, 6);
}

uid; // '1z8kf3q4x2m'

Монотонно возрастающий (сортируется) + добавочная случайность.

TypeScript — с префиксом и типом:

type IdPrefix = 'user' | 'post' | 'comment' | 'item';

function createId(prefix: IdPrefix): string {
  return `${prefix}_${crypto.randomUUID.replace(/-/g, '').slice(0, 12)}`;
}

createId('user'); // 'user_550e8400e29b'

Ключевые моменты

  • crypto.randomUUID — лучший выбор: стандарт, безопасен, не требует npm-пакета.
  • Math.random — не криптостойкий, не для security-критичных ID (токены, сессии).
  • toString(36) — кодирует число в base-36 (0-9 + a-z) — компактная строка.
  • Для React/Vue ключей списка — crypto.randomUUID или nanoid; не используй индекс массива.

Варианты

  • nanoid — популярная библиотека (130 байт), URL-safe, настраиваемая длина: nanoid → 'V1StGXR8_Z5jdHi6B-myT'.
  • uuid npm — для UUID v1/v4/v5 с расширенными опциями.

Связанные рецепты / темы