Cómo convertir un número a formato de moneda en JavaScript
El método Intl.NumberFormat() nos permite formatear a un valor más legible.
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
.
- 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:
- 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
ypercent
. - 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'