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.
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
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
