Vanilla JS - 7 ways to convert a string to a number in JavaScript

This is a quick post to show examples of 7 different ways to convert a string to a number in JavaScript along with the output that each gives for different values.

Number()

The Number() function accepts a string parameter and converts it to an integer or floating point number, or returns NaN (Not a Number) if the input value doesn't represent a number. An interesting thing to note is that zero (0) is returned for an empty string (Number('')).

The way to check if a value equals NaN is to use the isNan() function.

parseInt()

The parseInt() function accepts a string parameter and converts it to an integer number, or returns NaN (Not a Number) if the input value doesn't represent a number. If the input string begins with a number (e.g. '123abc') then parseInt() will return the number from the beginning of the string (e.g. 123). If the input is an empty string (Number('')) then NaN (Not a Number) is returned.

parseFloat()

The parseFloat() function accepts a string parameter and converts it to an floating point number (with a decimal point if required), or returns NaN (Not a Number) if the input value doesn't represent a number. If the input string begins with a number (e.g. '123abc') then parseInt() will return the number from the beginning of the string (e.g. 123). If the input is an empty string (Number('')) then NaN (Not a Number) is returned.

Unary plus operator (+)

The unary plus operator (+) placed before a string converts it to an integer or floating point number, or returns NaN (Not a Number) if the input value doesn't represent a number. Like the Number() function, it returns zero (0) for an empty string (+'').

Multiply by 1 (* 1)

Multiplying a string by 1 ([string] * 1) works just like the unary plus operator above, it converts the string to an integer or floating point number, or returns NaN (Not a Number) if the input value doesn't represent a number. Like the Number() function, it returns zero (0) for an empty string ('' * 1).

Math.round()

The Math.round() method accepts a string parameter and converts it to an integer that is rounded to the closest whole number, for example '12.4' is converted to 12 and '12.5' is converted to 13. It returns NaN (Not a Number) if the input value doesn't represent a number, and like Number() it returns zero (0) for an empty string (Math.round('')).

Math.floor()

The Math.floor() method accepts a string parameter and converts it to an integer that is rounded down to the lowest whole number, for example '12.9' is converted to 12. It returns NaN (Not a Number) if the input value doesn't represent a number, and like Number() it returns zero (0) for an empty string (Math.floor('')).

Here they are in action: (Edit on StackBlitz at https://stackblitz.com/edit/vanilla-js-ways-to-convert-a-string-to-a-number)

JavaScript Convert String to Number Code

This is the JavaScript code running in the above example.

// Number
set('number1', Number('123'));
set('number2', Number('12.5'));
set('number3', Number('123abc'));
set('number4', Number('abc'));
set('number5', Number(''));

// parseInt
set('parseInt1', parseInt('123'));
set('parseInt2', parseInt('12.5'));
set('parseInt3', parseInt('123abc'));
set('parseInt4', parseInt('abc'));
set('parseInt5', parseInt(''));

// parseFloat
set('parseFloat1', parseFloat('123'));
set('parseFloat2', parseFloat('12.5'));
set('parseFloat3', parseFloat('123abc'));
set('parseFloat4', parseFloat('abc'));
set('parseFloat5', parseFloat(''));

// unary plus operator (+)
set('unaryPlus1', +'123');
set('unaryPlus2', +'12.5');
set('unaryPlus3', +'123abc');
set('unaryPlus4', +'abc');
set('unaryPlus5', +'');

// multiply by 1 (* 1)
set('multiply1', '123' * 1);
set('multiply2', '12.5' * 1);
set('multiply3', '123abc' * 1);
set('multiply4', 'abc' * 1);
set('multiply5', '' * 1);

// Math.round
set('mathRound1', Math.round('123'));
set('mathRound2', Math.round('12.5'));
set('mathRound3', Math.round('123abc'));
set('mathRound4', Math.round('abc'));
set('mathRound5', Math.round(''));

// Math.floor
set('mathFloor1', Math.floor('123'));
set('mathFloor2', Math.floor('12.5'));
set('mathFloor3', Math.floor('123abc'));
set('mathFloor4', Math.floor('abc'));
set('mathFloor5', Math.floor(''));

function set(id, value) {
    document.getElementById(id).innerHTML = value;
}