How to convert a string to a number in JavaScript — without tripping on a comma

A user types a room's length into a renovation calculator: 3,5 — the way half of Europe writes decimals. The code dutifully turns the string into a number and gets… 3. Half a meter vanished. No error, no red text. Just a wrong estimate.
Converting a string to a number seems like a one-command job. But every command has its quiet surprises. Below are six steps after which numbers from forms stop lying.
Why you need this at all
Everything that comes from a form, the URL or localStorage arrives as text. Even if it looks like a number. We covered this in detail in what is a string. Until you turn the text into a number, "100" + "200" is "100200", not 300.
Step by step: converting a string to a number
1. Make sure you really have a string.
Add one line to your code and look at the console:
console.log(typeof price, price)
string "1500" — you need to convert. number 1500 — you're already fine, look for the bug elsewhere.
2. Pick the right tool for the job.
JavaScript has three main ways, and they behave differently:
Number("42") // 42
Number("12px") // NaN — strict: junk in the string = failure
parseInt("12px") // 12 — reads digits until it hits a letter
parseFloat("3.5") // 3.5 — same, but with a decimal part
The rule is simple. For user input, use Number — it's strict and won't let junk through. Use parseInt and parseFloat when a number is known to be "glued" to text: "12px", "250 USD".
One more parseInt trap: parseInt("1e3") gives 1, while Number("1e3") gives 1000. parseInt doesn't understand scientific notation.
3. Clean the string before converting.
People write numbers the human way, not the computer way:
Number("1 200") // NaN — a space inside
Number("3,5") // NaN — a comma instead of a dot
parseFloat("3,5") // 3 — even worse: silently cut off the decimal
The decimal comma is the big gotcha for users in Russia and much of Europe. parseFloat doesn't fail — it silently reads up to the comma. So clean first:
const clean = raw.trim().replace(/\s/g, "").replace(",", ".")
const value = Number(clean) // "1 200,5" → 1200.5
4. Handle an empty field separately.
Surprise: Number("") returns 0. Not an error — zero. The user typed nothing, a zero went into the calculation, and the result looks plausible.
if (clean === "") {
showError("Enter the area")
return
}
5. Check the result for NaN.
If the string can't be read, you get NaN — "not a number." Check for it with a dedicated command:
if (Number.isNaN(value)) {
showError("That doesn't look like a number")
return
}
Don't skip this step: NaN is contagious and turns everything it touches into NaN. How to track it down once it has slipped in is covered in why you get NaN.
6. Convert once — at the entrance.
Don't scatter Number(...) all over your code. Convert the value as soon as it comes from the form, and from then on keep a number in the variable. One conversion point — one place that can break.
How to ask AI for this
If an AI writes the form for you, it will almost always do parseFloat(input.value) and move on. One paragraph in the prompt closes all the holes at once:
Make a room area calculator.Make a room area calculator in JavaScript.
Fields "length" and "width" — users may write decimals with a comma: 3,5.
Put the string-to-number conversion into one function toNumber(raw):
- remove spaces (including inside, "1 200"),
- replace the comma with a dot,
- empty field → message "Enter a value", not zero,
- if the result is NaN → message "Not a number".
Calculate only when both fields pass the check.What you get
A calculator that understands 3,5, 1 200 and 4 with spaces. On an empty field it asks for a value, on "three meters" it politely says that's not a number. Most importantly, no quiet zero or quiet NaN sneaks into the math anymore.
Which is better: Number or the unary plus?
+"42" does exactly what Number("42") does, just shorter. AI often writes the plus. But Number(...) reads more clearly, especially when you revisit the code a month later.
Why does input type="number" still give a string?
That's how browser forms work: a field's value is always text. Such a field has a valueAsNumber property that hands you a number directly. But on an empty field it gives NaN, so you still need the check.
What about Python?
There it's int("42") and float("3.5"). The difference is temperament: on junk, Python doesn't stay quiet — it crashes with a ValueError. It doesn't understand the comma either, so you clean the string the same way.
Short story-lessons, an agent simulator and daily practice — in our mobile app. Free.





