DEV Community

Muhammad Hamza
Muhammad Hamza

Posted on

JavaScript’s Hidden Trap: Converting Strings to Numbers Isn’t Always What You Expect!

JavaScript is quirky, and one of the subtle pitfalls many developers encounter is string-to-number conversion. Seems simple, right? Just slap a + in front of the string, and you’re done. But then... surprises happen. 🤯

Take this:

console.log(+"0123");  // 123 ✅  
console.log(+"08");    // 8 ✅  
console.log(+"09");    // 9 ✅  

console.log(+"0123px");  // NaN ❌ (Oops!)  
console.log(+"00123");   // 123 (What happened to the leading zeros?)  
Enter fullscreen mode Exit fullscreen mode

💡 Lesson? The unary + operator is fast but isn’t always predictable, especially when dealing with leading zeros or non-numeric characters.

Now, let’s throw in Number():

console.log(Number("0123"));  // 123 ✅  
console.log(Number("08"));    // 8 ✅  
console.log(Number("09"));    // 9 ✅  
console.log(Number("0123px")); // NaN ❌  
Enter fullscreen mode Exit fullscreen mode

🚀 Both methods are great, but which should you use?

Use +value when you need quick, high-performance conversion in controlled environments.

Use Number(value) for clarity and explicit intent.

Use parseInt(value, 10) if handling numbers with leading zeros or text suffixes ("0123px"123).

🎯 Moral of the story? JavaScript wants to help you, but sometimes it helps a little too much. Always know your tools, and you’ll avoid unnecessary debugging sessions.

Have you ever been bitten by this? Share your experience!

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video