When you use Number.toFixed() you obtain a string (not a number any more). For that reason, subsequent calls to .toLocaleString() launch the generic Object.toLocaleString() method that knows nothing about numbers, instead of the Number.toLocaleString() you want.
Having a look at the documentation we can compose something like this:
> Number(213245).toLocaleString("es-ES", {minimumFractionDigits: 2});
"213.245,00"
console.log(Number(213245).toLocaleString("es-ES", {minimumFractionDigits: 2}));
This is a relatively new addition so make sure to verify browser support, but it's been working in Firefox and Chrome-like browsers for a few years now. In particular, some runtimes like Node.js do not include the full ICU dataset by default.
Answer from Álvaro González on Stack Overflowjavascript - How to format numbers by prepending 0 to single-digit numbers? - Stack Overflow
javascript - Format number to always show 2 decimal places - Stack Overflow
javascript - Number to german decimal format converter function - Code Review Stack Exchange
numbers - Is there a functionality in JavaScript to convert values into specific locale formats? - Stack Overflow
Edit (2021):
It's no longer necessary to format numbers by hand like this anymore. This answer was written way-back-when in the distant year of 2011 when IE was important and babel and bundlers were just a wonderful, hopeful dream.
I think it would be a mistake to delete this answer; however in case you find yourself here, I would like to kindly direct your attention to the second highest voted answer to this question as of this edit.
It will introduce you to the use of .toLocaleString() with the options parameter of {minimumIntegerDigits: 2}. Exciting stuff. Below I've recreated all three examples from my original answer using this method for your convenience.
[7, 7.5, -7.2345].forEach(myNumber => {
let formattedNumber = myNumber.toLocaleString('en-US', {
minimumIntegerDigits: 2,
useGrouping: false
})
console.log(
'Input: ' + myNumber + '\n' +
'Output: ' + formattedNumber
)
})
Original Answer:
The best method I've found is something like the following:
(Note that this simple version only works for positive integers)
var myNumber = 7;
var formattedNumber = ("0" + myNumber).slice(-2);
console.log(formattedNumber);
For decimals, you could use this code (it's a bit sloppy though).
var myNumber = 7.5;
var dec = myNumber - Math.floor(myNumber);
myNumber = myNumber - dec;
var formattedNumber = ("0" + myNumber).slice(-2) + dec.toString().substr(1);
console.log(formattedNumber);
Lastly, if you're having to deal with the possibility of negative numbers, it's best to store the sign, apply the formatting to the absolute value of the number, and reapply the sign after the fact. Note that this method doesn't restrict the number to 2 total digits. Instead it only restricts the number to the left of the decimal (the integer part). (The line that determines the sign was found here).
var myNumber = -7.2345;
var sign = myNumber?myNumber<0?-1:1:0;
myNumber = myNumber * sign + ''; // poor man's absolute value
var dec = myNumber.match(/\.\d+$/);
var int = myNumber.match(/^[^\.]+/);
var formattedNumber = (sign < 0 ? '-' : '') + ("0" + int).slice(-2) + (dec !== null ? dec : '');
console.log(formattedNumber);
Use the toLocaleString() method in any number. So for the number 6, as seen below, you can get the desired results.
(6).toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false})
Will generate the string '06'.
(Math.round(num * 100) / 100).toFixed(2);
Live Demo
var num1 = "1";
document.getElementById('num1').innerHTML = (Math.round(num1 * 100) / 100).toFixed(2);
var num2 = "1.341";
document.getElementById('num2').innerHTML = (Math.round(num2 * 100) / 100).toFixed(2);
var num3 = "1.345";
document.getElementById('num3').innerHTML = (Math.round(num3 * 100) / 100).toFixed(2);
span {
border: 1px solid #000;
margin: 5px;
padding: 5px;
}
<span id="num1"></span>
<span id="num2"></span>
<span id="num3"></span>
Note that it will round to 2 decimal places, so the input 1.346 will return 1.35.
Number(1).toFixed(2); // 1.00
Number(1.341).toFixed(2); // 1.34
Number(1.345).toFixed(2); // 1.34 NOTE: See andy's comment below.
Number(1.3450001).toFixed(2); // 1.35
document.getElementById('line1').innerHTML = Number(1).toFixed(2);
document.getElementById('line2').innerHTML = Number(1.341).toFixed(2);
document.getElementById('line3').innerHTML = Number(1.345).toFixed(2);
document.getElementById('line4').innerHTML = Number(1.3450001).toFixed(2);
<span id="line1"></span>
<br/>
<span id="line2"></span>
<br/>
<span id="line3"></span>
<br/>
<span id="line4"></span>
For formatting currency, given that there are many desired formats, the easiest and most readable way is to just make a function called formatCurrency() that might look something like this:
function formatCurrency(amount, symbol, groupDigits, preFixed, exchangeCommas){
var result = amount.toFixed(2);
if(groupDigits){
result = result.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
}
if(prefixed){
result = symbol + result;
}else{
result = result + symbol;
}
if(exchangeCommas){
var decimalIndex = result.lastIndexOf(".");
result = result.replace(",", ".");
result = result.substring(0, decimalIndex) + "," + result.substring(decimalIndex + 1);
}
return result;
}
https://stackoverflow.com/questions/14467433/currency-formatting-in-javascript
Edit: Note that the parameters groupDigits, preFixed and exchangeCommas are optional boolean values.
Then if you want to make it shorter or less readable for whatever reason there are online tools that make it easy to do so, such as yui compressor.
My suggestion is:
/**
* Formats given number according to given options.
* @param {number} number The number to be formatted.
* @param {!Object.<string, *>} options The formatting options.
* @return {string} The formatted number string.
*/
function formatNumber(number, options) {
/** @type {Array.<string>} */
var result = (options['fraction'] ? number.toFixed(options['fraction']) :
'' + number).split('.');
return options['prefix'] +
result[0].replace(/\B(?=(\d{3})+(?!\d))/g,
/** @type {string} */ (options['grouping'])) +
(result[1] ? options['decimal'] + result[1] : '') +
options['suffix'];
}
// Example:
var expected = '45.122,90 €';
var number = 45122.9;
var formatted = formatNumber(number, {
'decimal': ',',
'grouping': '.',
'fraction': 2,
'prefix': '',
'suffix': ' €'
});
alert('Formatted: ' + formatted + '\n' +
'Expected: ' + expected + '\n' +
'Equals: ' + (formatted == expected));
Source: https://github.com/Datamart/Glize/blob/master/src/formatters/NumberFormatter.js#L22
I found a way to do this at this page.
You can you toLocaleString without using toFixed before it. toFixed returns a string, toLocaleString should get a number. But you can pass an options object with toLocaleString, the option minimumFractionDigits could help you with the functionality toFixed has.
50.toLocaleString('de-DE', {
style: 'currency',
currency: 'EUR',
minimumFractionDigits: 2
});
Checkout all the other options you can pass with this function.
50.00 is a unit-less value. The best you can do is convert 50.00 to 50,00 and then append the € yourself. Therefore, just use Number.toLocaleString().
var i = 50.00;
alert(i.toLocaleString() + ' €'); // alerts '50.00 €' or '50,00 €'
Demo →
Lots of relevant questions:
- How can I format numbers as money in JavaScript? (the big one; ~70k views)
- Convert to currency format
- Format currency using javascript
- how do i print currency format in javascript
- JavaScript: Format number/currency w/regards to culture like .NET's String.Format()? (possibly useful, if you're using ASP.NET)
- format number to price
I would recommend just not messing with the user input, i.e. not setting formattedValue in the input event handler. If you want to format the number nicely, do it the first time the component is shown and on blur to prevent interfering with the user's intentions.
If you really want to strictly prescribe a certain format while the user is typing that is non trivial because the cursor position, number sign, clearing the value and other things have to taken into account. There are also libraries for that, e.g. imask.
You can use my package react-international-number-input
you can download
npm install react-international-number-input
or
yarn add react-international-number-input
here is the link https://www.npmjs.com/package/react-international-number-input