Techniques Behind Modern Web
23 Feb
This is another useful JavaScript function by Matt Snider used for number formatting. For JavaScript being considered “the world’s most misunderstood programming language”, Matt tried to explain how number is treated in JS (read more here). Here are build-in functions of Number object supported by different IE and Firefox versions.
method IE FireFox Explaination toExponential 5.5 1.5 Returns the expotential value of the number. toFixed 5.5 1.5 Returns a number with a specified number of decimals. toLocaleString 3 2.0 Displays the number using regional preferences. toPrecision 5.5 1.5 Returns a string with a specified number of digits. toSource — 1.5 Returns the source code used to make the number. toString 3 2.0 Returns the number as a string. ValueOf 3 2.0 See toString
* Table From The Complete JavaScript Number Reference
Although the ‘toFixed‘ and ‘toPrecision‘ method come in very handy when converting Numbers to Strings with a given number of decimals or precision, Matt’s function will help to use commas to represent thousands, millions, etc. and it allows us to add additional non-number characters (like ‘$’ and ‘%’) too.
/** * Formats the number according to the ‘format’ string; adherses to the american number standard where a comma is inserted after every 3 digits. * note: there should be only 1 contiguous number in the format, where a number consists of digits, period, and commas * any other characters can be wrapped around this number, including ‘$’, ‘%’, or text * examples (123456.789): * ‘0′ - (123456) show only digits, no precision * ‘0.00′ - (123456.78) show only digits, 2 precision * ‘0.0000′ - (123456.7890) show only digits, 4 precision * ‘0,000′ - (123,456) show comma and digits, no precision * ‘0,000.00′ - (123,456.78) show comma and digits, 2 precision * ‘0,0.00′ - (123,456.78) shortcut method, show comma and digits, 2 precision * * @method format * @param format {string} the way you would like to format this text * @return {string} the formatted number * @public */ Number.prototype.format = function(format) { if (! isType(format, ’string’)) {return ”;} // sanity check var hasComma = -1 < format.indexOf(’,'), psplit = format.stripNonNumeric().split(’.'), that = this; // compute precision if (1 < psplit.length) { // fix number precision that = that.toFixed(psplit[1].length); } // error: too many periods else if (2 < psplit.length) { throw(’NumberFormatException: invalid format, formats should have no more than 1 period: ‘ + format); } // remove precision else { that = that.toFixed(0); } // get the string now that precision is correct var fnum = that.toString(); // format has comma, then compute commas if (hasComma) { // remove precision for computation psplit = fnum.split('.'); var cnum = psplit[0], parr = [], j = cnum.length, m = Math.floor(j / 3), n = cnum.length % 3 || 3; // n cannot be ZERO or causes infinite loop // break the number into chunks of 3 digits; first chunk may be less than 3 for (var i = 0; i < j; i += n) { if (i != 0) {n = 3;} parr[parr.length] = cnum.substr(i, n); m -= 1; } // put chunks back together, separated by comma fnum = parr.join(','); // add the precision back in if (psplit[1]) {fnum += ‘.’ + psplit[1];} } // replace the number portion of the format with fnum return format.replace(/[d,?.?]+/, fnum); };
Just pass in a String as the format that contain any one number (in the format that you like) and the result will replace the number in the format String with the properly formatted Number object.
Thanks again, Matt!
Free Website Magazine: Know more than your competitors with Website Magazine
Don't forget to subscribe
so you don't miss out on future posts!
Nice! But you are aware that some countries (e.g. Netherlands) use the comma and period exactly opposite (e.g. 1.234,56 instead of 1,234.45)? Still, I can easily modify that for my needs, so thanks!
function formatWithComma(number) {
var formattedNumberString = (number%1000).toString();
var x = parseInt(number/1000);
while(x > 0) {
formattedNumberString = x%1000 + ‘,’ + formattedNumberString;
x = parseInt(x/1000);
}
return formattedNumberString;
}
Hello!,
Good day!,
Hi!,
JavaScript Number Format Function by Matt Snider | Just Talk About Web…
JavaScript Number Format Function by Matt Snider | Just Talk About Web…