Convert Text to Number in JavaScript: A Practical Guide

Learn safe, explicit methods to convert text to numbers in JavaScript. Explore Number(), parseInt(), parseFloat(), and the unary + operator with edge cases and validation.

JavaScripting Team

March 20, 2026·5 min read

JavaScript Tutorials Variables Learn JavaScript Syntax Type Coercion

Text to Number in JS - JavaScripting — Photo by Negative Space via Pexels

Quick AnswerSteps

To convert text to a number in JavaScript, use explicit conversion instead of relying on coercion. Common options include Number(str), parseInt(str, 10), parseFloat(str), and the unary plus operator. Each method has edge cases: leading/trailing spaces, decimals, and non-numeric input. Validate with isNaN or Number.isNaN to avoid surprises, and choose the right strategy for integers vs floats.

convert text to number javascript: Why this conversion matters

In JavaScript, numeric values can come from user input, API responses, or form fields. Often, values arrive as strings, and you need to convert them to a numeric type for calculations, validation, or UI updates. Misreading a string like "42" as a number is fine, but strings such as "42px" or " 3.14 " can trip up calculations if you rely on implicit coercion. Understanding the available conversion methods helps you choose the correct approach for integers, decimals, or mixed content, and keeps your code predictable across environments. This article focuses on practical, explicit conversion techniques you can apply in real projects.

JavaScript

const a = "42";
console.log(typeof a); // string
console.log(Number(a)); // 42

JavaScript

const b = "  42  "+" "
console.log(+b); // 42

Why it matters: explicit conversion reduces surprises, makes intent clear, and helps with input validation in UI forms, APIs, or data pipelines.

Core conversion methods in JavaScript

JavaScript provides several built-in ways to convert text to numbers. The most common are Number(), parseInt(), parseFloat(), and the unary plus operator. Each has its own rules, especially regarding decimals, radix, and non-numeric input. Choosing the right method depends on whether you need integers, decimals, or a strict parsing behavior. Below are representative examples that show input -> output behavior for typical strings.

JavaScript

console.log(Number("123"));       // 123
console.log(Number("123.45"));      // 123.45
console.log(Number(""));            // 0 (empty string coerces to 0)

JavaScript

console.log(parseInt("42px", 10));   // 42
console.log(parseInt("010", 10));    // 10
console.log(parseInt("0xFF", 16));   // 255

JavaScript

console.log(parseFloat("3.14abc")); // 3.14
console.log(+"3.14");               // 3.14
console.log(+(" ".repeat(0) + "7")); // 7

Takeaways: Number() attempts a full-string parse, parseInt() reads with a radix, and parseFloat() handles decimals. The unary + is a compact alternate.

Integers vs floats and radix handling

When converting strings that represent numbers, you must differentiate between integers and floating-point numbers. If you only need integers, use parseInt() with an explicit radix (prefer 10) or Math.trunc(Number(value)). For decimals, Number() or parseFloat() are appropriate. Be mindful that parseInt("08") in some older environments could misinterpret octal literals without a radix. Always pass a radix to parseInt to avoid this pitfall. Here are representative scenarios:

JavaScript

console.log(parseInt("42", 10)); // 42
console.log(Math.trunc(Number("42.9"))); // 42
console.log(Number("42.9")); // 42.9

JavaScript

console.log(parseInt("010", 10)); // 10
console.log(parseInt("010", 2));  // 2 (binary 2)

Recommendation: for robust parsing, prefer Number() for floats and parseInt(value, 10) for integers with an explicit radix.

Validation patterns and NaN handling

After conversion, you often need to verify the result is a valid number. Use Number.isNaN or global isNaN with care to avoid false positives. isNaN("string") returns true, but Number.isNaN("string") is false because "string" is not NaN—it’s a string. A typical pattern checks the type and finiteness before using the value in calculations:

JavaScript

function safeConvert(input) {
  const n = Number(input);
  return Number.isFinite(n) ? n : NaN;
}
console.log(safeConvert("123")); // 123
console.log(safeConvert("abc")); // NaN

Edge consideration: empty strings often become 0 with Number(), which may surprise you in validation logic. Use explicit checks for empty inputs when necessary.

Practical utility: build a safe converter

A small helper can encapsulate common patterns and expose a consistent API across your project. The function below trims input, selects an integer vs. float path, and performs NaN checks. It demonstrates a pragmatic approach: first trim, then decide on floating vs. integer, then validate.

JavaScript

function toNumberSafe(input, options = {}) {
  const { allowFloat = true, radix = 10 } = options;
  if (typeof input !== 'string') input = String(input);
  const trimmed = input.trim();
  if (trimmed.length === 0) return NaN;
  let n;
  if (allowFloat) {
    n = Number(trimmed);
  } else {
    n = parseInt(trimmed, radix);
  }
  return Number.isNaN(n) ? NaN : n;
}
console.log(toNumberSafe("  42  ")); // 42
console.log(toNumberSafe("abc")); // NaN
console.log(toNumberSafe("7.5", { allowFloat: false })); // 7

Design tip: document the function behavior and return type, and consider exporting a module-scoped converter for reuse.

Common pitfalls and best practices

Even seasoned developers trip over edge cases when converting text to numbers. Common pitfalls include relying on implicit coercion, ignoring radix in parseInt, and not handling empty strings. Best practices involve explicit conversions, input trimming, radix specification, and robust validation. When dealing with user input, centralize conversion logic to reduce duplication and ensure consistent error handling. Finally, prefer pure functions without side effects so unit tests are straightforward.

JavaScript

// Bad: relying on coercion and ambiguous outputs
const value = "\n  12abc"; console.log(value * 1); // NaN

// Good: explicit, testable
function toIntSafe(s) { return parseInt(s, 10) || NaN; }

Note: tests should cover edge cases like empty strings, zero, negative numbers, and non-numeric input to guard against regression.

Quick reference snippets and best practices

To keep your code readable and predictable, keep a small set of well-documented patterns handy. Examples below illustrate a safe path for common scenarios (integers vs floats, trimming, and validation).

JavaScript

// Integer path
const intVal = toNumberSafe("  123  ", { allowFloat: false, radix: 10 });
console.log(intVal); // 123

// Floating path
const floatVal = toNumberSafe("  12.34  ");
console.log(floatVal); // 12.34

// Validation
const maybe = toNumberSafe("NaN");
console.log(Number.isNaN(maybe)); // true

Putting it all together: a quick reference

This article presented the main ways to convert text to numbers in JavaScript and how to guard against common pitfalls. Remember to trim input, choose the right converter for integers vs. floats, and validate results before use. Encapsulating this logic in a reusable utility simplifies maintenance and reduces bugs across large codebases.

JavaScript

function parseUserInput(input) {
  const v = toNumberSafe(input, { allowFloat: true });
  if (Number.isNaN(v)) throw new Error("Invalid numeric input");
  return v;
}

Steps

Estimated time: 30-60 minutes

1
Set up the environment
Install Node.js or open a browser console. Create a new JS file in your editor to test conversion patterns. Ensure you can run tiny snippets and see immediate outputs in console.
Tip: Verify runtime by logging a simple number to the console.
2
Try explicit conversions
Experiment with Number(), parseInt(), parseFloat(), and the unary + operator on simple strings like '42' and '3.14'. Compare results for integers vs floats and note edge cases.
Tip: Document the outputs you observe to avoid confusion later.
3
Handle whitespace and signs
Test strings with spaces, leading zeros, and signs. Observe how trim() affects results and how parseInt behaves with different radices.
Tip: Always trim user input before conversion and be explicit about radix.
4
Validate results
Check NaN and finite values using Number.isNaN/Number.isFinite. Decide how to handle invalid inputs—throw, fallback, or show a message.
Tip: Prefer explicit checks over implicit coercion for robustness.
5
Create a safe converter
Wrap conversion logic in a small utility that handles edge cases and exposes a clean API for your project.
Tip: Document behavior and return types; consider unit tests.

Pro Tip: Prefer explicit conversion methods (Number, parseInt/parseFloat, or +) to avoid relying on coercion.

Warning: Always specify base/radix with parseInt to avoid unpredictable results.

Note: Number('') can yield 0 in some cases; validate how your environment handles empty inputs.

Prerequisites

Required

Node.js v12+ or a modern browser JavaScript environment↗
Required
Code editor (e.g., VS Code)
Required
Basic JavaScript familiarity
Required
Terminal or console access
Required

Optional

Knowledge of NaN and type coercion
Optional

Keyboard Shortcuts

Action	Shortcut
Copy codeTo copy code blocks	`Ctrl`+`C`
Paste codeInsert into editor or console	`Ctrl`+`V`
Run current scriptExecute selected code in editors/REPL	`Ctrl`+`↵`
Comment lineToggle line comments	`Ctrl`+`/`
Find in fileNavigate search within the file	`Ctrl`+`F`

Questions & Answers

What is the difference between Number() and parseInt()?

Number() parses the entire string as a number; parseInt() parses up to the first non-digit character and accepts a radix. Number('12px') yields NaN, while parseInt('12px', 10) yields 12.

How should I handle floats vs integers?

If you need decimals, use parseFloat() or Number(). If you only want integers, use parseInt() with radix 10 or Math.trunc(Number(value)).

What about whitespace and empty strings?

Strings with whitespace should be trimmed before conversion. Empty strings often result in 0 or NaN depending on method; check explicitly.

Can I rely on implicit coercion in comparisons?

Relying on implicit coercion is risky. Explicit conversion avoids surprises and helps maintain predictable behavior across environments.

Is there a universal safe converter?

Yes, a small utility that trims input, selects the right method (integer vs float), and validates the result with Number.isNaN provides consistency.

What to Remember

Use explicit conversion over implicit coercion
Choose Number/parseInt/parseFloat or unary + based on needs
Validate with Number.isNaN/Number.isFinite
Pass a radix to parseInt to avoid surprises
Wrap conversion in a utility for consistency

← More in JavaScript Syntax

convert text to number javascript: Why this conversion matters

Core conversion methods in JavaScript

Integers vs floats and radix handling

Validation patterns and NaN handling

Practical utility: build a safe converter

Common pitfalls and best practices

Quick reference snippets and best practices

Putting it all together: a quick reference

Steps

Set up the environment

Try explicit conversions

Handle whitespace and signs

Validate results

Create a safe converter

Prerequisites

Keyboard Shortcuts

Questions & Answers

What to Remember

Related Articles