Javascript中常用類型的格式化方法小結

2019-11-19 18:15:39

字體：大中小

來源：轉載

供稿：網友

前言

相信大家都知道因為JavaScript是弱類型的語言，項目寫大了會非常難以把控，容易出各種問題。幸好有強類型的TypeScript可以很大程度上彌補這一缺陷，但TypeScript提供的強類型是編譯階段的，雖然絕大部分類型相關的問題在編譯階段都能被覆蓋到，但對于小部分在運行時才會出錯的錯誤還是無能為力。

例如以下幾種常見的情況：

1、定義為number的屬性，賦值的時候，如果賦值源沒有定義強類型，這樣就會繞過編譯檢查的階段，到運行時發現可能傳進來的是個字符串。類內部再一頓加減乘除，很容易導致一大片數據全都被污染為NaN。

2、定義boolean類型的屬性，經常會賦值為一個對象，雖然運行起來不會出明顯問題，但其實只想存儲一下對象是否為空的狀態，卻有可能導致那個對象始終無法被回收。

3、定義為整型的屬性，比如index。這點即使TS也無能為力，因為TS里也沒有int。很容易傳入一個浮點數，導致從數組取索引時產生報錯。

在JavaScript運行時，任何用法都有可能發生，如果要寫出強壯的組件或框架，類似這些問題，都是必須要考慮到的。解決方案就是對于任何來自于外部傳入的參數或變量進行格式化，這樣只要格式化一次，組件和框架內部就能高效地正常運轉，不用再各種特殊判斷。

下面列舉幾種常用類型的高性能格式化方法：

格式化浮點數

value = +value || 0;

測試輸出：

function test(value) { value = +value || 0; return value;}test("123"); //123test("123.5"); //123.5test(123); //123test(123.5); //123.5test("abc"); //0test("123ab"); //0test(NaN); //0test(null); //0test(undefined); //0

格式化有符號整數(int32)

value = +value | 0;

等價于:

value = ~~value;

測試輸出：

function test(value) { value = +value | 0; return value;}test("123"); //123test("123.5"); //123test(123); //123test(123.5); //123test("-123.5"); //-123test("abc"); //0test(NaN); //0test(null); //0test(undefined); //0

要特別注意一下：以上這種格式化方式只適用于32位有符號整型數，也就類似其他語言里的int，正整數部分最大只能到2147483647（2^31-1） 。uint32或者更大的int64是不行的,會被截斷。具體可以參考這里：按位操作符。通常在其他語言里，可以使用int的場景使用這種格式化方法都完全沒問題。

格式化無符號整數(uint32)

value = +value >>> 0;

測試輸出：

function test(value) { value = +value >>> 0; return value;}test("123"); //123test("123.5"); //123test(0xFFFFFFFF); //0xFFFFFFFFtest(0xFFFFFFFF+).5; //0xFFFFFFFFtest("-123.5"); //0xFFFFFF85test("abc"); //0test(NaN); //0test(null); //0test(undefined); //0

要注意一下：位移運算符是三個箭頭>>>,有且只有這個運算符是操作無符號整型，結果是一個uint32，范圍從0~4294967295（2^32-1），其他所有位移運算符的結果都是有符號整型（int32），因此也沒法表示大于2147483647（2^31-1）的數字。

格式化布爾值

value = !!value;

測試輸出：

function test(value) { value = !!value; return value;}test(true); //truetest(123); //truetest(123.5); //truetest({}); //truetest([]); //truetest("abc"); //truetest(""); //falsetest(false); //falsetest(NaN); //falsetest(null); //falsetest(undefined); //false

格式化字符串

字符串的格式化沒有那么固定的需求，一般情況下避免null就行了，因為其他對字符串變量的操作，比如加號，都會自動轉換類型。