JavaScript String to Number — Which Method is Better?

Why This Question Matters

If you're just starting with JavaScript, you'll quickly realize that the language is... flexible. Maybe "too flexible" is a better way to put it. One of the first hurdles every junior dev hits is type conversion. You have a string, you need a number, and you start looking for the best way to switch between them.

The confusion usually stems from the fact that JavaScript gives us multiple ways to do the same thing. You have Number(), parseInt(), parseFloat(), and the unary plus operator (+). At a glance, they all seem to do the same job. But when your data isn't "clean"—like when you're pulling values from a CSS property or a user input field—these methods behave very differently.

Picking the wrong one doesn't always crash your app immediately, but it leads to those annoying NaN (Not a Number) bugs that take an hour to track down.

Understanding the Code

Let's look at the two options we're weighing:

// Option A
parseInt("42px")
// Option B

Number("42px")

On the surface, both are trying to turn the string "42px" into a number. In a perfect world, your strings would just be "42", and both would return 42. But in the real world, strings often come with "noise"—extra characters, units, or trailing whitespace.

Here is what's happening under the hood:

Number() is a constructor. When you call it as a function, it tries to convert the entire string into a number. It's strict. If there is a single character in that string that isn't a valid digit (or a decimal point/sign), it gives up immediately.

parseInt(), on the other hand, is a parsing function. It scans the string from left to right. It keeps collecting digits until it hits the first character it doesn't recognize. Once it hits a non-digit, it stops and returns whatever it managed to collect up to that point.

Finding the Correct Answer

In this specific case, Option A (parseInt) is the winner.

Why? Because we have "42px".

When Number("42px") runs, it sees the "p" and the "x". It says, "This isn't a valid number," and returns NaN. Now your math is broken, and your UI probably shows "NaN" to the user.

When parseInt("42px") runs, it sees the "4", then the "2", and then it hits the "p". It says, "I don't know what 'p' is, but I've already found '42', so I'll just take that." It returns 42.

If your goal is to extract a numeric value from a string that contains units (like pixels, percentages, or rems), parseInt is the tool for the job.

Common Mistakes Developers Make

The biggest mistake is assuming parseInt is always the "better" version. It's not; it's just different.

One common trap is forgetting that parseInt ignores everything after the first non-digit. If you have a string like "10.5px", parseInt will give you 10. It chops off the decimal. If you need that precision, you have to use parseFloat().

Another classic blunder is ignoring the radix. You'll often see experienced devs write parseInt("42", 10). That 10 tells JavaScript to use the decimal system. While modern browsers default to base-10, older environments sometimes guessed the base based on the string (like treating "0x" as hexadecimal). It's a good habit to always be explicit about your base to avoid weird edge-case bugs.

And finally, don't confuse Number() with parseInt() when dealing with empty strings. Number("") returns 0, while parseInt("") returns NaN. Depending on your logic, that difference can cause a silent bug in your calculations.

Real-World Usage

Where does this actually come up in a production app? The most common scenario is DOM manipulation.

Imagine you're writing a function to get the current width of an element using element.style.width. The browser returns a string like "150px". If you want to add 20 pixels to that width, you can't just do "150px" + 20 because JavaScript will treat it as string concatenation and give you "150px20".

You need to strip the "px" and convert the rest to a number:

const widthString = "150px";
const widthNum = parseInt(widthString, 10); 
const newWidth = widthNum + 20; // 170
element.style.width = newWidth + "px"; // "170px"

This pattern is everywhere in frontend development—handling CSS values, parsing version numbers (like "v1.2.3"), or cleaning up user input from a form where someone might have typed "50kg" instead of just "50".

Key Takeaways

- Use Number() when you want a strict conversion and you expect the string to be a clean number.
- Use parseInt() when you need to extract a whole number from a string that might contain trailing text (like units).
- Use parseFloat() if you need to keep the decimals while ignoring trailing text.
- Always provide the radix (10) to parseInt to avoid ambiguity.
- Be careful with empty strings; Number() and parseInt() handle them differently.