How do you check that a number is NaN in JavaScrip

2019-01-01 00:11发布

站内文章 / JavaScript

25 0

浪荡孟婆

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I’ve only been trying it in Firefox’s JavaScript console, but neither of the following statements return true:

parseFloat(\'geoff\') == NaN;

parseFloat(\'geoff\') == Number.NaN;

回答1:

Try this code:

isNaN(parseFloat(\"geoff\"))

For checking whether any value is NaN, instead of just numbers, see here: How do you test for NaN in Javascript?

回答2:

I just came across this technique in the book Effective JavaScript that is pretty simple:

Since NaN is the only JavaScript value that is treated as unequal to itself, you can always test if a value is NaN by checking it for equality to itself:

var a = NaN;
a !== a; // true 

var b = \"foo\";
b !== b; // false 

var c = undefined; 
c !== c; // false

var d = {};
d !== d; // false

var e = { valueOf: \"foo\" }; 
e !== e; // false

Didn\'t realize this until @allsyed commented, but this is in the ECMA spec: https://tc39.github.io/ecma262/#sec-isnan-number

回答3:

Use this code:

isNaN(\'geoff\');

See isNaN() docs on MDN.

alert ( isNaN(\'abcd\'));  // alerts true
alert ( isNaN(\'2.0\'));  // alerts false
alert ( isNaN(2.0));  // alerts false

回答4:

As far as a value of type Number is to be tested whether it is a NaN or not, the global function isNaN will do the work

isNaN(any-Number);

For a generic approach which works for all the types in JS, we can use any of the following:

For ECMAScript-5 Users:

#1
if(x !== x) {
    console.info(\'x is NaN.\');
}
else {
    console.info(\'x is NOT a NaN.\');
}

For people using ECMAScript-6:

#2
Number.isNaN(x);

And For consistency purpose across ECMAScript 5 & 6 both, we can also use this polyfill for Number.isNan

#3
//Polyfill from MDN
Number.isNaN = Number.isNaN || function(value) {
    return typeof value === \"number\" && isNaN(value);
}
// Or
Number.isNaN = Number.isNaN || function(value) {     
    return value !== value;
}

please check This Answer for more details.

回答5:

NaN is a special value that can\'t be tested like that. An interesting thing I just wanted to share is this

var nanValue = NaN;
if(nanValue !== nanValue) // Returns true!
    alert(\'nanValue is NaN\');

This returns true only for NaN values and Is a safe way of testing. Should definitely be wrapped in a function or atleast commented, because It doesnt make much sense obviously to test if the same variable is not equal to each other, hehe.

回答6:

You should use the global isNaN(value) function call, because:

It is supported cross-browser
See isNaN for documentation

Examples:

 isNaN(\'geoff\'); // true
 isNaN(\'3\'); // false

I hope this will help you.

回答7:

As of ES6, Object.is(..) is a new utility that can be used to test two values for absolute equality:

var a = 3 / \'bar\';
Object.is(a, NaN); // true

回答8:

To fix the issue where \'1.2geoff\' becomes parsed, just use the Number() parser instead.

So rather than this:

parseFloat(\'1.2geoff\'); // => 1.2
isNaN(parseFloat(\'1.2geoff\')); // => false
isNaN(parseFloat(\'.2geoff\')); // => false
isNaN(parseFloat(\'geoff\')); // => true

Do this:

Number(\'1.2geoff\'); // => NaN
isNaN(Number(\'1.2geoff\')); // => true
isNaN(Number(\'.2geoff\')); // => true
isNaN(Number(\'geoff\')); // => true

EDIT: I just noticed another issue from this though... false values (and true as a real boolean) passed into Number() return as 0! In which case... parseFloat works every time instead. So fall back to that:

function definitelyNaN (val) {
    return isNaN(val && val !== true ? Number(val) : parseFloat(val));
}

And that covers seemingly everything. I benchmarked it at 90% slower than lodash\'s _.isNaN but then that one doesn\'t cover all the NaN\'s:

http://jsperf.com/own-isnan-vs-underscore-lodash-isnan

Just to be clear, mine takes care of the human literal interpretation of something that is \"Not a Number\" and lodash\'s takes care of the computer literal interpretation of checking if something is \"NaN\".

回答9:

While @chiborg \'s answer IS correct, there is more to it that should be noted:

parseFloat(\'1.2geoff\'); // => 1.2
isNaN(parseFloat(\'1.2geoff\')); // => false
isNaN(parseFloat(\'.2geoff\')); // => false
isNaN(parseFloat(\'geoff\')); // => true

Point being, if you\'re using this method for validation of input, the result will be rather liberal.

So, yes you can use parseFloat(string) (or in the case of full numbers parseInt(string, radix)\' and then subsequently wrap that with isNaN(), but be aware of the gotcha with numbers intertwined with additional non-numeric characters.

回答10:

Simple Solution!

REALLY super simple! Here! Have this method!

function isReallyNaN(a) { return a !== a; };

Use as simple as:

if (!isReallyNaN(value)) { return doingStuff; }

See performance test here using this func vs selected answer

Also: See below 1st example for a couple alternate implementations.

Example:

function isReallyNaN(a) { return a !== a; };

var example = {
    \'NaN\': NaN,
    \'an empty Objet\': {},
    \'a parse to NaN\': parseFloat(\'$5.32\'),
    \'a non-empty Objet\': { a: 1, b: 2 },
    \'an empty Array\': [],
    \'a semi-passed parse\': parseInt(\'5a5\'),
    \'a non-empty Array\': [ \'a\', \'b\', \'c\' ],
    \'Math to NaN\': Math.log(-1),
    \'an undefined object\': undefined
  }

for (x in example) {
    var answer = isReallyNaN(example[x]),
        strAnswer = answer.toString();
    $(\"table\").append($(\"<tr />\", { \"class\": strAnswer }).append($(\"<th />\", {
        html: x
    }), $(\"<td />\", {
        html: strAnswer
    })))
};

table { border-collapse: collapse; }
th, td { border: 1px solid; padding: 2px 5px; }
.true { color: red; }
.false { color: green; }

<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"></script>
<table></table>

There are a couple alternate paths you take for implementaion, if you don\'t want to use an alternately named method, and would like to ensure it\'s more globally available. Warning These solutions involve altering native objects, and may not be your best solution. Always use caution and be aware that other Libraries you might use may depend on native code or similar alterations.

Alternate Implementation 1: Replace Native `isNaN` method.

//  Extremely simple. Just simply write the method.
window.isNaN = function(a) { return a !==a; }

Alternate Implementation 2: Append to Number Object
^{*Suggested as it is also a poly-fill for ECMA 5 to 6}

Number[\'isNaN\'] || (Number.isNaN = function(a) { return a !== a });
//  Use as simple as
Number.isNaN(NaN)

Alternate solution _{test if empty}

A simple window method I wrote that test if object is Empty. It\'s a little different in that it doesn\'t give if item is \"exactly\" NaN, but I figured I\'d throw this up as it may also be useful when looking for empty items.

/** isEmpty(varried)
 *  Simple method for testing if item is \"empty\"
 **/
;(function() {
   function isEmpty(a) { return (!a || 0 >= a) || (\"object\" == typeof a && /\\{\\}|\\[(null(,)*)*\\]/.test(JSON.stringify(a))); };
   window.hasOwnProperty(\"empty\")||(window.empty=isEmpty);
})();

Example:

;(function() {
   function isEmpty(a) { return !a || void 0 === a || a !== a || 0 >= a || \"object\" == typeof a && /\\{\\}|\\[(null(,)*)*\\]/.test(JSON.stringify(a)); };
   window.hasOwnProperty(\"empty\")||(window.empty=isEmpty);
})();

var example = {
    \'NaN\': NaN,
    \'an empty Objet\': {},
    \'a parse to NaN\': parseFloat(\'$5.32\'),
    \'a non-empty Objet\': { a: 1, b: 2 },
    \'an empty Array\': new Array(),
    \'an empty Array w/ 9 len\': new Array(9),
    \'a semi-passed parse\': parseInt(\'5a5\'),
    \'a non-empty Array\': [ \'a\', \'b\', \'c\' ],
    \'Math to NaN\': Math.log(-1),
    \'an undefined object\': undefined
  }

for (x in example) {
	var answer = empty(example[x]),
		strAnswer = answer.toString();
	$(\"#t1\").append(
		$(\"<tr />\", { \"class\": strAnswer }).append(
			$(\"<th />\", { html: x }),
			$(\"<td />\", { html: strAnswer.toUpperCase() })
		)
	)
};


function isReallyNaN(a) { return a !== a; };
for(x in example){var answer=isReallyNaN(example[x]),strAnswer=answer.toString();$(\"#t2\").append($(\"<tr />\",{\"class\":strAnswer}).append($(\"<th />\",{html:x}),$(\"<td />\",{html:strAnswer.toUpperCase()})))};

table { border-collapse: collapse; float: left; }
th, td { border: 1px solid; padding: 2px 5px; }
.true { color: red; }
.false { color: green; }

<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"></script>
<table id=\"t1\"><thead><tr><th colspan=\"2\">isEmpty()</th></tr></thead><thead><tr><th>Value Type</th><th>Bool Return</th></tr></thead></table>
<table id=\"t2\"><thead><tr><th colspan=\"2\">isReallyNaN()</th></tr></thead><thead><tr><th>Value Type</th><th>Bool Return</th></tr></thead></table>

Extremely Deep Check If Is Empty

This last one goes a bit deep, even checking if an Object is full of blank Objects. I\'m sure it has room for improvement and possible pits, but so far, it appears to catch most everything.

function isEmpty(a) {
	if (!a || 0 >= a) return !0;
	if (\"object\" == typeof a) {
		var b = JSON.stringify(a).replace(/\"[^\"]*\":(0|\"0*\"|false|null|\\{\\}|\\[(null(,)?)*\\]),?/g, \'\').replace(/\"[^\"]*\":\\{\\},?/g, \'\');
		if ( /^$|\\{\\}|\\[\\]/.test(b) ) return !0;
		else if (a instanceof Array)  {
			b = b.replace(/(0|\"0*\"|false|null|\\{\\}|\\[(null(,)?)*\\]),?/g, \'\');
			if ( /^$|\\{\\}|\\[\\]/.test(b) ) return !0;
		}
	}
	return false;
}
window.hasOwnProperty(\"empty\")||(window.empty=isEmpty);

var example = {
    \'NaN\': NaN,
    \'an empty Objet\': {},
    \'a parse to NaN\': parseFloat(\'$5.32\'),
    \'a non-empty Objet\': { a: 1, b: 2 },
    \'an empty Array\': new Array(),
    \'an empty Array w/ 9 len\': new Array(9),
    \'a semi-passed parse\': parseInt(\'5a5\'),
    \'a non-empty Array\': [ \'a\', \'b\', \'c\' ],
    \'Math to NaN\': Math.log(-1),
    \'an undefined object\': undefined,
    \'Object Full of Empty Items\': { 1: \'\', 2: [], 3: {}, 4: false, 5:new Array(3), 6: NaN, 7: null, 8: void 0, 9: 0, 10: \'0\', 11: { 6: NaN, 7: null, 8: void 0 } },
    \'Array Full of Empty Items\': [\"\",[],{},false,[null,null,null],null,null,null,0,\"0\",{\"6\":null,\"7\":null}]
  }

for (x in example) {
	var answer = empty(example[x]),
		strAnswer = answer.toString();
	$(\"#t1\").append(
		$(\"<tr />\", { \"class\": strAnswer }).append(
			$(\"<th />\", { html: x }),
			$(\"<td />\", { html: strAnswer.toUpperCase() })
		)
	)
};


function isReallyNaN(a) { return a !== a; };
for(x in example){var answer=isReallyNaN(example[x]),strAnswer=answer.toString();$(\"#t2\").append($(\"<tr />\",{\"class\":strAnswer}).append($(\"<th />\",{html:x}),$(\"<td />\",{html:strAnswer.toUpperCase()})))};

table { border-collapse: collapse; float: left; }
th, td { border: 1px solid; padding: 2px 5px; }
.true { color: red; }
.false { color: green; }

<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"></script>
<table id=\"t1\"><thead><tr><th colspan=\"2\">isEmpty()</th></tr></thead><thead><tr><th>Value Type</th><th>Bool Return</th></tr></thead></table>
<table id=\"t2\"><thead><tr><th colspan=\"2\">isReallyNaN()</th></tr></thead><thead><tr><th>Value Type</th><th>Bool Return</th></tr></thead></table>

回答11:

If your environment supports ECMAScript 2015, then you might want to use Number.isNaN to make sure that the value is really NaN.

The problem with isNaN is, if you use that with non-numeric data there are few confusing rules (as per MDN) are applied. For example,

isNaN(NaN);       // true
isNaN(undefined); // true
isNaN({});        // true

So, in ECMA Script 2015 supported environments, you might want to use

Number.isNaN(parseFloat(\'geoff\'))

回答12:

I use underscore\'s isNaN function because in JavaScript:

isNaN(undefined) 
-> true

At the least, be aware of that gotcha.

回答13:

NaN in JavaScript stands for \"Not A Number\", although its type is actually number.

typeof(NaN) // \"number\"

To check if a variable is of value NaN, we cannot simply use function isNaN(), because isNaN() has the following issue, see below:

var myVar = \"A\";
isNaN(myVar) // true, although \"A\" is not really of value NaN

What really happens here is that myVar is implicitly coerced to a number:

var myVar = \"A\";
isNaN(Number(myVar)) // true. Number(myVar) is NaN here in fact

It actually makes sense, because \"A\" is actually not a number. But what we really want to check is if myVar is exactly of value NaN.

So isNaN() cannot help. Then what should we do instead?

In the light that NaN is the only JavaScript value that is treated unequal to itself, so we can check for its equality to itself using !==

var myVar; // undefined
myVar !== myVar // false

var myVar = \"A\";
myVar !== myVar // false

var myVar = NaN
myVar !== myVar // true

So to conclude, if it is true that a variable !== itself, then this variable is exactly of value NaN:

function isOfValueNaN(v) {
    return v !== v;
}

var myVar = \"A\";
isNaN(myVar); // true
isOfValueNaN(myVar); // false

回答14:

It seems that isNaN() is not supported in Node.js out of the box.
I worked around with

var value = 1;
if (parseFloat(stringValue)+\"\" !== \"NaN\") value = parseFloat(stringValue);

回答15:

I just want to share another alternative, it\'s not necessarily better than others here, but I think it\'s worth looking at:

function customIsNaN(x) { return (typeof x == \'number\' && x != 0 && !x); }

The logic behind this is that every number except 0 and NaN are cast to true.

I\'ve done a quick test, and it performs as good as Number.isNaN and as checking against itself for false. All three perform better than isNan

The results

customIsNaN(NaN);            // true
customIsNaN(0/0);            // true
customIsNaN(+new Date(\'?\')); // true

customIsNaN(0);          // false
customIsNaN(false);      // false
customIsNaN(null);       // false
customIsNaN(undefined);  // false
customIsNaN({});         // false
customIsNaN(\'\');         // false

May become useful if you want to avoid the broken isNaN function.

回答16:

function isNotANumber(n) {
  if (typeof n !== \'number\') {
    return true;
  } 
  return n !== n;
}

回答17:

NaN === NaN;        // false
Number.NaN === NaN; // false
isNaN(NaN);         // true
isNaN(Number.NaN);  // true

Equality operator (== and ===) cannot be used to test a value against NaN.

Look at Mozilla Documentation The global NaN property is a value representing Not-A-Numbe

The best way is using \'isNaN()\' which is buit-in function to check NaN. All browsers supports the way..

回答18:

The exact way to check is:

//takes care of boolen, undefined and empty

isNaN(x) || typeof(x) ===\'boolean\' || typeof(x) !==\'undefined\' || x!==\'\' ? \'is really a nan\' : \'is a number\'

回答19:

Maybe also this:

function isNaNCustom(value){
    return value.toString() === \'NaN\' && 
           typeof value !== \'string\' && 
           typeof value === \'number\'
}

回答20:

According to IEEE 754, all relationships involving NaN evaluate as false except !=. Thus, for example, (A >= B) = false and (A <= B) = false if A or B or both is/are NaN.

回答21:

I wrote this answer to another question on StackOverflow where another checks when NaN == null but then it was marked as duplicate so I don\'t want to waste my job.

Look at Mozilla Developer Network about NaN.

Short answer

Just use distance || 0 when you want to be sure you value is a proper number or isNaN() to check it.

Long answer

The NaN (Not-a-Number) is a weirdo Global Object in javascript frequently returned when some mathematical operation failed.

You wanted to check if NaN == null which results false. Hovewer even NaN == NaN results with false.

A Simple way to find out if variable is NaN is an global function isNaN().

Another is x !== x which is only true when x is NaN. (thanks for remind to @raphael-schweikert)

But why the short answer worked?

Let\'s find out.

When you call NaN == false the result is false, same with NaN == true.

Somewhere in specifications JavaScript has an record with always false values, which includes:

NaN - Not-a-Number
\"\" - empty string
false - a boolean false
null - null object
undefined - undefined variables
0 - numerical 0, including +0 and -0

回答22:

Another solution is mentioned in MDN\'s parseFloat page

It provides a filter function to do strict parsing

var filterFloat = function (value) {
    if(/^(\\-|\\+)?([0-9]+(\\.[0-9]+)?|Infinity)$/
      .test(value))
      return Number(value);
  return NaN;
}


console.log(filterFloat(\'421\'));               // 421
console.log(filterFloat(\'-421\'));              // -421
console.log(filterFloat(\'+421\'));              // 421
console.log(filterFloat(\'Infinity\'));          // Infinity
console.log(filterFloat(\'1.61803398875\'));     // 1.61803398875
console.log(filterFloat(\'421e+0\'));            // NaN
console.log(filterFloat(\'421hop\'));            // NaN
console.log(filterFloat(\'hop1.61803398875\'));  // NaN

And then you can use isNaN to check if it is NaN

回答23:

I\'ve created this little function that works like a charm. Instead of checking for NaN which seems to be counter intuitive, you check for a number. I\'m pretty sure I am not the first to do it this way, but I thought i\'d share.

function isNum(val){
    var absVal = Math.abs(val);
    var retval = false;
    if((absVal-absVal) == 0){
        retval = true
    }

    return retval;
}

回答24:

Found another way, just for fun.

function IsActuallyNaN(obj) {
  return [obj].includes(NaN);  
}

回答25:

marksyzm\'s answer works well, but it does not return false for Infinity as Infinity is techinicly not a number.

i came up with a isNumber function that will check if it is a number.

function isNumber(i) {
    return !isNaN(i && i !== true ? Number(i) : parseFloat(i)) && [Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY].indexOf(i) === -1;
}

console.log(isNumber(Infinity));
console.log(isNumber(\"asdf\"));
console.log(isNumber(1.4));
console.log(isNumber(NaN));
console.log(isNumber(Number.MAX_VALUE));
console.log(isNumber(\"1.68\"));

UPDATE: i noticed that this code fails for some parameters, so i made it better.

function isNumber(i) {//function for checking if parameter is number
if(!arguments.length) {
throw new SyntaxError(\"not enough arguments.\");
	} else if(arguments.length > 1) {
throw new SyntaxError(\"too many arguments.\");
	} else if([Number.NEGATIVE_INFINITY, Number.POSITIVE_INFINITY].indexOf(i) !== -1) {
throw new RangeError(\"number cannot be \\xB1infinity.\");
	} else if(typeof i === \"object\" && !(i instanceof RegExp) && !(i instanceof Number) && !(i === null)) {
throw new TypeError(\"parameter cannot be object/array.\");
	} else if(i instanceof RegExp) {
throw new TypeError(\"parameter cannot be RegExp.\");
	} else if(i == null || i === undefined) {
throw new ReferenceError(\"parameter is null or undefined.\");
	} else {
return !isNaN(i && i !== true ? Number(i) : parseFloat(i)) && (i === i);
	}
}
console.log(isNumber(Infinity));
console.log(isNumber(this));
console.log(isNumber(/./ig));
console.log(isNumber(null));

回答26:

alert(\"1234567890.\".indexOf(String.fromCharCode(mycharacter))>-1);

This is not elegant. but after trying isNAN() I arrived at this solution which is another alternative. In this example I also allowed \'.\' because I am masking for float. You could also reverse this to make sure no numbers are used.

(\"1234567890\".indexOf(String.fromCharCode(mycharacter))==-1)

This is a single character evaluation but you could also loop through a string to check for any numbers.

回答27:

Is (NaN >= 0) ?...... \"I don\'t Know\".

function IsNotNumber( i ){
    if( i >= 0 ){ return false; }
    if( i <= 0 ){ return false; }
    return true;
}

Conditions only execute if TRUE.

Not on FALSE.

Not on \"I Don\'t Know\".

回答28:

Simply convert the result to String and compare with \'NaN\'.

var val = Number(\"test\");
if(String(val) === \'NaN\') {
   console.log(\"true\");
}

回答29:

So I see several responses to this,

But I just use:

function isNaN(x){
     return x == x && typeof x == \'number\';
}

标签： javascript nan

浪荡孟婆

女 | 书童

私信

收藏的人(0)

Ta的文章更多文章

0条评论

还没有人评论过~

How do you check that a number is NaN in JavaScrip

问题:

回答1:

回答2:

回答3:

回答4:

回答5:

回答6:

回答7:

回答8:

回答9:

回答10:

Simple Solution!

Example:

Alternate Implementation 1: Replace Native isNaN method.

Alternate Implementation 2: Append to Number Object*Suggested as it is also a poly-fill for ECMA 5 to 6

Example:

Extremely Deep Check If Is Empty

回答11:

回答12:

回答13:

回答14:

回答15:

回答16:

回答17:

回答18:

回答19:

回答20:

回答21:

Short answer

Long answer

But why the short answer worked?

回答22:

回答23:

回答24:

回答25:

回答26:

回答27:

回答28:

回答29:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

Alternate Implementation 1: Replace Native `isNaN` method.

Alternate Implementation 2: Append to Number Object
^{*Suggested as it is also a poly-fill for ECMA 5 to 6}