Javascript中常用類型的格式化方法小結(jié)
前言
相信大家都知道因為JavaScript是弱類型的語言,項目寫大了會非常難以把控,容易出各種問題。幸好有強類型的TypeScript可以很大程度上彌補這一缺陷,但TypeScript提供的強類型是編譯階段的,雖然絕大部分類型相關(guān)的問題在編譯階段都能被覆蓋到,但對于小部分在運行時才會出錯的錯誤還是無能為力。
例如以下幾種常見的情況:
1、定義為number的屬性,賦值的時候,如果賦值源沒有定義強類型,這樣就會繞過編譯檢查的階段,到運行時發(fā)現(xiàn)可能傳進來的是個字符串。類內(nèi)部再一頓加減乘除,很容易導致一大片數(shù)據(jù)全都被污染為NaN。
2、定義boolean類型的屬性,經(jīng)常會賦值為一個對象,雖然運行起來不會出明顯問題,但其實只想存儲一下對象是否為空的狀態(tài),卻有可能導致那個對象始終無法被回收。
3、定義為整型的屬性,比如index。這點即使TS也無能為力,因為TS里也沒有int。很容易傳入一個浮點數(shù),導致從數(shù)組取索引時產(chǎn)生報錯。
在JavaScript運行時,任何用法都有可能發(fā)生,如果要寫出強壯的組件或框架,類似這些問題,都是必須要考慮到的。解決方案就是對于任何來自于外部傳入的參數(shù)或變量進行格式化,這樣只要格式化一次,組件和框架內(nèi)部就能高效地正常運轉(zhuǎn),不用再各種特殊判斷。
下面列舉幾種常用類型的高性能格式化方法:
格式化浮點數(shù)
value = +value || 0;
測試輸出:
function test(value) { value = +value || 0; return value; } test("123"); //123 test("123.5"); //123.5 test(123); //123 test(123.5); //123.5 test("abc"); //0 test("123ab"); //0 test(NaN); //0 test(null); //0 test(undefined); //0
格式化有符號整數(shù)(int32)
value = +value | 0;
等價于:
value = ~~value;
測試輸出:
function test(value) { value = +value | 0; return value; } test("123"); //123 test("123.5"); //123 test(123); //123 test(123.5); //123 test("-123.5"); //-123 test("abc"); //0 test(NaN); //0 test(null); //0 test(undefined); //0
要特別注意一下:以上這種格式化方式只適用于32位有符號整型數(shù),也就類似其他語言里的int,正整數(shù)部分最大只能到2147483647(2^31-1)
。uint32或者更大的int64是不行的,會被截斷。具體可以參考這里:按位操作符。通常在其他語言里,可以使用int的場景使用這種格式化方法都完全沒問題。
格式化無符號整數(shù)(uint32)
value = +value >>> 0;
測試輸出:
function test(value) { value = +value >>> 0; return value; } test("123"); //123 test("123.5"); //123 test(0xFFFFFFFF); //0xFFFFFFFF test(0xFFFFFFFF+).5; //0xFFFFFFFF test("-123.5"); //0xFFFFFF85 test("abc"); //0 test(NaN); //0 test(null); //0 test(undefined); //0
要注意一下:位移運算符是三個箭頭>>>,有且只有這個運算符是操作無符號整型,結(jié)果是一個uint32,范圍從0~4294967295(2^32-1),其他所有位移運算符的結(jié)果都是有符號整型(int32),因此也沒法表示大于2147483647(2^31-1)的數(shù)字。
格式化布爾值
value = !!value;
測試輸出:
function test(value) { value = !!value; return value; } test(true); //true test(123); //true test(123.5); //true test({}); //true test([]); //true test("abc"); //true test(""); //false test(false); //false test(NaN); //false test(null); //false test(undefined); //false
格式化字符串
字符串的格式化沒有那么固定的需求,一般情況下避免null就行了,因為其他對字符串變量的操作,比如加號,都會自動轉(zhuǎn)換類型。
value = value || "";
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家學習或者使用Javascript能帶來一定的幫助,如果有疑問大家可以留言交流。
- python中字符串類型json操作的注意事項
- javascript中對Date類型的常用操作小結(jié)
- JavaScript中各種引用類型的常用操作方法小結(jié)
- JavaScript中的操作符類型轉(zhuǎn)換示例總結(jié)
- js 變量類型轉(zhuǎn)換常用函數(shù)與代碼[比較全]
- Javascript中獲取瀏覽器類型和操作系統(tǒng)版本等客戶端信息常用代碼
- 整理JavaScript對DOM中各種類型的元素的常用操作
- 詳解JavaScript中常用的函數(shù)類型
- javascript基本數(shù)據(jù)類型及類型檢測常用方法小結(jié)
- JavaScript類型相關(guān)的常用操作總結(jié)
相關(guān)文章
一文探索執(zhí)行JavaScript函數(shù)的多種方法
在前端開發(fā)中,動態(tài)執(zhí)行?JavaScript?函數(shù)是一種強大的能力,能夠幫助開發(fā)者實現(xiàn)靈活的邏輯控制,本文將和大家探討一下幾種常用的執(zhí)行方法,需要的可以了解下2025-01-01JavaScritp添加url參數(shù)并將參數(shù)加入到url中及更改url參數(shù)的方法
這篇文章給大家介紹javascript添加url參數(shù)方法,將參數(shù)加入到url中,涉及到url添加參數(shù)的相關(guān)知識,關(guān)于js添加url參數(shù)感興趣的朋友可以參考下本篇文章2015-10-10js與jquery獲取父級元素,子級元素,兄弟元素的實現(xiàn)方法
本篇文章主要是對js與jquery獲取父級元素,子級元素,兄弟元素的實現(xiàn)方法進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01js獲取html參數(shù)及向swf傳遞參數(shù)應用介紹
HTML頁面是在客戶端執(zhí)行的,這樣要獲取參數(shù)必須使用客戶端腳本如JavaScript,在這點上與服務器端腳本獲取參數(shù)方式有所不同接下來將詳細介紹下感興趣的你可不要錯過了哈2013-02-02