一些 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); // 取得整數的部分

有興趣瞧瞧其他新文章嗎?