Learn 9 ways you can convert a string to a number type with JavaScript

Posted on Apr 10, 2022

Learn how you can convert a string to a number type natively using JavaScript

Depending on the conditions you have in your project, there are 9 ways to convert a string type into a number type in JavaScript

When you want a rounded number out of the string, then you can use these functions and methods:

  • parseInt()
  • Math.round()
  • Math.floor()
  • Math.ceil()

When you want a number with floating points, then you can use these functions and operators:

  • Number()
  • parseFloat()
  • The unary + operator
  • The unary - operator
  • Implicit conversion with the minus, multiplication, division, or remainder operator

Let’s see an example of these functions in action next.

Create a rounded number from the string

The parseInt() function parses a value you passed as its argument and tries to return a number that represents that value.

When you pass a string into the function, it will return a whole number as shown below:

parseInt("23"); // 23

// parsing a floating number string:
parseInt("7.31"); // 7

// rounded down even when the floating number > .49
parseInt("7.91"); // 7

// String with no number representative
parseInt("a"); // NaN

Note that strings with floating numbers are always rounded down, even when the floating number is greater than .49.

You can use the Math.round() method to round the string with floating numbers up or down depending on the floating number’s value:

Math.round("2.17"); // 2

// rounded up when floating number >= .5
Math.round("2.5"); // 3

// rounded down when floating number < .5
Math.round("2.49"); // 2

To always round the floating number down, use the Math.floor() method:

Math.floor("2.17"); // 2

Math.floor("2.5"); // 2

Math.floor("2.49"); // 2

To always round the floating number up, use the Math.ceil() method:

Math.ceil("2.17"); // 3

Math.ceil("2.5"); // 3

Math.ceil("2.49"); // 3

And that’s how you create a rounded number when converting a string into a number.

Next, let’s learn how to convert a string into a number and preserve the floating points.

Create a decimal number from the string

Decimal numbers are numbers with floating points. The native Number() function in JavaScript will convert your string into its number representation without rounding the floating points:

Number("7"); // 7

Number("7.22"); // 7.22

Number("7.52"); // 7.52

Number("7.52.447"); // NaN

Next, the parseFloat() function is a native JavaScript function to return a floating-point number from a value.

The code below shows how the parseFloat() function works:

parseFloat("7"); // 7

parseFloat("7.52"); // 7.52

// still parse number in wrong format:

parseFloat("7.52.447"); // 7.52
parseFloat("7.52aabcs"); // 7.52

When encountering an incorrect number format, the parseFloat() function still tries to return a number that represents the string.

On the other hand, the Number() function immediately returns a NaN when the number format is unrecognized.

The Number() function is more strict than the parseFloat() function.

Besides these two functions, you can also convert a string of decimal numbers using the unary plus (+) and minus (-) operator.

The + operator evaluates the operand you added next to the operator and tries to return a number as shown below:

+"7.22"; // returns 7.22
+"777"; // returns 777

+"-52"; // -52

+"ab"; // NaN

The - operator evaluates the given operand and negates the number, creating a negative number in the process:

The code below shows how the - operator works:

-"7.22"; // -7.22
-"777"; // -777

// negative number string will return a positive number
-"-52"; // 52
-"-52.89"; // 52.89

-"ab"; // NaN

And that’s how the - operator can be used to convert a string into a number.

JavaScript implicit type conversion with minus / multiplication / division / remainder operator

JavaScript automatically converts a string into a number when you use an arithmetic operator except for the unary + operator.

Consider the following code examples:

"55" - 1; // 54

"5" * 2; // 10

"20" / 5; // 4

"100" % 6; // 4

"-7" - 3; // -10

When you use the + operator, JavaScript will concatenate the string and the number instead of converting the string.

In the following code examples, the expressions produce a string instead of a number:

// returns a string:

"50" + 1; // "501"
"3.2" + 1; // "32.1"

// returns a number:

Number("5.7") + 3; // 8.7
+"6.1" + 3; // 9.1

You need to manually convert the string into a number before using the + operator as shown above.

And that’s how you can convert a string into a number in JavaScript.

Depending on the requirements you have in your project, you can use one of the nine ways mentioned in this tutorial.

Thank you for reading. I hope this tutorial has been useful for you. 🙏

Level up your programming skills

I'm sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!

No spam. Unsubscribe anytime.