今天筆者整理了一份自己最近用到的一些小技巧分享給大家，雖然都是基礎技術，不過在某些特殊時刻還蠻有用的，不至於加載一堆體積龐大的第三方庫。今天筆者用本文歸納一下分享給大家。本篇文章主要包含以下內容：

• 產生隨機不重複ID
• 模板標籤替換
• 字符串與xml的互轉
• 快速取整數

本篇文章預計時間3分鐘

產生隨機不重複ID

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

Math.random().toString(36).substr(2,n);
// 截取小數點後的部分，n在實際應用中修改成你需要的位數

第二步使用Date.now()取得目前的毫秒數，總共有13位數，和上個方法一樣我們通過toString(36)的方法縮短其位數，並轉換為36進位，接著用substr自行截取需要的位數。

Date.now().toString(36).substr(4,n);
//由於前幾位固定，我們從第5位開始進去截取獲取隨機數，n在實際應用中修改成你需要的位數

將隨機數的片段和時間戳的片段進行組合，就能產生一個隨機不重複的id 。( 應該說重複機率低到不可能重複，如果你遇到重複的，恭喜你，建議你今天買彩票 )

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

模板標籤替換

開發過程中有時會遇到要取出一段文字中的某些值，如果單純只是要「替換成別的值」，使用replace()的方法就能輕鬆實現，對以下這段字符串來說，裡面有幾個利用{{}}包覆的標籤需要你替換，你會怎麼做呢:

大家好，我的公眾號是{{name}}，今年{{age}}歲了，創建於{{year}}年，歡迎你的關注

如果想要把所有「{{}}」兩個大括號內的字替換成對應的值，可以通過以下的方式進行處理，核心的內容就是replace()方法裡的正規表達式/{{(.*?)}}/g,/{|}/g：

const text = '大家好，我的公眾號是{{name}}，今年{{age}}歲了，創建於{{year}}年，歡迎你的關注’;
const obj = {
 name: '前端達人',
 age: 5,
 year: 2014
};
const result = text.replace(/{{(.*?)}}/g, e => {
 return obj[e.replace(/{|}/g,'')];
});

得到的結果就會是：「大家好，我的公眾號是前端達人，今年5歲了，創建於2014年，歡迎你的關注」。

String 轉 XML、XML 轉 String

在JavaScript裡如果直接讀取XML，得到的會是一些XML節點構成的對象，如果要使用像是replace()..等字串的操作就必須轉換成字串String才行，下方程式可以很簡單的將XML轉換成字串String，處理之後再轉回XML。（注：ie需要特殊處理，感興趣的可以去百度搜索）

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); // 無條件捨去小數部分，類似Math.floor()

~是按位取反運算，~~是取反兩次。在這裡~~的作用是去掉小數部分，因為位運算的操作值要求是整數，其結果也是整數，所以經過位運算的都會自動變成整數。與Math.floor()不同的是，它只是單純的去掉小數部分，不論正負都不會改變整數部分。

小節

今天JS小技巧的分享就到這裡，希望能在工作中對你有所幫助，建議大家整理梳理自己日常工作中會用到的小方法和小技巧，維護到自己的方法類庫裡，到時用的時候會事半功倍。在接下來的文章裡，筆者會持續關注這方面的內容，將會整理成文章分享到這個系列裡，歡迎你持續關注與訂閱。

更多精彩內容，請關注“前端達人”公眾號！