「JS小技巧」随機不重複的ID，模闆标簽替換，XML與字元串互轉，快速取整

關注前端達人，與你共同進步

開篇

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

産生随機不重複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小技巧的分享就到這裡，希望能在工作中對你有所幫助，建議大家經常整理梳理自己日常工作中會用到的小方法和小技巧，維護到自己的方法庫裡，到時用的時候會事半功倍。

在接下來的文章裡，筆者會持續關注這方面的内容，将會整理成文章分享到這個系列裡，歡迎你持續關注與訂閱。

如果你喜歡本篇文章，請收藏本文，再給本文點個在看。

精彩推薦

css實用手冊丨CSS 垂直居中的七種方法，值得收藏

Web Animation API丨用原生JS制作一個圖檔随機移動的動畫

十款熱門的Vue.js工具和庫

vue基礎丨新手入門篇（一）

小技巧丨console的用法，不僅僅隻有console.log()

動畫基礎丨點和直線

太驚豔了，這些畫都是CSS的傑作！

css基礎丨Transforms 屬性在實際項目中如何應用？

css基礎丨如何了解transform的matrix()用法

css基礎丨如何了解Display的屬性：None，Block，Inline，Inline-Block

ES6基礎丨let和作用域

ES6基礎丨const介紹

ES6基礎丨預設參數值

ES6基礎丨展開文法（Spread syntax）

ES6基礎丨解構指派（destructuring assignment）

ES6基礎丨箭頭函數（Arrow functions）

ES6基礎丨模闆字元串（Template String）

ES6基礎丨Set與WeakSet

ES6基礎丨Map與WeakMap

ES6基礎丨Symbol介紹：獨一無二的值

ES6基礎丨Object的新方法

ES6基礎丨疊代器（iterator）

ES6基礎丨生成器（Generator）

ES6基礎丨你需要知道的Array數組新方法（上）

資料結構基礎丨棧簡介（使用ES6）

資料結構基礎丨隊列簡介（使用ES6）

JavaScript基礎丨前端不懂它，會再多架構也不過隻是會用而已！

JavaScript基礎丨你真的了解JavaScript嗎?

JavaScript基礎丨回調(callback)是什麼?

JavaScript基礎丨Promise使用指南

JavaScript基礎丨深入學習async/await

JS加載慢？谷歌大神帶你飛!(文末送電子書)

19年你應該關注這50款前端熱門工具（上）

19年你應該關注這50款前端熱門工具（中）

19年你應該關注這50款前端熱門工具（下）