September 21, 2021

How to Convert String to Number in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to convert string to number in javascript. As you already know, string and number are two of the built-in types in javascript. You may encounter a situation where you have to convert string to number type. This is something that we are going to cover today.

There are multiple ways to convert a string to a number, but I am going to demonstrate 3 common ways here. The first one is by using the Number constructor. The second one is by using the plus(+) operator and the third one is by using the parseFloat() method. You can also go with the parseInt() method but this method will fail if your string contains decimal numbers since it will return a whole number.

In the following example, we will enter a random number in the input field. By default, whatever you enter in the input field is of string type. We will convert it into a number and display it on the screen upon button click. Please have a look over the code example and the steps given below.

HTML & CSS

We have a few elements in the HTML file and that includes div, button, input, and h1. The div element with a class of container is just a wrapper for the rest of the elements.
The inner text for the button element is “Get” and for the h1 element, it is “Output”.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div class="container">
        <div>
            <input type="text">
            <button>Get</button>
        </div>
        <h1>Output</h1>
    </div>
    <script src="script.js"></script>
</body>
</html>

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

Javascript

We have selected 3 elements button, input, and h1 using document.querySelector() method and stored them in btnGet, input, and output variables respectively.
We have attached the click event listener to the button element.
In the event handler function, we are using our first method and that is the Number constructor. We will simply pass the value of the input element to the Number constructor.
The second method involves the usage of the plus(+) operator. We will simply prepend the plus (+) operator to the value of the input element.
The third method involves the usage of the parseFloat() method. We will simply pass the value of the input element to the parseFloat() method.
Each method returns a number and we are storing that in the myNum variable. Please use one method at a time and comment out the rest as shown in the code below.
We will use the typeof keyword to get the type of the myNum variable and display it in the h1 element using the innerText property.

let btnGet = document.querySelector('button');
let input = document.querySelector('input');
let output = document.querySelector('h1');

btnGet.addEventListener('click', () =>{
    // let myNum = Number(input.value);
    // let myNum = +input.value;

    let myNum = parseFloat(input.value);
    output.innerText = `Type: ${typeof myNum} - Value ${myNum}`;
});

You May Also Like: