JavaScript中判斷為整數(shù)的多種方式及保留兩位小數(shù)的方法

更新時間：2019年09月09日 10:23:32 作者：杭州蘇小小

這篇文章主要介紹了JavaScript中判斷為整數(shù)的多種方式,以及保留兩位小數(shù)的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下

一、使用取余運算符判斷

任何整數(shù)都會被1整除，即余數(shù)是0。利用這個規(guī)則來判斷是否是整數(shù)。

function isInteger(obj) {
 return obj%1 === 0
}
isInteger(3) // true
isInteger(3.3) // false

以上輸出可以看出這個函數(shù)挺好用，但對于字符串和某些特殊值顯得力不從心

isInteger('') // true
isInteger('3') // true
isInteger(true) // true
isInteger([]) // true

對于空字符串、字符串類型數(shù)字、布爾true、空數(shù)組都返回了true，真是難以接受。對這些類型的內(nèi)部轉(zhuǎn)換細節(jié)感興趣的請參考：

JavaScript中奇葩的假值

因此，需要先判斷下對象是否是數(shù)字，比如加一個typeof

function isInteger(obj) {
 return typeof obj === 'number' && obj%1 === 0
}
isInteger('') // false
isInteger('3') // false
isInteger(true) // false
isInteger([]) // false

嗯，這樣比較完美了。

二、使用Math.round、Math.ceil、Math.floor判斷

整數(shù)取整后還是等于自己。利用這個特性來判斷是否是整數(shù)，Math.floor示例，如下

function isInteger(obj) {
 return Math.floor(obj) === obj
}
isInteger(3) // true
isInteger(3.3) // false
isInteger('') // false
isInteger('3') // false
isInteger(true) // false
isInteger([]) // false

這個直接把字符串，true，[]屏蔽了，代碼量比上一個函數(shù)還少。

三、通過parseInt判斷

function isInteger(obj) {
 return parseInt(obj, 10) === obj
}
isInteger(3) // true
isInteger(3.3) // false
isInteger('') // false
isInteger('3') // false
isInteger(true) // false
isInteger([]) // false

很不錯，但也有一個缺點

isInteger(1000000000000000000000) // false

竟然返回了false，沒天理啊。原因是parseInt在解析整數(shù)之前強迫將第一個參數(shù)解析成字符串。這種方法將數(shù)字轉(zhuǎn)換成整型不是一個好的選擇。

四、通過位運算判斷

function isInteger(obj) {
 return (obj | 0) === obj
}
isInteger(3) // true
isInteger(3.3) // false
isInteger('') // false
isInteger('3') // false
isInteger(true) // false
isInteger([]) // false

這個函數(shù)很不錯，效率還很高。但有個缺陷，上文提到過，位運算只能處理32位以內(nèi)的數(shù)字，對于超過32位的無能為力，如

isInteger(Math.pow(2, 32)) // 32位以上的數(shù)字返回false了

當然，多數(shù)時候我們不會用到那么大的數(shù)字。

五、ES6提供了Number.isInteger

Number.isInteger(3) // true
Number.isInteger(3.1) // false
Number.isInteger('') // false
Number.isInteger('3') // false
Number.isInteger(true) // false
Number.isInteger([]) // false

目前，最新的 Firefox 和Chrome已經(jīng)支持。

六、js 輸入int類型數(shù)字后自動在后面加.00

var getFloatStr = function (num) {
 num += '';
 num = num.replace(/[^0-9|\.]/g, ''); //清除字符串中的非數(shù)字非.字符
 if (/^0+/) //清除字符串開頭的0
  num = num.replace(/^0+/, '');
 if (!/\./.test(num)) //為整數(shù)字符串在末尾添加.00
  num += '.00';
 if (/^\./.test(num)) //字符以.開頭時,在開頭添加0
  num = '0' + num;
 num += '00'; //在字符串末尾補零
 num = num.match(/\d+\.\d{2}/)[0];
 return num;
 };

如若vue 全局使用在 main.js

Vue.prototype.getFloatStr = function(num) {
 num += '';
 num = num.replace(/[^0-9|\.]/g, ''); //清除字符串中的非數(shù)字非.字符

 if (/^0+/) //清除字符串開頭的0
 num = num.replace(/^0+/, '');
 if (!/\./.test(num)) //為整數(shù)字符串在末尾添加.00
 num += '.00';
 if (/^\./.test(num)) //字符以.開頭時,在開頭添加0
 num = '0' + num;
 num += '00'; //在字符串末尾補零
 num = num.match(/\d+\.\d{2}/)[0];
 return num;
}

方法有很多種例如：

js將小數(shù)轉(zhuǎn)為保留兩位小數(shù)（保留0.00和不保留）

function toDecimal2(x) {
 var f = Math.round(x * 100) / 100;
 var s = f.toString();
 var rs = s.indexOf('.');
 if (rs < 0) {
 rs = s.length;
 s += '.';
 }
 while (s.length <= rs + 2) {
 s += '0';
 }
 return s;
}
//保留2位小數(shù)，如：2，還會保留2 不會補0
function toDecimal2NoZero(x) {
 var f = Math.round(x * 100) / 100;
 var s = f.toString();
 return s;
}

總結

以上所述是小編給大家介紹的JavaScript中判斷為整數(shù)的多種方式及保留兩位小數(shù),希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章:

JavaScript 中的六種循環(huán)方法
這篇文章主要介紹了JavaScript 中的六種循環(huán)方法，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
2021-01-01
JavaScript中DOM尺寸測量與節(jié)流技巧總結
在網(wǎng)頁開發(fā)中,合理獲取DOM元素尺寸及使用節(jié)流技術對高頻事件進行優(yōu)化,是確保頁面流暢運行的關鍵,通過JavaScript可以方便地獲取元素寬高,并應用節(jié)流（Throttle）與防抖（Debounce）技術處理如滾動或窗口調(diào)整等高頻事件,有效減少性能消耗,需要的朋友可以參考下
2024-11-11
基于JavaScript如何制作遮罩層對話框
遮罩層聽起來貌似很復雜，其實說白了就是一個全界面的半透明的div，用戶不可以點擊下邊的元素，或者說是點擊沒有反應，接下來通過本文給大家介紹JavaScript如何制作遮罩層對話框，對js遮罩層相關知識感興趣的朋友一起學習吧
2016-01-01
理解javascript正則表達式
這篇文章主要為大家詳細介紹了javascript正則表達式，由淺入深的幫助大家學習正則表達式，感興趣的小伙伴們可以參考一下
2016-03-03
微信小程序?qū)崿F(xiàn)modal彈出框遮罩層組件（可帶文本框）
這篇文章主要給大家介紹了關于微信小程序?qū)崿F(xiàn)modal彈出框遮罩層組件（可帶文本框）的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-12-12
圖片連續(xù)滾動代碼[兼容IE/firefox]
網(wǎng)上有不少的連續(xù)滾動實現(xiàn)代碼，下面的這個是兼容性不錯的代碼。大家可以測試下。
2009-06-06
webpack4實現(xiàn)不同的導出類型
這篇文章主要介紹了webpack4實現(xiàn)不同的導出類型,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
webpack中使用zepto步驟方法
這篇文章主要為大家介紹了webpack中使用zepto步驟方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-07-07
js獲取窗口相對于屏幕左邊和上邊的位置坐標
這篇文章主要介紹了js如何獲取窗口相對于屏幕左邊和上邊的位置,需要的朋友可以參考下
2014-05-05
webpack學習教程之前端性能優(yōu)化總結
webpack是近期最火的一款模塊加載器兼打包工具，它能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都作為模塊來使用和處理。這篇文章主要給大家總結介紹了關于webpack學習教程之前端性能優(yōu)化的相關資料，需要的朋友可以參考下。
2017-12-12