How to Convert String to Number in JavaScript: Radix and Type Coercion

When developing frontend web applications, data retrieved from input fields, URL query parameters, or raw API payloads arrives as strings.

To perform mathematical calculations or compare sizes, you must parse these values into JavaScript numeric types.

JavaScript offers multiple techniques to convert strings to numbers. However, they handle invalid strings, unit suffixes (like "100px"), and empty variables differently under the hood.

In this guide, we will compare the four main numeric conversion methods, analyze why you must declare a radix parameter, and review edge cases for NaN.

1. Unary Plus Operator (+)

The unary plus operator is the most compact way to cast a string value to a number.

console.log(+"42");   // Outputs: 42 (Number)
console.log(+"3.14"); // Outputs: 3.14

Behavior and Pitfalls

• Strict Casting: If the string contains any non-numeric characters (except a leading sign or decimal point), the operation fails and returns NaN (Not a Number):

console.log(+"42px"); // Outputs: NaN

• Empty String Evaluation: An empty string converts to 0:

console.log(+""); // Outputs: 0 (Can mask missing inputs as valid values)

2. Number() Constructor

The Number() function acts as a wrapper. It uses the exact same parsing rules as the unary plus operator, but provides better semantic readability for code reviews.

console.log(Number("42"));   // Outputs: 42
console.log(Number("42px")); // Outputs: NaN
console.log(Number(""));     // Outputs: 0

Use Number() when you want strict verification and code clarity over micro-optimizations.

3. parseInt(string, radix) (Integer Extraction)

The parseInt() function is designed to extract integer numbers out of strings.

Unlike strict casting methods, parseInt() scans the string from left to right, parsing characters until it hits a non-numeric character. It discards the rest of the string:

console.log(parseInt("42px")); // Outputs: 42 (Extracts number and drops CSS units)
console.log(parseInt("3.14")); // Outputs: 3 (Truncates decimals)

If the first non-whitespace character in the string is non-numeric, the function returns NaN:

console.log(parseInt("abc42")); // Outputs: NaN
console.log(parseInt(""));      // Outputs: NaN

The Golden Rule: Always Specify the Radix

parseInt(string, radix) accepts a second parameter named radix (a number between 2 and 36 representing the base of the numeral system).

Always specify 10 as the radix. If you omit it, legacy JavaScript runtimes will parse strings starting with 0x as hexadecimal (base 16), and strings starting with 0 as octal (base 8), resulting in calculation errors:

// AVOID: Radix omitted, output can be unpredictable
const num = parseInt("010"); 

// Good: Radix explicitly declared as base-10 decimal
const numFixed = parseInt("010", 10); // Outputs: 10

4. parseFloat() (Decimal Extraction)

The parseFloat() function works similarly to parseInt(), but parses floating-point numbers containing decimal parts:

console.log(parseFloat("3.14abc")); // Outputs: 3.14
console.log(parseFloat("100.5px")); // Outputs: 100.5

Unlike parseInt(), parseFloat() does not accept a radix parameter. It always parses values using the standard decimal base-10 system.

Summary Comparison Table

Conclusion

Converting strings to numbers in JavaScript is managed by matching strict or parsing methods. Use Number() or the unary plus + when you need strict validation and want empty values to coerce to 0, employ parseInt(x, 10) when extracting integers out of suffixed values like CSS units, and implement parseFloat() when working with decimals.