JavaScript Methods: toFixed() – a Number method

Christina Kopecky - January 04, 2021

There exists a Number object method in JavaScript that allows us to set a fixed decimal point on a number and then returns it as a string. This article will talk about the syntax of this method and illustrate how to use it.

When we talk about primitive in JavaScript, we are talking about items that are not Objects and do not have any methods associated with them. When we want to take a primitive value and make it an object, we can do that with primitive wrappers that can go around the value or data type.

Numbers have a primitive wrapper object. We use it to turn string representations of a number to an actual Number object that has methods we can perform on it.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

Career Karma matches you with top tech bootcamps
Access exclusive scholarships and prep courses

Select your interest
First name

Last name

Email

Phone number

By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

Say for instance we have a string representation of a number because we had a form that required the user to insert a number value for a field on the screen. We can take that input, turn it into a Number, and then use any number of methods to work with that value.

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <form onsubmit=handleSubmit(event)>
     <label for="to-fixed">Enter a number:</label>
     <input id="to-fixed" onchange=handleChange(event) type="text" name="inputVal" value=""/>
     <label for="num-digits">Num places:</label>
     <input id="num-digits" onchange=handleChange(event) type="text" name="numVal" value=""/>
 
     <input type="submit" value="Submit" />
   </form>
 
   <h3 id="root"></h3>
 
   <script>
     let inputVal = '';
     let numVal = '';
 
     const handleChange = e => {
       if(e.target.name === "inputVal") {
         inputVal = e.target.value;
       } else {
         numVal = e.target.value;
       }
       console.log(e.currentTarget, e.target)
 
     }
     const handleSubmit = e => {
       e.preventDefault();
       console.log(e)
       const root = document.querySelector("#root");
       root.innerHTML = Number(inputVal).toFixed(Number(numVal));
       console.log(Number(inputVal).toFixed(5))
 
     }
     const inputValue = document.getElementById("to-fixed").value
   </script>
 </body>
</html>

Here, we used the Number object’s toFixed() method to make the number the length we want it. The syntax for the method is as follows:

       const toFixedNumDigits = Number([x]).toFixed(Number([y]));

If dealing with forms, there is one thing you have to remember: these values come in as strings. So in order to use the toFixed() method on them, you have to turn them into Number representations.

We do that here by encapsulating the inputs with the Number(n) wrapper. The first variable, x, is the floating point number you would like to shorten (or lengthen as the case may be). The second variable, y, is the number of places you want the number to go out to past the decimal point.

Try a few of these numbers out for yourself to see what you get back in the code editor:

Enter a number:         Num places:
//floats
45.45678                3  // Returns '45.457'
//integers
45                    	 5  // Returns '45.00000'
//exponential notation
1e-10                   3  // Returns '0.00'
1.23e+20                2  // Returns '123000000000000000000.00'
1.23e-10                2  // Returns '0.00'

As you can see the number of digits adjusts based on the y variable you plugged into the Num Places input. If the number isn’t long enough to compensate for the Num Places value, it will pad the string with zeros until the desired length is reached.

If the number is long and the Num Places input is shorter than the available digits you have after the decimal point, it will shorten the number and round off the end to return the desired string representation of the number.

Please Note : If you want to work with it as a number in your logic after it has been manipulated and returned, you will have to turn it back into a number using the Number primitive wrapper like we did above.

What to Learn Next?

JavaScript Random Number: A Complete Guide

JavaScript ParseInt: A Step-By-Step Guide

JavaScript Countdown Timer: A Tutorial

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

JavaScript toString

JavaScript toUpperCase and toLowerCase