Converting a String to a Number in JavaScript: A Complete Guide for Beginners

Introduction: Why is this important?

Imagine this scenario: you are writing a tip calculator in JavaScript. The user enters the bill amount in an input field, clicks a button — and gets... undefined or, even worse, the string "10010" instead of the number 110. Sound familiar? If you are just starting your journey in programming, the problem of converting a string to a number in JavaScript is one of those "rakes" that absolutely everyone steps on.

On Stack Overflow, the question "How can I convert a string to an integer in JavaScript?" has gathered thousands of views and hundreds of answers. This means that even experienced developers sometimes get confused by the nuances. Today, we will once and for all figure out how to correctly convert a string to a number in JavaScript, which methods work and which don't, and why the result is sometimes unexpected.

Ready? Let's go!

Why convert a string to a number at all?

JavaScript is a dynamically typed language. This is cool because you don't have to think about data types… until you encounter a bug. The problem is that data from prompt(), form input fields, URL parameters, or APIs always comes as strings. Even if the user entered "42", JavaScript sees a set of characters, not a number.

Try adding two strings:

let a = "10";let b = "20";console.log(a + b); // "1020"

See? Instead of the sum 30, you got concatenation. To avoid this, you need to explicitly tell JavaScript: "Hey, these are numbers, treat them as numbers!".

Method #1: parseInt() — The Classic

The most popular way to convert a string to an integer in JavaScript is the parseInt() function. It takes a string and "extracts" an integer from it, ignoring everything that comes after the digits.

Syntax and Examples

let str = "42";let num = parseInt(str);console.log(num); // 42 (number)

// Works even with "junk" after the digitsconsole.log(parseInt("123px"));    // 123console.log(parseInt("10.99"));    // 10 (discards the fractional part)

// But if the string doesn't start with a digit...console.log(parseInt("abc123"));   // NaNconsole.log(parseInt("  7"));      // 7 (leading spaces are ignored)

Important: parseInt() stops at the first non-numeric character. If the string starts with a letter, you get NaN (Not a Number).

Second Argument — The Number System

Few people know, but parseInt() has a second parameter — radix (the base of the numeral system). This saves you from bugs with octal numbers:

// Without radix, there can be confusionconsole.log(parseInt("010")); // 10 (in old IE it could be 8)

// Always specify 10 for the decimal systemconsole.log(parseInt("010", 10)); // 10console.log(parseInt("FF", 16));  // 255 (hexadecimal)

Pro tip: always pass the second argument 10 if you are working with decimal numbers. This makes the code clearer and safer.

Method #2: Number() — Strict but Honest

The Number() function is a stricter way to convert a string to a number in JavaScript. Unlike parseInt(), it does not tolerate any extraneous characters.

console.log(Number("42"));     // 42console.log(Number("10.99"));  // 10.99 (preserves the fractional part)console.log(Number("123px"));  // NaN (string contains extra characters)console.log(Number(""));       // 0 (empty string = 0)console.log(Number(" "));      // 0

When to use: if you are 100% sure that the string contains only a number (for example, after form validation). For user input, parseInt() or