Existen muchas librerías de terceros en JavaScript que permiten dar formato a números de forma sencilla. Con Intl.NumberFormat() ya no nos va a hacer falta ninguna librería externa para dar formato a valores numéricos. Una dependencia menos en nuestra base de código ✌.

El objeto Intl en JavaScript es la API de internacionalización. Nos da un montón de funcionalidades para formatear cadenas de texto, números y fechas en el formato específico de cada zona.

En el caso de los valores monetarios puede ser muy útil. En el artículo Las cosas más raras que verás en JavaScript ya te contaba que los valores en coma flotante pueden llegar a ser problemáticos.

Usando Intl.FormatNumber()

Dar formato monetario a un número es algo que durante mucho tiempo ha dado dolor de cabeza a los programadores y programadoras.

Esto ya no volverá a ocurrir. Podemos hacer algo así para dar formato a valores numéricos:

const totalPrecio = 19800.986982

const totalPrecioEur = new Intl.NumberFormat("es-ES", {
  style: "currency",
  currency: "EUR",
}).format(totalPrecio)

const totalPrecioUsd = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
}).format(totalPrecio)

console.log(totalPrecioEur) // 19.800,99 €
console.log(totalPrecioUsd) // $19,800.99

Ya podemos despreocuparnos del formato monetario que se usa en cada país. Solo necesitamos saber la moneda que se usa y especificar el país, JavaScript se encarga del resto.

Si queremos controlar los decimales en un valor numérico que no sea monetario, tenemos disponible el parámetro maximumFractionDigits:

const valorOriginal = 19800.986982

const valorFormateado = new Intl.NumberFormat("es-ES", {
  maximumFractionDigits: 3,
}).format(valorOriginal)

console.log(valorFormateado) // 19.800,987

Nunca había sido tan fácil redondear valores a un número concreto de decimales.

Pero no acaba ahí todo. También podemos formatear litros, velocidades, etc. Y en el formato que necesitemos:

const velocidad = 100

const velocidadKmH = new Intl.NumberFormat("es-ES", {
  style: "unit",
  unit: "kilometer-per-hour",
}).format(velocidad)

console.log(velocidadKmH) // 100 km/h

Así que ya sabes, cuando tengas que pelearte con números o internacionalizaciones, Intl de JavaScript estará ahí para echarte un cable. Si quieres ver cómo formatear fechas, también puedes mirar el post Dando formato a fechas con JavaScript.