Cómo convertir un número a formato de moneda en JavaScript

Muchas veces he tenido la tarea de convertir un número a un formato de precios. Por ejemplo, si tenemos el precio de un producto como 2300.34 es menos legible que un precio representado como $ 2300.34 .

En un principio la idea mas rápida de realizarlo es usando el método .toFixed() y concatenar el valor devuelto al precio. Algo así:

const priceFormat = priceNumber.toFixed(2)

const newPrice = `$ ${priceFormat}` // Devuelve '$ 2300.34'

Sin embargo, hoy en día esta tarea es más sencilla gracias a una API nativa en Javascript, la API Intl.NumberFormat() nos permite formatear números en un formato específico.

Entiendo la API Intl

const priceNormal = 2300.83

const locales = 'en-US'

const options = {
	style: 'currency',
	currency: 'USD',
	minimumFractionDigits: 2,
	maximumFractionDigits: 2
}

const formatterDolar = new Intl.NumberFormat(locales, options)

const priceFormatter = formatterDolar.format(priceNormal)

console.log(priceFormatter) // Devuelve '$2,300.83'

El método Intl.NumberFormat() recibe dos parámetros de entrada: locales y options.

1. El primer parámetro locales nos permite especificar el idioma y región. Está compuesto por la combinación del código de idioma y el código de país separados por un guión. Por ejemplo:

'en-US' // idioma: inglés | código de país: Estados Unidos
'de-DE' // idioma: alemán | código de país: Alemania
'ja-JP' // idioma: japones | código de país: Japon

Puedes encontrar más código de idiomas o países:

• Listado de idiomas
• Listado de código de país

2. El segundo parámetro options es un objeto con múltiples propiedades, para formatear un número a formato moneda, se requieren 3 propiedades principales.

• style: Indica el estilo del formato numérico. Los valores aceptados son decimal , currency y percent .
• currency: Indica el tipo de moneda del símbolo que se incluirá al número formateado, por ejemplo: dólar, euro o yenes.
• minimumFractionDigits: Indica los dígitos mínimos que se muestran después del punto decimal.

A continuación te muestro más ejemplos formateando un precio normal a un precio en dolares, euros y yenes.

const priceNormal = 12343.23

const formatterDolar = new Intl.NumberFormat('en-US', {
	style: 'currency',
	currency: 'USD',
	minimumFractionDigits: 2
})

const priceInDolars = formatterDolar.format(priceNormal)
console.log(priceInDolars) // Devuelve '$12,343.23'

const formatterEuro = new Intl.NumberFormat('de-DE', {
	style: 'currency',
	currency: 'EUR',
	minimumFractionDigits: 2
})

const priceInEuros = formatterEuro.format(priceNormal)
console.log(priceInEuros) // Devuelve '12.343,23 €'

const formatterYenes = new Intl.NumberFormat('ja-JP', {
	style: 'currency',
	currency: 'JPY',
	minimumFractionDigits: 2
})

const priceInYenes = formatterYenes.format(priceNormal)
console.log(priceInYenes) // Devuelve '￥12,343.23'

Saludos y hasta la próxima :D.

Happy coding! 🚀}