Format Numbers

Number formatting for different needs. finance, length, size, etc.

Copy the Format Numbers <script> and paste into the <head> of your page

<!-- [WebTricks by CodeRaccoons] - Format Numbers -->
<script async src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/Functional/FormatNumbers.min.js" ></script>
<!-- [WebTricks by CodeRaccoons] - Format Numbers -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/Functional/FormatNumbers.min.js" ></script>
Copy Script

Required attributes

Optional
I want this element to show the formatted number.
Attribute to add
Name
wt-formatnumber-element
Value
number
Instructions

Assign this attribute to the element that contains the number to format.

How does it look?
Optional
I want this attribute to specify locales for formatting. (e.g., 'en-US').
Attribute to add
Name
wt-formatnumber-locales
Value
Instructions

Set this attribute to define the locale for formatting the number.

How does it look?
Optional
I want this attribute to specify the unit code.
Attribute to add
Name
wt-formatnumber-unit
Value
Instructions

Set this attribute to define the unit when formatting as unit style.

How does it look?
Optional
I want this attribute to set the formatting style (e.g., currency).
Attribute to add
Name
wt-formatnumber-style
Value
currency
Instructions

Set this attribute to specify the formatting style for the number.

Available options:
currency, decimal, percent, unit

How does it look?
Optional
I want this attribute to specify the currency code.
Attribute to add
Name
wt-formatnumber-currency
Value
CAD
Instructions

Set this attribute to define the currency when formatting as currency.

Eg, when using Canadian or us dollar this can be specified writing CAD or USD

How does it look?

Optional Attributes

No items found.

Working examples