Localize: Format Numbers
Features
- Small file size
- Uses
Intl.NumberFormatbut patches browser inconsistencies
Formatting
With the formatNumber you can safely display a number for all languages.
The input value is 1234.56.
export const formatting = () => html`
<style>
___HTML_0___
</style>
<table class="demo-table">
<thead>
<tr>
<th>Options</th>
<th>Output</th>
<th>Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>___HTML_1___</td>
<td></td>
</tr>
<tr>
<td>Currency symbol</td>
<td>
___HTML_2___
</td>
<td>
<code
>formatNumber({ style: 'currency', currencyDisplay: 'symbol', currency: 'EUR' })</code
>
</td>
</tr>
<tr>
<td>Currency code</td>
<td>
___HTML_3___
</td>
<td>
<code>formatNumber({ style: 'currency', currencyDisplay: 'code', currency: 'EUR' })</code>
</td>
</tr>
<tr>
<td>Locale</td>
<td>___HTML_4___</td>
<td><code>formatNumber({ locale: 'nl-NL' })</code></td>
</tr>
<tr>
<td>No decimals</td>
<td>
___HTML_5___
</td>
<td>
<code>formatNumber({ minimumFractionDigits: 0, maximumFractionDigits: 0, })</code>
</td>
</tr>
</tbody>
</table>
`;
Formatting parts
formatNumberToParts allows to get individual parts of a number on all browsers.
The input value 1234.56 gets formatted via
formatNumberToParts(value, { style: 'currency', currency: 'EUR' });
export const formattingParts = () => html`
<style>
___HTML_0___
</style>
<table class="demo-table">
<thead>
<tr>
<th>Part</th>
<th>Output</th>
</tr>
</thead>
<tbody>
___HTML_1___
</tbody>
</table>
`;
List common locales
The input value is 1234.56.
Formatting happens via
formatNumber(1234.56, { locale, style: 'currency', currency: 'EUR' });
formatNumber(1234.56, { locale, style: 'currency', currency: 'USD' });
export const listCommonLocales = () => html`
<style>
___HTML_0___
</style>
<table class="demo-table">
<thead>
<tr>
<th>Locale</th>
<th>Output Euro</th>
<th>Output US Dollar</th>
</tr>
</thead>
<tbody>
___HTML_1___
</tbody>
</table>
`;
List all locales
The following list show number formatting for all known locales.
The input value is 1234.56.
Formatting happens via
formatNumber(1234.56, { locale, style: 'currency', currency: 'EUR' });
formatNumber(1234.56, { locale, style: 'currency', currency: 'USD' });
export const listAllLocales = () => html`
<style>
___HTML_0___
</style>
<table class="demo-table">
<tr>
<th>Locale</th>
<th>Output Euro</th>
<th>Output US Dollar</th>
</tr>
___HTML_1___
</table>
`;