FormatNumber

Toont getallen, bedragen of percentages netjes opgemaakt in de taal van je site — bijvoorbeeld als prijs in euro's met het juiste scheidingsteken.

Gebruik dit block bij elk numeriek veld dat je leesbaar wilt tonen: prijzen, percentages, aantallen met duizendtal-scheidingstekens. Een ruwe waarde als 1234.5 oogt technisch; met style='currency' wordt dat automatisch '€ 1.234,50' in de juiste Nederlandse notatie.

Handig te combineren met een GsapCounter wanneer een bedrag of percentage ook nog moet oplopen bij het scrollen — bijvoorbeeld een omzetcijfer dat als blikvanger op de pagina staat.

Gebruiksscenario's per site-type

Op een webshop is dit block onmisbaar voor prijzen: een bedrag als 1234.5 wordt automatisch '€ 1.234,50', inclusief het Nederlandse duizendtal-scheidingsteken en decimaalteken die van de Engelse notatie verschillen. Een zakelijke dienstverlener gebruikt FormatNumber vaak voor kengetallen op de homepage — omzetcijfers, aantal afgeronde projecten of een tevredenheidsscore als percentage. Op een portfolio-site is het minder prominent, maar bruikbaar bij bijvoorbeeld het aantal jaren ervaring of het aantal afgeronde projecten in een statistiekenrij.

Een veelgemaakte fout is een percentage als geheel getal opslaan (bijvoorbeeld 99 voor 99%) zonder rekening te houden met de decimalen-prop, waardoor '99%' wordt getoond terwijl '99,9%' bedoeld was. Controleer bij het invullen van het record dus altijd of de brondata en de decimals-instelling op elkaar aansluiten.

Let bij internationale sites op dat valuta-opmaak per taal kan verschillen: dezelfde prijs toont in het Nederlands '€ 1.234,50' en in het Engels doorgaans '€1,234.50', met omgewisselde punt en komma. Omdat FormatNumber de sitetaal volgt, hoef je dat verschil niet zelf te programmeren bij een meertalige site.

Combineer dit block met GsapCounter wanneer een bedrag niet alleen correct opgemaakt, maar ook nog dynamisch moet oplopen zodra de bezoeker bij die sectie scrolt — bijvoorbeeld een omzetstatistiek die als blikvanger op de pagina staat. Voor puur statische bedragen, zoals een prijs op een productkaart, is FormatNumber zonder animatie de juiste keuze.

<FormatNumber value='1234.5' style='currency' currency='EUR' />