Quick Tip: In JavaScript, how to change a string to a number

Author

Sonali Rawat

Created

September 1, 2022April 24, 2024

Updated

April 24, 2024September 1, 2022

Reading time

7 min

Views

Categories: Technology

There are many times when a string can be used to store a number. For instance, the numbers that come from a form element are always strings.

Many times, you can treat a JavaScript string that only has numbers as if it were numbers, and JavaScript will do the work of turning the string into a number for you. But sometimes you need to get a number out of a string or have more control over how the change is done.

We’ll talk about three quick ways to turn a string into a number.

Change a string to a number. Putting Number

You can use the built-in Number constructor function in JavaScript to quickly turn a word into a number. As an example:

const str = "10"
console.log(str); // "10"
console.log(typeof str); // "string"

const number = Number(str);
console.log(number); // 10
console.log(typeof number); // "number"

If you set the const number to Number(str), then you can log the number like this: 10 log(typeof number); // “number”
The value of str is 10 as a string, and its type is also a string. This is shown in the console. When it is converted, it comes out as 10 as a number and a number.

In the next CodePen video, you can see how the example works.

const input = document.querySelector("#number");

input.addEventListener('keyup', function (e) { 
const str = input.value;
  document.getElementById("variableValue").textContent = str;
document.getElementById("originalType").textContent = typeof str;
const number = Number(str);
document.getElementById("afterConvertValue").textContent = number;
document.getElementById("afterConvert").textContent = typeof number;
})

Please keep in mind that if you give a number a word that is not a number, NaN will be returned.

Change a string to a number. Putting parseInt() and parseFloat()

You could also use parseInt() and parseFloat(). It’s clear that parseInt() turns a string into an integer and parseFloat() turns a string into a number with decimal points.

As an example:

const str = "10.9"
console.log(str); // "10.9"
console.log(typeof str); // "string"

const intNumber = parseInt(str);
console.log(intNumber); // 10
console.log(typeof intNumber); // "number"

const floatNumber = parseFloat(str);
console.log(floatNumber); // 10.9
console.log(typeof floatNumber); // "number"

In the same way as the first method, the output is 10.1 as a string when you log the value of str and its type in the console. But when you use parseInt to read str, the value of intNumber changes to 10 and its type changes to number.

When you use parseFloat on str, on the other hand, the value of floatNumber changes to 10.1 as a number, and its type is number.

The second argument for parseInt

Another thing that can be given to parseInt() is the base of the number that needs to be read from the string. You don’t have to give this case, but it’s strongly suggested that you do.

If you don’t give this second option, parseInt will automatically find the radix. If you look at the style of a number in a string, you can tell what base it is. Every other number is decimal, except for those that start with 0x or 0X, which are hexadecimal (base 16).

For example, if you called parseInt(“08”), the value you gave it would be thought of as an octal number. But 8 is not an octal character (octal numbers go from 0 to 7), so the function would return 0 instead of 8.

When you use parseInt(), you should always give the base to avoid confusion.

Change a string to a number. With Unary Plus

The unary plus (+) sign is the third way to turn a line into a number. It tries to turn an input into a number if the unary plus is used before it. The unary plus will turn the operand, which is a text that has a number in it, into a number.

As an example:

const str = "10";
console.log(typeof str); // "string"
console.log(+str); // 10
console.log(typeof +str); // "number"

How to Deal with Characters That Aren’t Numbers in Strings

When a string might contain symbols other than numbers, it’s important to think about how each method handles this.

When you call Number() on a string that doesn’t contain numbers, plus (+) and minus (-) signs at the beginning, or decimal points, you’ll get the special value NaN (Not-a-Number). NaN stands for “Not-a-Number” and is a global trait. This value is given by some numerical operations when the operands, or parameters, of those operations are not numbers or can’t be used for that operation.

If the number is at the beginning of the string, parseInt() and parseFloat() read the string. It gets rid of the rest of the characters and keeps the number that it finds at the start of the string. But if the string starts with anything other than a number, a plus (+) or minus (-) sign, or a decimal point, the result that is returned is NaN, which stands for “Not-a-Number.”

In the CodePen below, you can see how it works.

const number = Number(str);
document.getElementById("afterConvertValueNumber").textContent = number;
document.getElementById("afterConvertNumber").textContent = typeof number;

const intNumber = parseInt(str, 10);
document.getElementById("afterConvertValue").textContent = intNumber;
document.getElementById("afterConvert").textContent = typeof intNumber;

You can see that Number() gives NaN because the string has px in it. Then, parseInt() gives back 10 because it’s at the start of the string.

The global method isNaN() can be used to see if a value is NaN.

In conclusion

This short lesson showed you three different ways to change a string in JavaScript to a number. It doesn’t matter what kind of number it is; Number() can turn any word into a number. If the string does have other characters, though, it gives NaN. To make sure a proper conversion of the string, this is useful.

But parseInt() and parseFloat() are more open when it comes to how they handle other characters in the number. But there are times when these two features can’t be used together. For instance, if the number in the string is a float and you use parseInt(), you’ll get a value that is different from what is in the string.

The unary is simple to use, but it can make your code harder to read. No matter which way you choose, you should keep an eye out for situations where the result could be NaN.

Ask a Question about How to Change a String to a Number in JavaScript When Not Everything Is Equal

In JavaScript, what are the different ways to turn a word into a number?

In JavaScript, you can change a word to a number in a number of different ways. They are the unary plus (+) operator, the Number() function, the parseInt() function, and the parseFloat() function. Some situations call for a certain method, and you can use any of them based on what your code needs.

How does JavaScript’s Number() method work?

You can turn a string into a number in JavaScript with the Number() method. It takes a string as input and gives back a number. It gives NaN (Not a Number) if the string can’t be turned into a number. Number(“1234”) would give you 1234, but Number(“1234abc”) would give you NaN.

In JavaScript, what’s the difference between parseInt() and parseFloat()?

In JavaScript, you can use both parseInt() and parseFloat() to turn words into numbers. The type of number they return is what makes them different. A floating-point number is returned by parseFloat(), while an integer is returned by parseInt(). If you type “123.45”, parseInt will return 123, and if you type “123.45”, parseFloat will return 123.45.

I want to turn a string into a number in JavaScript. How do I use the unary plus (+) operator?

In JavaScript, you can use the unary plus (+) function to turn a string into a number. It goes before the string, like this: + “1234” The number 1234 would be returned. It gives NaN if the string can’t be turned into a number.

In JavaScript, what happens if I try to turn a word that isn’t a number into a number?

Using any of the above ways to try to turn a string that isn’t a number into a number in JavaScript will return NaN, which stands for “Not a Number.”

In JavaScript, how can I tell if the change from word to number worked?

In JavaScript, you can use the isNaN() tool to see if the change from string to number worked. It’s true if the argument is Not a Number (NaN), and it’s false if it’s not.

Is it possible to change a word to a number in JavaScript without using one of the built-in functions?

In JavaScript, you can change a string to a number without using any built-in functions. However, this is more difficult and not suggested for beginners. One way is to use a loop to go through each letter in the string and use the ASCII values of the characters to figure out the number.

In JavaScript, how do I change a word to an integer?

The parseInt() method in JavaScript can be used to turn a string into an integer. You can pass a string to this method, and it will return an integer. It gives NaN if the string can’t be turned into an integer.

In JavaScript, how do I change a word to a floating-point number?

The parseFloat() method in JavaScript can be used to turn a string into a floating-point number. You can pass a string to this method, and it will return a floating-point number. It gives NaN if the string can’t be turned into a floating-point number.

In JavaScript, what is the best way to turn a word into a number?

Depending on your needs, the best way to change a string to a number in JavaScript will vary. The parseInt() method can be used to get a number. Use parseFloat() to get a floating-point number. If you aren’t sure, you can use the Number() tool or the unary plus (+) operator, which can work with both large and small numbers.