Cómo convertir un número a formato de moneda en JavaScript
Tags: webdev, javascript, frontend
Published: 2023-11-02 04:20:24

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 más rápida de realizarlo es usando el método **.toFixed()** y concatenar el valor devuelto al precio. Por ejemplo:

```javascript
const priceNumber = 2300.34

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

```javascript
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 guion. Por ejemplo:

```javascript
"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ódigos de idiomas y países en:

- [https://www.w3schools.com/tags/ref_language_codes.asp](Listado de idiomas)
- [https://www.w3schools.com/tags/ref_country_codes.asp](Listado de código de país)


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 cuyo símbolo se incluirá en el número formateado, por ejemplo, dólar, euro o yenes.

- **minimumFractionDigits**: Indica el número mínimo de dígitos que se mostrarán después del punto decimal.


A continuación, te muestro más ejemplos de cómo formatear un precio normal a un precio en dólares, euros y yenes.

```javascript
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'
```

## Referencias

- [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat](Documentación de Intl.NumberFormat)