如何用 JavaScript 產生 UUID / GUID?

UUID 是「Universally Unique IDentifier」(通用唯一識別碼)的縮寫,目的是唯一的標示資訊。UUID 包含 32 個十六進位數字,並用「-」分隔成五組,每組分別有8、4、4、4、12的數字。例如:「550e8400-e29b-41d4-a716-446655440000」是一組完整的 UUID。

這裡列了幾種使用 JavaScript 產生 UUID / GUID的方法、優缺比較。

方法 1

最簡單的方法就是使用 Math.random() 產出任意16進位數字,但

function _uuid() {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
  }
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}

var uuid = _uuid(); //b3165466-df5b-c3d7-0e94-79d94e8c692f

接下來的方法都是基於 Math.random() 做改善,不管是改進格式或唯一性。

方法 2

先擺好格式,再利用 Math.random() 產出任意數字填入格式中。這個方法解決了方法 1 的格式問題,但仍可能有 collision。

function _uuid() {
  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);});
}

var uuid = _uuid(); //5fc84f46-5743-4ed3-a94d-1ba63b8022a5

方法 3

結合 time stamp 與方法 2,同時解決了格式和 collision 問題。

由於加上 Performance.now() (亞毫秒級的時間戳記),很難產生 collision。主流瀏覽器皆支援,但 IE 只支援 10 以上或 Edge。

function _uuid() {
  var d = Date.now();
  if (typeof performance !== 'undefined' && typeof performance.now === 'function'){
    d += performance.now(); //use high-precision timer if available
  }
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = (d + Math.random() * 16) % 16 | 0;
    d = Math.floor(d / 16);
      return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
  });
}

測試

for(var i = 0; i < 10; i++) {
  console.log(_uuid());
}
b382bd5-becd-4d93-8d3f-98aad78a049e
e3dea0f5-37f2-4d79-ae58-490af3228069
3e8d1c2b-f9f9-4a74-a8af-a4e8bebea438
eefbada8-efee-439a-af83-a80dde423dd6
8084d5dd-4f91-4590-927c-4751b49f2de0
06423d2c-1d62-429b-b6f9-de0a8d4ea95f
8b86b39e-5f2e-4abd-a8f0-2108a39a1d8a
62c8628e-e2e2-439d-80cd-b86e31e4bd59
1322e5db-91b0-4f12-94bd-fb4989d3cb95
0db3399e-55c3-44ba-822e-afcabf9b702b

應用

可參考這個小專案-Todo List: Vue.js Example

每新增一筆 todo,都會為這個 todo 產生一個 ID (UUID),後端儲存進資料庫前,比對 ID 是否已經存在:若是已存在的 ID,即更新這個 todo 的資料;若非已存在的 ID,就新增一筆 todo 資料。

參考資料


comments powered by Disqus