How to Convert String into Number in JavaScript

In JavaScript, converting a string into a number is a common operation. This guide will show you how to do it using different methods and provide examples to help you understand the process.

What is a String?

A string is a sequence of characters, such as letters, numbers, or symbols. In JavaScript, strings are enclosed in quotes. For example:

let str = '123';

What is a Number?

A number in JavaScript represents numeric values, such as integers or floating-point numbers. Numbers can be used in mathematical operations. For example:

let num = 123;

Why Convert String to Number?

Sometimes, you might have a string that represents a number, but you need to perform mathematical operations on it. For example, if you have a string '123' and you want to add 10 to it, you need to convert it to a number first.

Methods to Convert String to Number

There are several ways to convert a string to a number in JavaScript. Here are the most common methods:

1. Using the `Number()` Function

The Number() function converts a string to a number. If the string represents a valid number, it returns the corresponding number. Otherwise, it returns NaN (Not a Number).

Example 1: Converting a String to an Integer

let str = '123';
let num = Number(str);
console.log(num); // Output: 123
console.log(typeof num); // Output: 'number'

Example 2: Converting a String to a Float

let str = '123.45';
let num = Number(str);
console.log(num); // Output: 123.45
console.log(typeof num); // Output: 'number'

Example 3: Converting an Invalid String

let str = 'abc';
let num = Number(str);
console.log(num); // Output: NaN

2. Using the `parseInt()` Function

The parseInt() function parses a string and returns an integer. It is useful when you want to convert a string that represents a number in a specific base (e.g., binary, octal, or hexadecimal).

Example 1: Converting a Decimal String to an Integer

let str = '123';
let num = parseInt(str);
console.log(num); // Output: 123
console.log(typeof num); // Output: 'number'

Example 2: Converting a Binary String to an Integer

let str = '1010';
let num = parseInt(str, 2);
console.log(num); // Output: 10

Example 3: Converting an Octal String to an Integer

let str = '77';
let num = parseInt(str, 8);
console.log(num); // Output: 63

Example 4: Converting a Hexadecimal String to an Integer

let str = '1a';
let num = parseInt(str, 16);
console.log(num); // Output: 26

3. Using the `+` Operator

You can also use the unary + operator to convert a string to a number. If the string represents a valid number, it will be converted to a number. Otherwise, it will return NaN.

Example 1: Converting a String to a Number

let str = '123';
let num = +str;
console.log(num); // Output: 123
console.log(typeof num); // Output: 'number'

Example 2: Converting an Invalid String

let str = 'abc';
let num = +str;
console.log(num); // Output: NaN

Edge Cases and Common Mistakes

Invalid Strings: If the string does not represent a valid number, all the above methods will return NaN. For example:

let str = '12a3';
console.log(Number(str)); // NaN
console.log(parseInt(str)); // NaN
console.log(+str); // NaN

Leading Zeros: If a string has leading zeros, it will be converted correctly. For example:

let str = '0123';
console.log(Number(str)); // 123

Different Numeral Systems: When using parseInt(), it’s important to specify the correct base. For example, if you don’t specify the base when converting a hexadecimal string, it will be treated as a decimal string:

let str = '1a';
console.log(parseInt(str)); // NaN (because 'a' is not a valid decimal character)
console.log(parseInt(str, 16)); // 26

Best Practices

Always validate the string before converting it to a number. You can use methods like isNaN() or isNumeric() to check if the string is a valid number.

function isNumeric(str) {
  return !isNaN(str) && !isNaN(parseFloat(str));
}

let str = '123';
if (isNumeric(str)) {
  let num = Number(str);
  console.log(num); // 123
}

Handle NaN gracefully. If the conversion fails, you should have a fallback plan.

let str = 'abc';
let num = Number(str);
if (isNaN(num)) {
  console.log('Invalid number');
}

Frequently Asked Questions

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

Number() converts a string to a number, which can be an integer or a float. It returns NaN if the string is not a valid number.
parseInt() parses a string and returns an integer. It can handle different numeral systems by specifying the base. It returns NaN if the string is not a valid number in the specified base.

Q2: Can I convert a string with leading zeros to a number?

Yes, strings with leading zeros can be converted to numbers. For example:

let str = '0123';
console.log(Number(str)); // 123

Q3: How do I convert a string to a float?

You can use the Number() function or the + operator. For example:

let str = '123.45';
console.log(Number(str)); // 123.45

Q4: What if the string represents a number in a different language?

JavaScript uses the Unicode standard for numbers. If the string uses a different numeral system (e.g., Arabic-Indic digits), you might need to convert it to the appropriate Unicode characters before converting it to a number.

Q5: How do I convert multiple strings to numbers at once?

You can use the map() function to convert an array of strings to an array of numbers. For example:

let strArray = ['1', '2', '3'];
let numArray = strArray.map(Number);
console.log(numArray); // [1, 2, 3]

Conclusion

Converting strings to numbers in JavaScript is a straightforward process, but it’s important to handle edge cases and validate your input to avoid unexpected results. By using the Number(), parseInt(), or + operator, you can easily convert strings to numbers and perform mathematical operations on them. Always remember to handle NaN gracefully and validate your input to ensure your code works correctly.