Xaprb

Stay curious!

Archive for the ‘formatting’ tag

JavaScript Number Formatting Library v1.3 released

with 5 comments

Download Number Formatting Library

I’ve updated my JavaScript Number Formatting Library to version 1.3. This release adds the ability to customize how not-a-number (NaN), positive infinity and negative infinity are formatted. All you need to do is set the appropriate constant in Number.prototype:

  • Number.prototype.NaN
  • Number.prototype.posInfinity
  • Number.prototype.negInfinity

For more documentation, see the original article on JavaScript number formatting.

Written by Xaprb

July 15th, 2007 at 9:52 am

JavaScript number-formatting library updated

with 5 comments

Download number-functions

I’ve released a new version of my powerful, flexible, efficient JavaScript number-formatting library, which is probably the best available. This release adds a fix for zero-padding negative numbers.

If you find bugs, please send me test cases I can use to reproduce and add to the unit test suite. One test per line, like “input”, “format”, “expected” is best. For example, this is a great test case:

-1, "#,#.00", "-1.00"

I can plug that directly into the unit test suite, run it, and if it gives back “-01.00″ it will fail the test. This makes it much easier and more convenient for me to fix bugs.

Sponsoring bug fixes wouldn’t hurt either ;-)

Written by Xaprb

June 19th, 2007 at 10:13 pm

How to format numbers in JavaScript flexibly and efficiently

with 32 comments

If you have questions or comments or bugs report, or a change to make, be sure to use the project’s new homepage: Flexible JS Formatting Libraries

Download number-functions

This article continues my series on parsing and formatting data with JavaScript, this time with numeric data. I don’t need to do number parsing, but formatting is very useful. The technique is similar to my date formatting code — code that writes code (for raw speed), using custom format specifier strings (for flexibility and ease of use). The result is number formatting functionality that is highly efficient, flexible, and easy to use.

First, the idea: you have a number, you want it formatted a certain way. Here’s how:

var dollars = 5.001;
alert(dollars.numberFormat("$0.00");
// result: "$5.00"
var percent = .08134;
alert(percent.numberFormat("0.00%");
// result: "8.13%"
var bignum = 12831242485472;
alert(bignum.numberFormat("0,0,, million");
// result: "12,831,243 million"

My custom date formatting code used PHP’s date-formatting syntax because it’s much less context-sensitive and (I think) more useful than Microsoft’s, but my number-formatting syntax is similar to Microsoft’s because it’s much more widely used and I don’t see an existing, better alternative. Rather than documenting it separately, I’ll just point you to the (poor quality) Microsoft documentation for the .NET Custom Numeric Format Strings functionality, and list the differences from my implementation:

  • Rounding works differently in multi-section format strings. In .NET with a two-section string,

    If the number to be formatted is negative, but becomes zero after rounding according to the format in the second section, then the resulting zero is formatted according to the first section.

    This is not true in my code — the number is formatted according to its value, and once the code decides which section applies, that section will be used no matter what happens during rounding.
  • Question marks are digit placeholders just like the number sign (#), but if there’s no digit to insert, they get replaced with spaces, not removed. They can be used for space-padding, which might be useful for, say, accounting notation.
  • You don’t have to enter quotes around strings that should be mixed in with the number placeholders. In fact, my syntax is much more permissive than the Microsoft syntax: anything can go anywhere. You can put arbitrary strings smack in the middle of your number if you want.
  • It’s not internationalized.

I’ve only implemented a subset of the various number-formatting syntaxes I’ve seen in spreadsheets and so forth. The subset is about 85% complete in my opinion. However, I think it’s functionally about 99% complete, which means I think 99% of the time you want to format a number, it will do what you want. The tradeoff is simplicity and speed. Number formatting is actually much more difficult than date formatting, and I’ve tried to keep the code sane.

I have a set of unit tests, which use the excellent JsUnit library. Bring up the unit test page and enter the following url to be tested: www.xaprb.com/articles/number-test.html.

Of course there’s the obligatory demo page, too.

Written by Xaprb

January 5th, 2006 at 8:22 pm