DEV Community

Cover image for Vanilla JavaScript String to Number
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Vanilla JavaScript String to Number

Sometimes we want to convert a number to a string; in my latest code piece, there was a limit set on a data attribute. This comes true as a string, so how do we convert this to a number in JavaScript?

In this case, there is not one but three valid and supported methods of converting our string to a number.

  • Number
  • parseInt
  • parseFloat

JavaScript Number Method

Number is a generic way of converting. It's actually the more stricter check here are some examples with outputs:

<!-- Number -->
console.log(Number(`1337`)); // 1337
console.log(Number(`13.37`)); // 13.37
console.log(Number(`13leet37`)); // NaN
console.log(Number(`13,37`)); // NaN
Enter fullscreen mode Exit fullscreen mode

As you can see it works on actual numbers, but as soon as we use other characters or a comma it won't work.

JavaScript ParseInt Method

ParseInt converts our string into an integer non rounded.
It has two arguments, the input and the radix which is the base number. For us the default is 10

<!-- ParseInt -->
var text1 = '1337';
var text2 = '13.37';
var text3 = '13leet37';
var text4 = '13,37';
console.log(parseInt(text1, 10)); // 1337
console.log(parseInt(text2, 10)); // 13
console.log(parseInt(text3, 10)); // 13
console.log(parseInt(text4, 10)); // 13
Enter fullscreen mode Exit fullscreen mode

The downside can be it's rounding everything, so let's look at ParseFloat.

JavaScript ParseFloat Method

As mentioned the parseFloat is used to return stuff with decimals.

<!-- ParseFloat -->
var text1 = '1337';
var text2 = '13.37';
var text3 = '13.3leet37';
var text4 = '13,37';
console.log(parseFloat(text1, 10)); // 13.37
console.log(parseFloat(text2, 10)); // 13
console.log(parseFloat(text3, 10)); // 13.3
console.log(parseFloat(text4, 10)); // 13
Enter fullscreen mode Exit fullscreen mode

Very cool method!

See all these in action on Codepen.

See the Pen Vanilla JavaScript String to Number by Chris Bongers (@rebelchris) on CodePen.

Alt Text

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (13)

Collapse
 
rrdlpl profile image
R

+'1'

Collapse
 
bhagatparwinder profile image
Parwinder πŸ‘¨πŸ»β€πŸ’»

Keep in mind that this also works for hexadecimal.

console.log(+"0xF"); // 15
console.log(+"321"); // 321

And so does ~~

console.log(~~"0xF"); // 15
console.log(~~"321"); // 321
Collapse
 
dailydevtips1 profile image
Chris Bongers

I Actually didn't know about the ~~ What is it called?

Thread Thread
 
rrdlpl profile image
R • Edited

it's the NOT bitwise operator. It changes the 1 by 0 and 0 by 1. In that example, he is doing it twice.

~ 5 => ~0101 => 1010
~~5 => ~(~0101) => ~(1010) => 0101 => 5

w3schools.com/js/js_operators.asp

Collapse
 
dailydevtips1 profile image
Chris Bongers

πŸ˜‚πŸ‘

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt • Edited

I do realize all methods, but never notice that parseFloat trims, but Number return NaN.

Collapse
 
dailydevtips1 profile image
Chris Bongers

Yes, Number is very strict the string can only contain actual numbers!

Collapse
 
craignicol profile image
Craig Nicol (he/him)

Worth knowing that this depends on the user's browser locale. 13,37 is a valid number in French and German, whereas 13.37 is not.

Collapse
 
dailydevtips1 profile image
Chris Bongers

You are right, there is the option to use locales on strings and numbers before. but your right good to keep this in mind!

Collapse
 
g33knoob profile image
G33kNoob • Edited

Keep posting daily tips, i love to read and learning it
I use parsefloat to parsing bitcoin balance from rpc in my current project

Collapse
 
dailydevtips1 profile image
Chris Bongers

Awesome, thanks man! Glad people find them amazing 🀟

Collapse
 
furkankozen profile image
Furkan KΓΆzen

~~’1’

Collapse
 
dailydevtips1 profile image
Chris Bongers

I just saw above, actually didn't know that option 🀯