JavaScript Formatting Methods

A common problem encountered with JavaScript is the lack of utilities for formatting numerical output in a human-friendly style. The ToFmt JavaScript object described here and its associated methods enable numbers to be output as floating point values or powers of 10 with a specified width and number of figures after the decimal point, integer values, or to attach a leading zero to single digit numbers. Brief descriptions of the methods, examples of their use, and a series of test examples to check that the code works correctly in your browser are given below. The object and methods are included in the <HEAD> section of this document which you can access if you choose to view the document source.

Please let me know if you find these objects useful, or contact me with any comments you may have.

[email protected].

`ToFmt` object

Constructor Example

 var a = new ToFmt(x);

where x is a numerical variable or number.

Methods

fmt00(): Tags leading zero onto integers 0 - 9. Particularly useful for displaying results from methods of the Date object.
fmtF(w,d):: Formats in a style similar to Fortran's Fw.d, where w is the width of the field and d is the number of figures after the decimal point. The result is rounded either up or down to be correct to the number of digits requested. The result is aligned to the right of the field. The default padding character is a space " ". This can be modified using the setSpacer(string) method of ToFmt. If the result will not fit in the field , the field will be returned containing w asterisks.
fmtE(w,d): Formats in a style similar to Fortran's Ew.d, where w is the width of the field and d is the number of figures after the decimal point. The result is rounded either up or down to be correct to the number of digits requested. The result is aligned to the right of the field. The default padding character is a space " ". This can be modified using the setSpacer(string) method of ToFmt. If the result will not fit in the field , the field will be returned containing w asterisks.
fmtI(w): Formats in a style similar to Fortran's Iw, where w is the width of the field. Floating point values are truncated (rounded down) for integer representation. The result is aligned to the right of the field. The default padding character is a space " ". This can be modified using the setSpacer(string) method of ToFmt. If the result will not fit in the field , the field will be returned containing w asterisks.
setSpacer(string): Method enables the space padding character to be set. The default is set for a blank space, which would be lost in standard HTML. You may wish to try " " as the spacer character in your HTML output. This will not allow for column alignment unless you use a fixed width font, but will otherwise let your numbers breathe a bit.

Examples

These examples serve both to show how to use the formatting functions and as a test to see if they function correctly on your browser. If they do not function correctly - please let me know, and I will see what I can do about it.

`fmt00`

To insert leading zero for integers 0-9. No change will take place for integers > 9. The code to do this is:

  <SCRIPT LANGUAGE="JavaScript">
  <!--
   function tst00(){
    var a = new ToFmt(document.fm1.fta1.value);
    document.fm1.fta2.value=a.fmt00();
   }
  // -->
  </SCRIPT>

and the HTML for the form is:

  <FORM NAME="fm1">
  Enter a postive integer:
  <INPUT TYPE="TEXT" SIZE=3 NAME="fta1">
  <INPUT TYPE="BUTTON" VALUE="Format!" onClick="tst00();return true;">
  Result:
  <INPUT TYPE="TEXT" SIZE=3 NAME="fta2">
  </FORM>

The function first creates a new ToFmt object with the contents of the first text field of the form (named fta1), and sets the value of the second text field to the result of the fmt00() method invoked on the ToFmt object created.

`fmtF(w,d),fmtE(w,d),fmtI(w)`

Tests for the fmtF(w,d),fmtE(w,d), and fmtI(w) functions. Introduce a positive or negative number in the first text field. The JavaScript code used here is:

  <SCRIPT LANGUAGE="JavaScript">
  <!--
   function tst01(){
    var a = new ToFmt(document.fm2.fta1.value);
    document.fm2.fta2.value=a.fmtF(13,5);
    document.fm2.fta3.value=a.fmtE(13,6);
    document.fm2.fta4.value=a.fmtI(6);
   }
  // -->
  </SCRIPT>

where the function tst01 is invoked from the form named fm2, with text areas fta1 - fta4.

December 1999. [email protected]

Go to: My Fortune City homepage.

	`fmtF(13,5)`
	`fmtE(13,6)`
	`fmtI(6)`