In JavaScript, there are a lot of methods to transform between knowledge varieties. We’ve already coated methods to convert a quantity to a string. On this brief tutorial, we’ll take a look at how one can convert a string to a quantity in JavaScript.
There are lots of conditions the place a quantity could be saved as a string. For instance, values obtained from a kind component are at all times strings.
Generally, you possibly can deal with a JavaScript string that accommodates a quantity (and solely a quantity) as if it had been a quantity, and JavaScript will carry out the string-to-number conversion for you mechanically. Nonetheless, generally it’s worthwhile to extract a quantity from a string, or train extra management over how the conversion is finished.
On this fast tip, we’ll cowl 3 ways to transform a string to a quantity.
Convert a String to a Quantity Utilizing Quantity
Essentially the most direct strategy to convert a string to a quantity in JavaScript is to make use of the built-in Quantity constructor perform. For instance:
const str = "10"
console.log(str);
console.log(typeof str);
const quantity = Quantity(str);
console.log(quantity);
console.log(typeof quantity);
When logging the worth of str and its sort within the console, the result’s 10 as a string and string respectively. After changing it, the result’s 10 as a quantity and quantity respectively.
You may see the instance in motion within the following CodePen demo.
See the Pen
Convert a String to a Quantity with Quantity() by SitePoint (@SitePoint)
on CodePen.
Please observe that when you go a non-numeric string to a quantity, NaN will probably be returned.
Convert a String to a Quantity Utilizing parseInt() and parseFloat()
One other strategy is utilizing parseInt() and parseFloat(). As you possibly can inform, parseInt() parses a string to an integer, whereas parseFloat() parses a string to a quantity with decimal factors.
For instance:
const str = "10.9"
console.log(str);
console.log(typeof str);
const intNumber = parseInt(str);
console.log(intNumber);
console.log(typeof intNumber);
const floatNumber = parseFloat(str);
console.log(floatNumber);
console.log(typeof floatNumber);
Much like the primary strategy, when logging the worth of str and its sort within the console, the result’s 10.1 as a string and string respectively. Nonetheless, when parsing str utilizing parseInt, the worth of intNumber turns into 10 and its sort is quantity.
However, when parsing str utilizing parseFloat, the worth of floatNumber turns into 10.1 as a quantity and its sort is quantity.
You may see the instance in motion within the following CodePen demo.
See the Pen
Convert String to Quantity with parseInt() and parseFloat() by SitePoint (@SitePoint)
on CodePen.
parseInt’s Second Argument
parseInt() takes a second argument that specifies the bottom of the quantity to be parsed from the string. This argument is actually elective, but it surely’s extremely suggest that you just at all times present it.
With out this second argument, parseInt performs computerized radix detection. That’s, it detects the bottom of a quantity by its format within the string. A quantity starting 0x or 0X is taken into account to be hexadecimal (base 16), and all different numbers are thought of to be decimal.
So, for instance, when you had been to name parseInt("08"), the enter worth can be thought of an octal quantity; however 8 isn’t an octal digit (as a result of octal numbering is 0–7), so the perform would return a price of zero, not eight.
To keep away from any confusion, at all times specify the bottom when utilizing parseInt().
Convert a String to a Quantity Utilizing Unary Plus
The third strategy to convert a string to a quantity is to make use of the unary plus (+). If the unary plus is used earlier than an operand, it makes an attempt to transform it to a quantity. So, if the operand is a string that accommodates a quantity, the unary plus will convert it to a quantity.
For instance:
const str = "10";
console.log(typeof str);
console.log(+str);
console.log(typeof +str);
While you log the kind of str, as anticipated, it’s string. Nonetheless, if you log the worth of +str and its sort, 10 and quantity are logged within the console respectively.
You may see the instance in motion within the following CodePen demo.
See the Pen
Utilizing Unary to Convert Strings by SitePoint (@SitePoint)
on CodePen.
The right way to Deal with Non-Numeric Characters in Strings
It’s essential to take into consideration instances the place a string may include characters aside from numbers and the way every strategy handles this.
When utilizing Quantity(), if the string accommodates characters aside from numbers, plus(+) and minus(-) indicators in the beginning, or decimal factors, the returned worth is the particular worth NaN (Not-a-Quantity). NaN is a worldwide property that represents Not-a-Quantity. It’s returned by some numerical operations when the operands or parameters of these operations are both not numbers or can’t be used for that particular mathematical operation.
However, parseInt() and parseFloat() parse the string if the quantity is in the beginning of the string. It drops the remainder of the characters and takes the quantity encountered in the beginning of the string. Nonetheless, if the string begins with characters aside from numbers, plus(+) and minus(-) indicators in the beginning, or decimal factors, the returned worth is the particular worth NaN (Not-a-Quantity).
You may see it in motion within the following CodePen demo.
See the Pen
Distinction Between Quantity and parseInt by SitePoint (@SitePoint)
on CodePen.
As you possibly can see, Quantity() returns NaN because the string accommodates px. Nonetheless, parseInt() returns 10 because it’s in the beginning of the string.
You may verify if a price is NaN utilizing the worldwide perform isNaN().
Conclusion
This brief tutorial has coated 3 ways to transform a string to a quantity in JavaScript. Quantity() can convert a string to a quantity, whether or not it’s a float or an integer. Nonetheless, if the string accommodates different characters, it returns NaN. That is useful if you wish to guarantee a strict conversion of the string.
However, parseInt() and parseFloat() are extra versatile approaches by way of dealing with different characters within the quantity. Nonetheless, these two capabilities can’t be used interchangeably in some instances. For instance, if the quantity within the string is a float and you utilize parseInt(), you’ll get an incorrect worth in comparison with the string.
Though the unary is simple to make use of, it might probably cut back readability of your code. Whichever methodology you select, it’s essential to look out for instances the place the consequence returned could be NaN.
Should you discovered this text helpful, you might also take pleasure in the next:
