10 ways to Convert String to a Number in JavaScript


1. Using parseInt() function:

    The parseInt() function parses a string argument and returns an integer.


    Example 1: String to int

    console.log(parseInt('100'));

    100

    1 - Using parseInt function

    Example 2: String to int with base 2

    console.log(parseInt('200', 2));

    200


    Example 3: White-spaces are ignored.

    console.log(parseInt('   300   '));

    300


    Example 4: Leading zero's are ignored.

    console.log(parseInt('000400'));

    400


    Example 5: Decimal's are ignored.

    console.log(parseInt('500.678'));

    500

    Note: The decimals are ignored when using parseInt() function to convert String to Int.

    If the String value provided is not a valid number, then we get NaN as an output.


    Example 6: NaN output for Invalid String Number.

    console.log(parseInt('hello'));

    NaN


    Summary: parseInt()

    • It accepts an optional second argument (radix) that specifies the base of the number.
    • Leading whitespace is ignored.
    • Leading zeros are ignored.
    • Decimals are ignored..
    • If the string starts with '0x' or '0X', it's interpreted as a hexadecimal number.
    • If the string doesn't start with a valid numeric character, parseInt() returns NaN.
    • If the radix is not specified or is 0, JavaScript assumes base 10.
    • If the radix is not in the range 2-36 or is not a number, parseInt() returns NaN.
    • Negative numbers can be parsed by including a '-' sign at the beginning.
    • If the string contains non-numeric characters after valid numeric characters, parseInt() stops parsing at the non-numeric character.
    • If the string is empty or contains only non-numeric characters, parseInt() returns NaN

2. Using parseFloat() function

    The parseFloat() function parses a string argument and returns a floating point number.


    Example 7:

    console.log(parseFloat('600'));
    

    600

    2 - Using parseFloat Function

    Example 8:

    console.log(parseFloat('700.89'));
    

    700.89


    Example 9:

    console.log(parseFloat('   800.1   '));

    800.1


    Example 10:

    console.log(parseFloat('000900.1'));

    900.1


    Example 11:

    console.log(parseFloat('Code2care'));

    NaN


3. Using Number() Constructor

    Example 12:

    console.log(Number('1200'));

    1200

    3 - Using Number Constructor

4. Using + Operator

    Example 13:

    console.log(+'1300');

    1300

    4 - Using + Operator

5. Math.floor() function (truncates decimal)

    Example 14:

    console.log(Math.floor('1400.2'));

    1400

    5 - Math.floor function

6. Math.round() function (rounds up/down decimals)

    Example 15:

    console.log(Math.round('1500.7'));
    console.log(Math.round('1500.2'));

    1501
    1500

    7 - Math.round function

7. Math.ceil() function (rounds up decimals)

    Example 16:

    console.log(Math.ceil('1600.2'));

    1600

    7 - Math ciel Function Example

8. BigInt() Constructor

    Example 17:

    console.log(String(BigInt('238923820340230470237')));

    238923820340230470237


9. Bitwise OR | Operator

    Example 18:

    console.log("1800" | 0);

    1800


10. Implicit Type Conversion

    Example 19:

    When we do arithmetic operation with a String and a Number, JavaScript automatically converts strings into a number.

    console.log("19"*100);

    1900

    9 - Convert String to Number using Bitwise OR

Below are the official documentation link to explore the methods in more detail.

  1. parseInt() Function: MDN Web Docs: parseInt()
  2. parseFloat() Function: MDN Web Docs: parseFloat()
  3. Number() Constructor: MDN Web Docs: Number()
  4. Unary Plus + Operator: MDN Web Docs: Unary plus (+) operator
  5. Math.floor() Function: MDN Web Docs: Math.floor()
  6. Math.round() Function: MDN Web Docs: Math.round()
  7. Math.ceil() Function: MDN Web Docs: Math.ceil()
  8. BigInt() Constructor: MDN Web Docs: BigInt
  9. Bitwise OR | Operator: MDN Web Docs: Bitwise OR (|)
  10. Implicit Type Conversion: MDN Web Docs: Type conversion

Facing issues? Have Questions? Post them here! I am happy to answer!

Author Info:

Rakesh (He/Him) has over 14+ years of experience in Web and Application development. He is the author of insightful How-To articles for Code2care.

Follow him on: X

You can also reach out to him via e-mail: rakesh@code2care.org

Copyright © Code2care 2024 | Privacy Policy | About Us | Contact Us | Sitemap