How to Convert to a Number in JavaScript

What you’ll build or solve

You’ll safely convert strings and other values into numbers without unexpected results like NaN.

When this approach works best

Use this approach when you:

• Process form input, which arrives as strings.
• Perform math operations on user-provided values.
• Validate numeric data before calculations.

Avoid forced conversion when:

• You already have a number.
• You need to preserve formatting like leading zeros.

Prerequisites

• A .js file or browser console
• Basic knowledge of variables and strings

No additional setup is required.

Step-by-step instructions

1) Choose the right number conversion method

JavaScript provides several ways to convert values to numbers. Each behaves slightly differently.

Option A: Use Number() for strict conversion

Number() converts the entire value into a number.

constvalue="42";
console.log(Number(value));// 42

It also works for booleans:

console.log(Number(true));// 1
console.log(Number(false));// 0

If the string cannot fully convert, it returns NaN.

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

Use Number() when:

• The entire string should be numeric.
• You want strict validation.

Option B: Use parseInt() for integers

parseInt() reads numbers from the start of a string.

console.log(parseInt("42",10));// 42
console.log(parseInt("42px",10));// 42

Always pass the radix:

console.log(parseInt("10",10));// 10

Use parseInt() when:

• You expect an integer.
• The string may include non-numeric characters at the end.

Option C: Use parseFloat() for decimals

parseFloat() works like parseInt() but supports decimals.

console.log(parseFloat("3.14"));// 3.14
console.log(parseFloat("3.14px"));// 3.14

Use parseFloat() when:

• You expect decimal numbers.
• The input may include trailing text.

Option D: Use the unary + operator for quick conversion

The unary plus converts values quickly.

constvalue="50";
console.log(+value);// 50

It behaves like Number():

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

Use unary + when:

• You want concise code.
• You are confident about the input format.

What to look for

• Invalid conversions return NaN.
• Number() requires the entire string to be numeric.
• parseInt() and parseFloat() stop reading at the first invalid character.
• Always pass a radix to parseInt().
• Check results with Number.isNaN().

constresult=Number("abc");

if (Number.isNaN(result)) {
console.log("Invalid number");
}

Examples you can copy

Example 1: Convert form input

functioncalculateTotal(priceInput) {
constprice=Number(priceInput);

if (Number.isNaN(price)) {
console.error("Invalid price");
return;
  }

returnprice*2;
}

calculateTotal("25");
calculateTotal("abc");

Example 2: Extract number from CSS value

constwidth="300px";
constnumericWidth=parseInt(width,10);

console.log(numericWidth);

Example 3: Handle decimal input

constamount="19.99";
constnumericAmount=parseFloat(amount);

console.log(numericAmount*2);

Common mistakes and how to fix them

Mistake 1: Forgetting the radix in parseInt()

What you might do:

parseInt("10");

Why it can cause confusion: Older environments may interpret numbers differently without a radix.

Fix:

parseInt("10",10);

Mistake 2: Assuming invalid input throws an error

What you might do:

constvalue=Number("abc");

Why it causes confusion: JavaScript returns NaN, not an error.

Fix:

if (Number.isNaN(value)) {
console.log("Invalid input");
}

Mistake 3: Unexpected string concatenation

What you might do:

console.log("5"+5);// "55"

Why it happens: One operand is a string.

Fix:

console.log(Number("5")+5);// 10

Troubleshooting

If the result is NaN, log the original value to inspect it.

If decimals disappear, confirm you are not using parseInt().

If numbers concatenate instead of add, check operand types.

If conversion fails unexpectedly, trim whitespace before converting:

Number(input.trim());

If no output appears, confirm you are running the correct file.

Quick recap

• Use Number() for strict conversion.
• Use parseInt() for integers with trailing characters.
• Use parseFloat() for decimals.
• Use unary + for concise conversion.
• Always check for NaN when validating input.