Check if a variable contains a numerical value in Javascript?

In PHP, it's pretty easy:

is_numeric(23);//true
is_numeric("23");//true
is_numeric(23.5);//true
is_numeric(true);//false

But how do I do this in Javascript? I could use a regular expression, but is there a function for this?

Answers:

Answer

What about:

function isNumber(n){
    return typeof(n) != "boolean" && !isNaN(n);
}

The isNaN built-in function is used to check if a value is not a number.

Update: Christoph is right, in JavaScript Boolean types are convertible to Number, returning the 1 for true and 0 for false, so if you evaluate 1 + true the result will be 2.

Considering this behavior I've updated the function to prevent converting boolean values to its numeric representation.

Answer

I don't think any of the suggestions till now actually work. Eg

!isNaN(parseFloat(foo))

doesn't because parseFloat() ignores trailing non-numeric characters.

To work around this, you could compare the returned value to the one returned by a cast via Number() (or equivalently by using unary +, but I prefer explicit casting):

parseFloat(foo) === Number(foo)

This will still work if both functions return NaN because NaN !== NaN is true.

Another possibility would be to first cast to string, then to number and then check for NaN, ie

!isNaN(Number(String(foo)))

or equivalently, but less readable (but most likely faster)

!isNaN(+('' + foo))

If you want to exclude infinity values, use isFinite() instead of !isNaN(), ie

isFinite(Number(String(foo)))

The explicit cast via Number() is actually unnecessary, because isNan() and isFinite() cast to number implicitly - that's the reason why !isNaN() doesn't work!

In my opinion, the most appropriate solution therefore would be

isFinite(String(foo))

As Matthew pointed out, the second approach does not handle strings that only contain whitespace correctly.

It's not hard to fix - use the code from Matthew's comment or

isFinite(String(foo).trim() || NaN)

You'll have to decide if that's still nicer than comparing the results of parseFloat() and Number().

Answer

To check types in javascript you can use the typeof operator:

js> var x = 1;
js> typeof(x);
number

So:

if (typeof(x) === 'number') {
   // Do something
}

If you want to coerce the value of a variable to an integer, you can use parseInt(x, 10) which will parse the value as an integer in base 10. Similarly, you can use parseFloat if you want a floating point value. However, these will always coerce regardless of type so passing null, true, etc will always return a number. However, you can check whether its a valid number by calling isNaN.

So, putting it all together:

!isNaN(parseFloat(23)) // true
!isNaN(parseFloat('23')) // true
!isNaN(parseFloat(23.5)) // true
!isNaN(parseFloat(true)) // false

or

function isNumber(x) {
    return !isNaN(parseFloat(x));
}
Answer

This checks for numerical values, including negative and floating point numbers.

function is_numeric(val){
    return val && /^-?\d+(\.\d+)?$/.test(val + '');
}

@Vordreller: I corrected the Regex. It should work properly now.

Answer
function is_numeric(val) {
  return ((+val) == val);
}

That should do the trick.

Answer

Here's what I came up with:

value = "2.34";
if (parseFloat(value).toString() === value) {
    alert("number");
}

This should work with floats and ints, positive and negative. I don't know about infinity, as some of the answers above have discussed.

If your value might actually be a number and not always a string, you can change the === to a == and it will handle both.

Answer

Here's some benchmarks for isNaN vs. isFinite and typeof === "number"

http://jsperf.com/isnan-vs-isfinite-vs/3

Apparently typeof === "number" is roughly 5 times faster

Answer

Run the code snippet to see comparisons of top answers on this topic.

Some test cases are not highlighted (and don't contribute to the summary). These cases are flagged as ambiguous because it is not clear whether a given value should or should not be considered a number.

// Each of these functions should output a truthy/falsy value if the input is
// a number
const solutionsToTest = [
  v => parseFloat(v),
  v => Number(v),
  v => !isNaN(v),
  v => typeof v != "boolean" && !isNaN(v),
  v => isFinite(String(v)),
  v => !isNaN(parseFloat(v)) && isFinite(v)
];

const testCases = [
  //[ Test Name, Test Value, Expected Output, Is Ambiguous ]

  // Whitespace
  ['""', "", false, false],
  ['"\\t"', "\t", false, false],
  ['" "', " ", false, false],

  // Infinity
  ['"Infinity"', "Infinity", false, true],
  ['"+Infinity"', "Infinity", false, true],
  ["-Infinity", -Infinity, false, true],
  ["Infinity", Infinity, false, true],

  // Numbers mixed with symbols
  ['"123abc"', "123abc", false, true],
  ['"abc123"', "abc123", false, false],
  ['".0."', ".0.", false, false],
  ['"1."', "1.", true, true],
  ['"."', ".", false, true],
  ['"01"', "01", true, true],
  ['"-0"', "-0", true, true],
  ["+1", +1, true, true],
  ["-1", -1, true, true],

  // Other js types
  ["'null'", "null", false, false],
  ["'true'", "true", false, false],
  ["'false'", "false", false, false],
  ["null", null, false, false],
  ["true", true, false, false],
  ["false", false, false, false],
  ["NaN", NaN, false, false],
  ["[]", [], false, false],
  ["{}", {}, false, false],
  ["/./", /./, false, false],
  ["() => {}", () => {}, false, false]
];

const styles = {
  code: {
    fontFamily: "monospace",
    fontSize: 16
  },
  success: {
    backgroundColor: "#00ff5478"
  },
  failure: {
    backgroundColor: "#ff00008c"
  }
};

class TestCaseTable extends React.Component {
  static renderTableHeader(solutionsToTest) {
    return (
      <tr>
        <th>
          <p>Test Case</p>
        </th>
        {solutionsToTest.map(f => (
          <th key={f.toString()}>
            <p style={styles.code}>{f.toString()}</p>
          </th>
        ))}
      </tr>
    );
  }
  static renderTableRow(testCase, solutionsToTest) {
    const [testName, input, expectedOutput, isAmbiguous] = testCase;
    return (
      <tr key={testName}>
        <td style={styles.code}>{testName}</td>
        {solutionsToTest.map(f => {
          const output = Boolean(f(input));
          const style = isAmbiguous
            ? {}
            : output == expectedOutput ? styles.success : styles.failure;
          return (
            <td style={style} key={f.toString()}>
              <p>{output + ""}</p>
            </td>
          );
        })}
      </tr>
    );
  }
  render() {
    // Sort test cases, put the ambiguous ones after (but maintain stable sort
    // order)
    let sortedCases = [
      ...testCases.filter(([a, b, c, ambiguous]) => !ambiguous),
      ...testCases.filter(([a, b, c, ambiguous]) => ambiguous)
    ];
    return (
      <table>
        <thead>{TestCaseTable.renderTableHeader(solutionsToTest)}</thead>
        <tbody>
          {sortedCases.map(tc =>
            TestCaseTable.renderTableRow(tc, solutionsToTest)
          )}
        </tbody>
      </table>
    );
  }
}
class TestCaseSummaryTable extends React.Component {
  renderTableHeader(solutionsToTest) {
    return (
      <tr>
        <th>Summary</th>
        {solutionsToTest.map(f => (
          <th key={f.toString()}>
            <p style={styles.code}>{f.toString()}</p>
          </th>
        ))}
      </tr>
    );
  }
  renderSuccessRateRow(solutionsToTest, testCases) {
    // Ignore potentially ambiguous test cases
    testCases = testCases.filter(
      ([name, input, expected, ambiguous]) => !ambiguous
    );

    const numSuccess = testSolution =>
      testCases.reduce((succeeded, [name, input, expected]) => {
        return succeeded + (Boolean(testSolution(input)) == expected ? 1 : 0);
      }, 0);

    return (
      <tr>
        <td>
          <p>Test Success</p>
        </td>
        {solutionsToTest.map(f => (
          <td>
            <p>
              {numSuccess(f)} / {testCases.length}
            </p>
          </td>
        ))}
      </tr>
    );
  }
  render() {
    return (
      <table>
        <thead>{this.renderTableHeader(solutionsToTest)}</thead>
        <tbody>{this.renderSuccessRateRow(solutionsToTest, testCases)}</tbody>
      </table>
    );
  }
}

const root = () => {
  return (
    <div>
      <TestCaseSummaryTable />
      <TestCaseTable />
    </div>
  );
};

ReactDOM.render(root(), document.querySelector("#application"));
td {
  text-align: center;
  vertical-align: middle;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="application"></div>

Answer

Here is my Solution : ES6/2015

function isValidNumber(value) {
  return typeof value === 'number' && Number.isNaN(value) === false;
}

Test Cases

isValidNumber(10) // true
isValidNumber(10.34) // true
isValidNumber('geo10') // false
isValidNumber('10geo') // false
isValidNumber('') // false
isValidNumber(NaN) // false
isValidNumber(true) // false
isValidNumber(false) // false

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.