JavaScript檢查一個(gè)值是否為數(shù)字實(shí)例代碼
檢查一個(gè)值是否為數(shù)字
在 JavaScript 中,有多種方法可以檢查一個(gè)值是否為數(shù)字。以下是完整的方法總結(jié):
1.typeof操作符(基礎(chǔ)檢查)
console.log(typeof 42); // "number"
console.log(typeof 3.14); // "number"
console.log(typeof NaN); // "number" ?? 包含NaN
console.log(typeof Infinity); // "number" ?? 包含Infinity
console.log(typeof "42"); // "string"
// 基礎(chǔ)檢查函數(shù)
function isNumberType(value) {
return typeof value === 'number';
}
2.Number.isFinite()(最推薦)
console.log(Number.isFinite(42)); // true
console.log(Number.isFinite(3.14)); // true
console.log(Number.isFinite(NaN)); // false
console.log(Number.isFinite(Infinity)); // false
console.log(Number.isFinite("42")); // false
console.log(Number.isFinite(null)); // false
// 最佳實(shí)踐
function isValidNumber(value) {
return Number.isFinite(value);
}
3.isNaN()和Number.isNaN()
// 全局 isNaN() - 會(huì)進(jìn)行類型轉(zhuǎn)換
console.log(isNaN(42)); // false
console.log(isNaN(NaN)); // true
console.log(isNaN("42")); // false (字符串?dāng)?shù)字)
console.log(isNaN("hello")); // true
// Number.isNaN() - 更嚴(yán)格,不轉(zhuǎn)換類型
console.log(Number.isNaN(42)); // false
console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN("42")); // false
console.log(Number.isNaN("hello")); // false
// 結(jié)合使用
function isRealNumber(value) {
return typeof value === 'number' && !Number.isNaN(value);
}
4. 使用示例
4.1 檢查字符串?dāng)?shù)字
// 方法1:使用 isNaN() 和 parseFloat
function isNumericString(value) {
if (typeof value !== 'string') return false;
return !isNaN(value) && !isNaN(parseFloat(value));
}
// 方法2:更嚴(yán)格的檢查
function isStrictNumericString(value) {
if (typeof value !== 'string') return false;
return /^-?\d+(\.\d+)?$/.test(value.trim());
}
console.log(isNumericString("42")); // true
console.log(isNumericString("3.14")); // true
console.log(isNumericString("42px")); // true ??
console.log(isStrictNumericString("42px")); // false ?
4.2 綜合檢查函數(shù)
// 檢查數(shù)字和數(shù)字字符串
function isNumberLike(value) {
// 如果是數(shù)字類型
if (typeof value === 'number') {
return Number.isFinite(value);
}
// 如果是字符串
if (typeof value === 'string') {
const str = value.trim();
if (str === '') return false;
const num = Number(str);
return Number.isFinite(num);
}
return false;
}
console.log(isNumberLike(123)); // true
console.log(isNumberLike("456")); // true
console.log(isNumberLike("78.9")); // true
console.log(isNumberLike(" 123 ")); // true
console.log(isNumberLike("abc")); // false
console.log(isNumberLike("")); // false
5. 實(shí)際應(yīng)用場景
場景1:表單驗(yàn)證
function validateNumberInput(input) {
const num = Number(input);
if (Number.isFinite(num)) {
return {
isValid: true,
value: num,
type: typeof input === 'string' ? 'string number' : 'number'
};
} else {
return {
isValid: false,
error: "請(qǐng)輸入有效的數(shù)字"
};
}
}
場景2:數(shù)組過濾
const mixedArray = [1, "2", "hello", 3.14, NaN, null, "45.6", Infinity];
// 過濾出有效數(shù)字
const validNumbers = mixedArray.filter(item => {
const num = Number(item);
return Number.isFinite(num);
});
console.log(validNumbers); // [1, 2, 3.14, 45.6]
場景3:安全的數(shù)學(xué)計(jì)算
function safeCalculate(a, b, operator) {
const numA = Number(a);
const numB = Number(b);
if (!Number.isFinite(numA) || !Number.isFinite(numB)) {
throw new Error("參數(shù)必須是有效數(shù)字");
}
switch (operator) {
case '+': return numA + numB;
case '-': return numA - numB;
case '*': return numA * numB;
case '/': return numB !== 0 ? numA / numB : Infinity;
default: throw new Error("不支持的運(yùn)算符");
}
}
6. 特殊值處理
// 檢查各種邊界情況
const testValues = [
42, "42", "3.14", "hello", "", " ",
NaN, Infinity, -Infinity, null, undefined,
"123abc", "abc123", "0012", "12.34.56"
];
testValues.forEach(value => {
const num = Number(value);
console.log(`"${value}" →`, {
typeof: typeof value,
Number: num,
isFinite: Number.isFinite(num),
isNaN: Number.isNaN(num),
globalIsNaN: isNaN(value)
});
});
7. 總結(jié)推薦
| 使用場景 | 推薦方法 | 示例 |
|---|---|---|
| 嚴(yán)格數(shù)字類型 | Number.isFinite(value) | 123, 3.14 ? |
| 包含數(shù)字字符串 | Number.isFinite(Number(value)) | "123", "3.14" ? |
| 僅檢查類型 | typeof value === 'number' | 123 ?, NaN ? |
| 排除 NaN | !Number.isNaN(value) | 123 ?, NaN ? |
| 字符串?dāng)?shù)字 | !isNaN(parseFloat(value)) | "123", "3.14" ? |
最推薦: Number.isFinite() - 最嚴(yán)格且符合直覺的數(shù)字檢查。
到此這篇關(guān)于JavaScript檢查一個(gè)值是否為數(shù)字的文章就介紹到這了,更多相關(guān)JS檢查值是否為數(shù)字內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
前端插件之Bootstrap Dual Listbox使用教程
這篇文章主要介紹了前端插件之Bootstrap Dual Listbox使用教程,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-07-07
checkbox全選所涉及到的知識(shí)點(diǎn)介紹
checkbox全選涉及到的知識(shí)點(diǎn)比如IE里起作用,火狐不起作用,getElementById()與getElementsByName()的區(qū)別等等2013-12-12
JavaScript DOM 編程藝術(shù)(第2版)讀書筆記(JavaScript的最佳實(shí)踐)
閱讀了本書第五章關(guān)于使用JavaScript的最佳實(shí)踐,大部分的建議之前都有耳聞,不過閱讀之后有更深的體會(huì)2013-10-10
將HTML格式的String轉(zhuǎn)化為HTMLElement的實(shí)現(xiàn)方法
本節(jié)主要介紹了將HTML格式的String轉(zhuǎn)化為HTMLElement的實(shí)現(xiàn)方法,需要的朋友可以參考下2014-08-08
每天一篇javascript學(xué)習(xí)小結(jié)(RegExp對(duì)象)
這篇文章主要介紹了javascript中的RegExp對(duì)象知識(shí)點(diǎn),對(duì)RegExp對(duì)象的基本使用方法,以及各種方法進(jìn)行整理,感興趣的小伙伴們可以參考一下2015-11-11
JS實(shí)現(xiàn)的4種數(shù)字千位符格式化方法分享
這篇文章主要介紹了JS實(shí)現(xiàn)的4種數(shù)字千位符格式化方法分享,本文給出了4種千分位格式化方法并對(duì)它們的性能做了比較,需要的朋友可以參考下2015-03-03

