Global JavaScript methods to convert variables to numbers
August 7, 2020

Converting Variables to Numbers

There are 3 JavaScript methods that can be used to convert variables to numbers:

1. The Number() method

2. The parseInt() method

3. The parseFloat() method

These methods are not number methods, but global JavaScript methods.

Global JavaScript Methods

JavaScript global methods can be used on all JavaScript data types.

Number() Method

Number() can be used to convert JavaScript variables to numbers:

console.log(Number(true));         // 1
console.log(Number(false));        // 0
console.log(Number("1"));         // 1
console.log(Number("  1"));       // 1
console.log(Number("1  "));       // 1
console.log(Number(" 1  "));      // 1
console.log(Number("1.99"));      // 1.99
console.log(Number("1,99"));      // NaN
console.log(Number("1 99"));      // NaN
console.log(Number("John"));       // NaN

If the number cannot be converted, NaN (Not a Number) is returned.

We can use the Number() Method on Dates

It will convert a date into a number.

var date = new Date("2017-09-30");



The Number() method above returns the number of milliseconds since 1.1.1970.

parseInt() Method

parseInt() method parses a string into a whole number.

You can pass the number with spaces too but only the first number is returned:

console.log(parseInt("1"));  //1
console.log(parseInt("1.99"));  //1
console.log(parseInt("1 2 3"));  //1
console.log(parseInt("1 string"));  //1
console.log(parseInt("string"));  //NaN

As you can see in the example above, if the number cannot be converted, NaN (Not a Number) is returned.

parseFloat() Method

parseFloat() method parses a string into a whole number just like parseInt() but it can return the float numbers if any.

console.log(parseFloat("1"));  //1
console.log(parseFloat("1.99"));  //1.99
console.log(parseFloat("1 2 3"));  //1
console.log(parseFloat("1 string"));  //1
console.log(parseFloat("string"));  //NaN

As you can see in the example above, if the number cannot be converted, NaN (Not a Number) is returned.



Leave a Reply

Most Read

#1 How to set opacity or transparency using CSS? #2 Pagination in CSS with multiple examples #3 How to check if radio button is checked or not using JavaScript? #4 How to make HTML form interactive and using CSS? #5 How to uninstall Cocoapods from the Mac OS? #6 How to add Read More Read Less Button using JavaScript?

Recently Posted

Feb 24 WordPress get_posts Examples Feb 24 How to modify the latest post array using get_posts() in WordPress? Feb 22 WordPress: How to get ACF field values from another post? Feb 22 WordPress: How to print ACF repeater field values? Feb 22 WordPress: How to print ACF array field values? Feb 21 WordPress: How to get field values in Advanced Custom Fields?

You might also like these

Where is the PHP log file located on Mac OS?PHPUnderstanding the confusing and handy “This” keyword in JavaScriptJavaScriptSolution to “NullInjectorError: No provider for module” in Angular 9AngularHow to vertically align a html radio button to it’s label?CSSGive buttons accessible namesUI/UXSteps to Secure a VPNMisc