How to convert String to Number in JavaScript?

Front End TechnologyJavascriptWeb Development

In this tutorial, we will learn to convert the string to a number in JavaScript. The string and number are the data types of JavaScript. Programmers frequently need to change the data type of the variables, and we will learn the same.

Various approaches are explained in this tutorial to convert the string to a number.

  • Using the Number() Constructor

  • Using the parseFloat() Method

  • Using the Unary (+) Operator

Using the Number() Constructor

In the first approach to convert the string to a number using JavaScript, we will use the Number() constructor. It is a constructor of the number class. When we pass any value as a parameter, it initializes the number variable with the parameter value and returns the newly created number value.

Syntax

Users can follow the syntax below to use the Number constructor.

let string = "123";
let number = Number( string );

Example

In the below example, we have used the Number() constructor to convert the string value to the number values. Also, we will check the type of converted variable to clarify whether that string is converted to a number or not.

<html> <body> <h2> Convert the string to number in JavaScript. </h2> <h4> Converting string "543" to number using <i> Number() </i>constructor . </h4> <div id = "number1"> </div> </body> <script> var number1 = document.getElementById("number1"); let string = "534"; let number = Number(string) number1.innerHTML += number + "<br/>"; number1.innerHTML += "type of 534: " + typeof number; </script> </html>

In the above output, users can see that the type of returned value from the Number() constructor is number, which means string is converted to number.

Using the parseFloat() Method

The second approach to converting the string to a number is using the parseFloat(), a built-in method of JavaScript. The parseFloat() method extracts the float number value from the string. Also, users can use it to extract the integer value from the string variable.

Syntax

Users can follow the syntax below to use the parseFloat() method.

let string = "12.54";
let number = parseFloat( string );

Parameters

  • stirng − It is a string which contains the number value that either can be float or integer.

Example

We have used the parseFloat() number to extract the number from the string. We have tested the parseFloat() method to extract the integer and float number values from the string.

<html> <body> <h2> Convert the string to number in JavaScript. </h2> <h4> converting different string values to number using <i> parseFloat() </i> method. </h4> <div id = "number1"> </div> </body> <script> var number1 = document.getElementById("number1"); let string = "534"; let number = parseFloat(string) number1.innerHTML += "'534' => " + number + "<br/>"; number1.innerHTML += "type of 534 is " + typeof number + "<br/>"; number = parseFloat('23.43'); number1.innerHTML += "'23.43' => " + number + "<br/>"; </script> </html>

In the above output, users can see that when we pass the string containing integer values, the parseFloat() method extracts the integer number, and the same happens for the float value.

Using the Unary (+) Operator

Users can perform the unary operations on the number values only. In JavaScript, when the user performs the unary operation with any string value, it automatically converts the string to a number value without giving an error.

Syntax

Users can follow the syntax below to convert the string to a number using the unary ‘+’ operator.

let string = "875.65";
let number = +( string );

Example

The below example demonstrates the use of the unary operator to convert the string to a number with different strings.

<html> <body> <h2> Convert the string to number in JavaScript. </h2> <h4> converting different string values to number using <i> Unary + </i> operator. </h4> <div id = "number1"> </div> </body> <script> var number1 = document.getElementById("number1"); let string = "214"; let number = parseFloat(+string) number1.innerHTML += " '214' => " + number + "<br/>"; number1.innerHTML += " type of 214 is " + typeof number + "<br/>"; number = +('12.93'); number1.innerHTML += " '12.93' => " + number + "<br/>"; </script> </html>

We have learned three approaches to converting the string containing numbers to number values. The first approach will work for all scenarios, and the parseFloat() method extracts the Integer or float number value from the string. The third approach is the fastest approach among all three approaches.

However, users can try to multiply the string by 1, and it converts the string to a number. Also, we can use the parseInt() method, which extracts only Integer from the number string.

raja
Updated on 10-Aug-2022 12:31:22

Advertisements