Windows Systems Administrator Jupitermedia US-CT-Darien Post A Job | Post A Resume

WebDaily: Your daily source for Web Technology Tips and Tricks!

---

*****************************************************************
Formatting with JavaScript
*****************************************************************

* This article discusses how to format strings and numbers using JavaScript.

Since Internet Explorer is the only browser which supports VBScript, when developing client-side scripts, using JavaScript is imperative. JavaScript, though, lacks the easy to use formatting features that VBScript inherently provides. There are often times, though, when you need to use JavaScript to output dynamic values to form elements, or through alerts, and you must use JavaScript's formatting features. This article intends to step through some of the techniques you can use in JavaScript to format numbers and strings.

NUMBERS:
========
One nice thing about VBScript is its FormatNumber function. Using this function you can specify how to display a number, and how many decimal places to use, if a leading zero is to be included for fractional numbers, and if you wish to use parenthesis for negative numbers. Let's write this function in JavaScript:

   function FormatNumber(num, decimalNum, bolLeadingZero, bolParens)
   /* IN - num:            the number to be formatted
           decimalNum:     the number of decimals after the digit
           bolLeadingZero: true / false to use leading zero
           bolParens:      true / false to use parenthesis for - num

      RETVAL - formatted number
   */
   {
       var tmpNum = num;

       // Return the right number of decimal places
       tmpNum *= Math.pow(10,decimalNum);
       tmpNum = Math.floor(tmpNum);
       tmpNum /= Math.pow(10,decimalNum);

       var tmpStr = new String(tmpNum);

       // See if we need to hack off a leading zero or not
       if (!bolLeadingZero && num < 1 && num > -1 && num !=0)
           if (num > 0)
               tmpStr = tmpStr.substring(1,tmpStr.length);
           else
               // Take out the minus sign out (start at 2)
               tmpStr = "-" + tmpStr.substring(2,tmpStr.length);                        


       // See if we need to put parenthesis around the number
       if (bolParens && num < 0)
           tmpStr = "(" + tmpStr.substring(1,tmpStr.length) + ")";


       return tmpStr;
   }

This function should suit most of your number formatting needs (except for currency issues). This function could be made a little more fail-safe if some priliminary testing was implemented. For example, if decimalNum is less than zero, then we must handle it so not to get a strange result. Here is an example of how you could use the function above:

<SCRIPT LANGUAGE="JavaScript">
var MyNum = -0.314159;
document.write(FormatNumber(MyNum,3,false,true));
</SCRIPT>


This would print (.314) as your output.

STRINGS:
========
With a little ingenuity and code, you can create any string formatting function by knowing just the following two string operators: substring and indexOf. To use any of the string object method or properties, you must create a variable of type String. In the FormatNumber function, I created a variable named tmpStr which was declared as follows:

var tmpStr = new String();

Once you declare a variable as a String object, you can use the appropriate methods. One important method is indexOf. indexOf returns a cbaracter at a passed in position of your string. For example:

tmpStr = String("Hello world!");
document.write(tmpStr.indexOf(4));

would output "o". One important thing to remember about strings in JavaScript is that they are zero-based. The first character in a string is in the zero-th position. So tmpStr.indexOf(4) returns the 5th character, which is "o". The other important string object method, substring, takes two parameters, the start and stop positions. Let's look at a quick example:

tmpStr = String("Hello world!");
document.write(tmpStr.substring(4,8));

would output "o wor". Again, recall that strings are indexed starting at zero, not one. By just using substring and indexOf, you can formulate any string formatting functions. Examples can be seen at the 4 Guys website, http://www.4GuysFromRolla.com

Happy Programming!

*****************************************************************
*****************************************************************
To subscribe to WebDaily, point your browser to:
http://www.4GuysFromRolla.com/webtech/webdaily
*****************************************************************
*****************************************************************

Please forward this information to a friend, including the subscription URL! Happy Programming!

Windows Internet Technology | ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article