Styling the NumberFormat in JavaScript

If you ever wanted to display a number (amount) in Indian currency format and you have the number in a template variable as total like {{ total }}, then here’s a quick way to go using AlpineJS’s x-text to replace the server-side rendered content.

<td x-text="new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR' }).format({{ total }})">
    ₹{{ total }}
</td>

NumberFormat has been supported on all browsers for a long time now.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat