67

I store some parameters client-side in HTML and then need to compare them as integers. Unfortunately I have come across a serious bug that I cannot explain. The bug seems to be that my JS reads parameters as strings rather than integers, causing my integer comparisons to fail.

I have generated a small example of the error, which I also can't explain. The following returns 'true' when run:

console.log("2" > "10")
VLAZ
  • 26,331
  • 9
  • 49
  • 67
Ronan Sharp
  • 679
  • 1
  • 5
  • 3
  • This is really an instance of lexicographical string comparison: [string comparison in javascript](http://stackoverflow.com/q/7087811/1816580) (read: the Why? of this question) – Artjom B. Feb 26 '16 at 19:46

9 Answers9

95

Parse the string into an integer using parseInt:

javascript:alert(parseInt("2", 10)>parseInt("10", 10))
icktoofay
  • 126,289
  • 21
  • 250
  • 231
  • 1
    Fantastic. Is there also a way to check if the value is an int in the first place, simply so I can try to avoid more bugs at my end... – Ronan Sharp Apr 12 '11 at 03:39
  • 3
    @Ronan: You can actually pass an int as the first argument to `parseInt`. `parseInt` turns its first argument into a string if it isn't already one, then parses it. If you really need to check if something is an int, though, you can usually use `typeof 123` and check for a result of `"number"`. This can have problems, however, if you pass in `new Number(123)`, in which case it will return `"object"`, but that isn't very common. – icktoofay Apr 12 '11 at 03:43
  • 1
    @Ronan: Oh, and you can check the `constructor` property, too, and compare that against `Number`. That seems to work in both cases. – icktoofay Apr 12 '11 at 03:44
  • If the param is a string that's a number then `parseFloat(param) == param` – mVChr Apr 12 '11 at 04:20
33

Checking that strings are integers is separate to comparing if one is greater or lesser than another. You should always compare number with number and string with string as the algorithm for dealing with mixed types not easy to remember.

'00100' < '1' // true

as they are both strings so only the first zero of '00100' is compared to '1' and because it's charCode is lower, it evaluates as lower.

However:

'00100' < 1 // false

as the RHS is a number, the LHS is converted to number before the comparision.

A simple integer check is:

function isInt(n) {
  return /^[+-]?\d+$/.test(n);
}

It doesn't matter if n is a number or integer, it will be converted to a string before the test.

If you really care about performance, then:

var isInt = (function() {
  var re = /^[+-]?\d+$/;

  return function(n) {
    return re.test(n);
  }
}());

Noting that numbers like 1.0 will return false. If you want to count such numbers as integers too, then:

var isInt = (function() {
  var re = /^[+-]?\d+$/;
  var re2 = /\.0+$/;

  return function(n) {
    return re.test((''+ n).replace(re2,''));
  }
}());

Once that test is passed, converting to number for comparison can use a number of methods. I don't like parseInt() because it will truncate floats to make them look like ints, so all the following will be "equal":

parseInt(2.9) == parseInt('002',10) == parseInt('2wewe')

and so on.

Once numbers are tested as integers, you can use the unary + operator to convert them to numbers in the comparision:

if (isInt(a) && isInt(b)) {
  if (+a < +b) {
    // a and b are integers and a is less than b
  }
}

Other methods are:

Number(a); // liked by some because it's clear what is happening
a * 1      // Not really obvious but it works, I don't like it
RobG
  • 142,382
  • 31
  • 172
  • 209
  • 1
    The unary + operator is a lifesaver for quick homogenization - thanks for the tip. – AVH Sep 25 '16 at 08:12
29

Comparing Numbers to String Equivalents Without Using parseInt

console.log(Number('2') > Number('10'));
console.log( ('2'/1) > ('10'/1) );

var item = { id: 998 }, id = '998';
var isEqual = (item.id.toString() === id.toString());
isEqual;
Cody
  • 9,785
  • 4
  • 61
  • 46
  • 2
    this method is better no matter how big the number is :) thanks – Mudasar Rauf Mar 03 '16 at 12:05
  • Which is your preferred? `.toString()`, `Number` constructor, or arithmetical? Why? – Cody Mar 03 '16 at 16:22
  • This just works best. You don't need to cast anything + to make sure everything is save, check whether the value you want to compare is `undefined` / `null` (in case you did save an undefined/null value and comparing two undefined / null values). – Baran Apr 13 '18 at 08:34
6

+ operator will coerce the string to a number.

console.log( +"2" > +"10" )
Emeeus
  • 5,072
  • 2
  • 25
  • 37
5

use parseInt and compare like below:

javascript:alert(parseInt("2")>parseInt("10"))
Sergio
  • 28,539
  • 11
  • 85
  • 132
Senthil
  • 5,514
  • 2
  • 22
  • 11
5

Always remember when we compare two strings. the comparison happens on chacracter basis. so '2' > '12' is true because the comparison will happen as '2' > '1' and in alphabetical way '2' is always greater than '1' as unicode. SO it will comeout true. I hope this helps.

Bimlendu Kumar
  • 226
  • 2
  • 17
4

You can use Number() function also since it converts the object argument to a number that represents the object's value.

Eg: javascript:alert( Number("2") > Number("10"))

2

The answer is simple. Just divide string by 1. Examples:

"2" > "10"   - true

but

"2"/1 > "10"/1 - false

Also you can check if string value really is number:

!isNaN("1"/1) - true (number)
!isNaN("1a"/1) - false (string)
!isNaN("01"/1) - true (number)
!isNaN(" 1"/1) - true (number)
!isNaN(" 1abc"/1) - false (string)

But

!isNaN(""/1) - true (but string)

Solution

number !== "" && !isNaN(number/1)
OlegDovger
  • 122
  • 6
2

The alert() wants to display a string, so it will interpret "2">"10" as a string.

Use the following:

var greater = parseInt("2") > parseInt("10");
alert("Is greater than? " + greater);

var less = parseInt("2") < parseInt("10");
alert("Is less than? " + less);
Steve
  • 21
  • 1