June 16, 2020

How to Format Number to Currency in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to format number to currency in javascript. It is pretty common to display currency sign before or after the product price depending upon the country of your website visitors.

Since each country follows a specific format for digits when it comes to price, so as a developer it becomes our responsibility to format the price and display it correctly.

To get the correct currency format, we can make use of the Intl object. This object contains several constructors that can help us with sensitive string comparison, number formatting, and date and time formatting.

The NumberFormat() constructor of the Intl object provides us with language-sensitive number formatting. To get accurate formatting, you must pass 2 parameters to the constructor. The first parameter will be a locale and the second parameter will be an options object. Please have a look over the MDN docs to learn more about it.

In the following example, we will enter a random number in the input field. Upon click of a button, we will format it according to the currency format in India and also display a currency sign right before it. Please have a look over the code example and the steps given below.

HTML & CSS

We have 4 elements in the HTML file (div, input, button, and h1). The div element is just a wrapper for the rest of the elements.
The button element has “Get” and the h1 element has “Result” as innerText.

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">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div>
        <input type="text" placeholder="Enter Value">
        <button>Get</button>
        <h1>Result</h1>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

body {
    text-align: center;
}

div {
    display: inline-block;
}

button, input {
    display: inline-block;
    padding: 10px 20px;    
}

Javascript

We have selected the button element, input element, and h1 element using the document.querySelector() method and stored them in the btnGet, input, and result variables respectively.
We have attached a click event listener to the button element.
In the event handler function, we are getting the number from the input field using value property and assigning it to the number variable.

We are using the NumberFormat() constructor and passing it “en-IN” locale of India and an options object as parameters. The options object contains 3 properties. The style property is set to currency which means we want to format the number as currency. The currency property is set to “INR” which means the number formatting should be as per Indian currency. The minimumFractionDigits property is set to 2 which means the number should be rounded up to 2 decimal places.
We are calling the format() method and passing the number as a parameter. It will return a formatted string based on the parameters passed to the NumberFormat() constructor.
We are displaying the formatted string in the h1 element using the innerText property.

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

btnGet.addEventListener('click', () => {
    let number = input.value;

    result.innerText = new Intl.NumberFormat('en-IN', {
        style:'currency',
        currency: 'INR',
        minimumFractionDigits: 2        
    }).format(number);
});

You May Also Like: