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!


Related Posts