一些 Javascript 的小技巧筆記

這篇文章是一些我自己最近用到的小技巧，包含「產生隨機不重複 id」、「取出並置換一段文字中的某些值」、「字串與 xml 的轉換」和「快速取整數」，雖然都是基礎技術，不過在某些特殊時刻還滿有用的，用篇文章記錄一下。

產生隨機不重複的 id

有時候在沒有資料庫輔助的情況下，希望產生隨機且不重複的 id，這時我會使用「隨機數」搭配「時間戳」的方式，首先使用Math.random()產生 0～1 之間約 16～17 位數的隨機浮點數，再透過toString(36)的方法縮短其位數，並轉換為 36 進位 ( 0～9、a～z )，若嫌太長還可用substr擷取自己要的片段。

Math.random().toString(36).substr(2,n); // 移除開頭 0 和小數點，n 自訂

第二步使用Date.now()取得目前的毫秒數，總共有 13 位數，一樣透過toString(36)的方法縮短其位數，並轉換為 36 進位，接著也可用substr擷取自己要的片段。

Date.now().toString(36).substr(4,n);// n 自訂

將隨機數的片段和時間戳的片段組合，就能產生一個隨機不重複的 id 。( 應該說重複機率低到不可能重複 )

Math.random().toString(36).substr(2,n) +  Date.now().toString(36).substr(4,n);

取出並置換一段文字中的某些值

開發過程中有時會遇到要取出一段文字中的某些值，如果單純只是要「取代成別的值」，使用replace()的方法就能輕鬆實現，然而使用同樣的方法，也可以將這些值取出成為陣列，以下面這段文字來說，裡面有幾個利用{{}}包覆的值，這些值可以透過程式控制要顯示的內容。

大家好，我叫做{{name}}，今年{{age}}歲，我是{{sex}}，很高興來到這裡

如果想要把所有「{{}}」兩個大括號內的字置換成對應物件的值，可以透過以下的方式處理，比較重要的應該就是replace()方法裡的正規表達式/{{(.*?)}}/g，可以比對兩個大括號內的文字。

const text = '大家好，我叫做{{name}}，今年{{age}}歲，我是{{sex}}，很高興來到這裡';
const obj = {
  name: 'oxxo',
  age: 18,
  sex: '男生'
};
const result = text.replace(/{{(.*?)}}/g, e => {
  return obj[e.replace(/{|}/g,'')];
});

得到的結果就會是：「大家好，我叫做oxxo，今年18歲，我是男生，很高興來到這裡」。

String 轉 XML、XML 轉 String

在 JavaScript 裡如果直接讀取 XML，得到的會是一些節點構成的物件，因此要使用像是replace()..等字串的操作就必須轉換成字串 String 才行，下方程式可以很簡單的將 XML 轉換成字串 String，處理之後再轉回 XML

XML 轉字串 String

xmlToString = (new XMLSerializer()).serializeToString(xmlObject);

字串 String 轉 XML

    stringToXML = (new DOMParser()).parseFromString(xmlString, "text/xml");

快速取整數

在 JavaScript 中取整數，最常見的不外乎就是Math.round()四捨五入、Math.floor()無條件捨去和Math.ceil()無條件進位三種，不過如果透過兩個「二進位進行反相運算符」~~( 兩個蚯蚓符號 )，也可以做到無條件捨去小數點的效果，這也是最快可以取整數的方法，下方的程式碼會先取得一個 0～100 的隨機數，然後取出整數的部分。

const num = Math.random() * 100;
console.log(num);   // 呈現原本得到的隨機數
console.log(~~num); // 取得整數的部分