Converting string to number (no NaNs)

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Converting string to number (no NaNs)

Post by JellyFish »

The simplest way to convert a string into a number is to use either parseInt or the + unary operator.

Code: Select all

 
var cssPxValue = element.style.marginTop;
parseInt(cssPxValue); //converts cssPxValue to an number
//or
(+cssPxValue); //faster than parseInt
 
This will convert strings that at least start with a number ("123abc", "11px", etc), but for strings that do not start with a number character or even contain them ("abc123", "auto", etc) both parseInt and the + operator return NaN. Sense in a css property there can be things like "auto", I want to know of a way to convert strings to numbers always; 0 rather than NaN.

The current way I have to do this is:

Code: Select all

 
(+cssPxValue.replace(/\D*/g, ""));
 
But through my testing have found that adding the replace method causes the operation to be drastically slower than without it (going from 0.004ms up to 3.544ms). For what I'm using this for, performance is #1 and these little numbers add up big time. So, I need a solution that is close to the speed of the basic conversion, but does convert all strings to a number and not NaN.

Thanks for reading. Any thoughts on this?

EDIT: I found a faster and more reliable solution, but still "slower":

Code: Select all

 
fuction toNumber(s) {
return +s.replace(/[^\d\.]*/g, '');
}
 
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: Converting string to number (no NaNs)

Post by VladSun »

How about
[js]function toNumber(a){    return isNaN(res = parseInt(a)) ? 0 : res;}[/js]

is it faster?

or
[js]function toNumber(a){    return isNaN(res = a - 0) ? 0 : res;} [/js]
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: Converting string to number (no NaNs)

Post by VladSun »

JellyFish wrote:... both parseInt and the + operator return NaN. ...
That's not quite true :)

[js]var s = 'string';alert(s + 1234);[/js]

=> string1234

That's because the + operator is also the string concatenation operator in JS.
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: Converting string to number (no NaNs)

Post by VladSun »

And last :twisted: - I'd prefer having this:
[js]String.prototype.toNumber = function (a){    return isNaN(res = a - 0) ? 0 : res;} ... var s = '1234';alert(s.toNumber());var s = 'auto';alert(s.toNumber());[/js]
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Re: Converting string to number (no NaNs)

Post by jayshields »

VladSun wrote: [js]function toNumber(a){    return isNaN(res = parseInt(a)) ? 0 : res;}[/js]
That's what I'd suggest.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Re: Converting string to number (no NaNs)

Post by JellyFish »

Sorry for the long absence.

Code: Select all

function toNumber(a)
{
    return isNaN(res = parseInt(a)) ? 0 : res;
}
First of all. Doesn't res become a global variable here? That's bad. Declaring res within the function not only avoids the conflict, but also boost speed.

Code: Select all

function toNumber(a)
{
    var res;
    return isNaN(res = parseInt(a)) ? 0 : res;
}
I assume this is because the global spaces is quite crowded, so it takes longer to assign a new variable there.

I tested it out and it is faster then my previous method. This new method turns out to clock an average of .005ms, while my previous one was around .008ms. In case you're wondering how I'm testing the performance: I'm using firebug and just profiling this code:

Code: Select all

for (var i=0; i<10000; ++i)
{
(function foo(){
// code too test in here
})();
}
The profile will show the number of calls for foo and it's average time, min, max, etc. It works well, although it's only for firefox; Idk if other browser's javascript engines will have the same results.

Thanks for your posts guys! :D
Last edited by JellyFish on Fri Jan 22, 2010 3:01 am, edited 1 time in total.
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: Converting string to number (no NaNs)

Post by VladSun »

JellyFish wrote:Sorry for the long absence.

Code: Select all

function toNumber(a)
{
    return isNaN(res = parseInt(a)) ? 0 : res;
}
First of all. Doesn't res become a global variable here? That's bad. Declaring res within the function not only avoids the conflict, but also boost speed.
Yes, you're right - my bad :)

JellyFish wrote:PS: I decided to use +a rather than parseInt(a). Simply because + unary operator was faster than parseInt when I tested it by itself.
Hm...
VladSun wrote: [js]var s = 'string';alert(s + 1234);[/js]

=> string1234

That's because the + operator is also the string concatenation operator in JS.
Can you show us your function? I'd do it by using "- 0"

Also, I've noticed my OOP suggestion, is not quite OOP . It should be:[js]String.prototype.toNumber = function (){    var res;    return isNaN(res = this.valueOf() - 0) ? 0 : res;} var s = '1234';alert(s.toNumber());var s = 'auto';alert(s.toNumber());[/js]
There are 10 types of people in this world, those who understand binary and those who don't
Post Reply