Formatting with 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!
