JSTL provides you the <fmt:formatNumber> to format number in different forms. If you remember, with the <c:out> action you can print any number such as integer or floating-point number. But with <fmt:formatNumber> you have more controls how a number is formatted and printed. The most simple basic usage of the <fmt:formatNumber> action is as follows:
<fmt:formatNumber value="value" />Code language: HTML, XML (xml)The <fmt:formatNumber> action accepts any number in the value attribute. It does more than the <c:out> action that it formats the number based on the locale which specifies by the web browser settings on the client-side or set by the web application on the server-side.
Let’s take a look at an example of using <fmt:formatNumber>:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core"
prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt"
prefix="fmt" %>
<html>
<head>
<title>format number</title>
</head>
<body>
<c:set var="val" value="200.51" />
<fmt:setLocale value="en_US"/>
<fmt:formatNumber value="${val}" />
<fmt:setLocale value="fr_FR"/>
<fmt:formatNumber value="${val}" />
</body>
</html>Code language: HTML, XML (xml)In the above example, first, we define a variable and set its value to 200.51. Then we use action <fmt:setlocale> to override the locale of the browser. We set the locale to en_US so when we use the action <fmt:formatNumber> to format the number, therefore, it displays as 200.51 which is USA format. Next, we set the locale to fr_FR and print the number again, now it displays as 200,51 which is France format.
Let’s take a look at attributes of the <fmt:formatNumber> in more details:
| Name | Meaning |
|---|---|
| value | Numeric value to be formatted. |
| type | Determine the value is formatted as number, currency, or percentage. |
| pattern | Specify a custom formatting pattern for the output. |
| currencyCode | Only applies for the currency formatting which accepts ISO 4217 currency code. |
| currencySymbol | Only apply for the currency formatting, accepts currency symbol |
| groupingUsed | Used to define grouping separator for formatted number |
| maxIntegerDigits | Specify the maximum number of digits in the integer portion of the formatted number in the output. |
| minIntegerDigits | Specify the minimum number of digits in the integer portion of the formatted number in the output. |
| maxFractionDigits | Specify the maximum number of digits in the fractional portion of the formatted number in the output |
| minFractionDigits | Specify the minimum number of digits in the fractional portion of the formatted number in the output. |
| var | The variable name of the exported scoped variable |
| scope | of the var variable |
Printing the percentage
Let’s play with the printing percentage value.
<c:set var="val" value="20.51" />
<p> percentage in USA
<fmt:setLocale value="en_US"/>
<fmt:formatNumber value="${val}"
type="percent" />
</p>Code language: HTML, XML (xml)In order to print the percentage format, you assign percent to the type attribute of the <fmt:formatNumber> action.
Printing different currency locale
To print currency, you assign the currency to the type attribute and set the locale before outputting the formatted number.
<c:set var="val" value="40.52" />
<p> Currency in USA
<fmt:setLocale value="en_US"/>
<fmt:formatNumber value="${val}"
type="currency" />
</p>
<p>Currency in Germany
<fmt:setLocale value="de_DE"/>
<fmt:formatNumber value="${val}"
type="currency"/>
</p>
currency in USA $40.52
currency in Germany 40,52 €Code language: HTML, XML (xml)Printing number with a custom pattern
Sometimes, you’ll need to print number with a specific custom pattern especially number in scientific notation. In these cases, you can define your own pattern and specify it in the pattern attribute of the <fmt:formatNumber> action. Let’s take a look at an example of printing a big number with a scientific pattern:
<c:set var="val" value="46563746375" />
<fmt:formatNumber value="${val}"
pattern="###.###E0" />Code language: HTML, XML (xml)If you run the above code you will see the number is formatted as the pattern which is 46.5637E9.
There are many cases you will need to format the number and output it on screen. You can refer to the attribute table above to find what you need and practice with it to get more familiar with different kinds of number formattings.
