Cómo dar formato a un número como cadena de moneda en JavaScript

En este tutorial, veremos cómo formatear números como cadenas de moneda en Javascript. Usaremos el método Intl.NumberFormat() para dar formato a los números.

Introducción

Tener que formatear manualmente un número como una cadena de moneda puede ser un proceso tedioso. Aunque esto se puede hacer a menudo en unas pocas líneas de código, es una buena práctica seguir una norma estandarizada en lugar de codificarlo usted mismo, además es mucho más fácil para el desarrollador escribir el código.

En este tutorial, veremos cómo formatear una cadena de moneda en JavaScript.

Formateo de cadenas como moneda con configuración regional

Una configuración regional es un conjunto de parámetros que especifican cualquier cosa en su computadora que sea específica de la región:

  • Configuración de formato de número
  • Clasificación de caracteres, configuración de conversión de casos.
  • Configuración del formato de fecha y hora
  • Configuración de formato de moneda
  • Configuración del tamaño del papel
  • Formato de día de la semana/primer día de la semana
  • Unidades de medida

Los usuarios de Windows conocen los parámetros locales como Configuración de región. Por otro lado, es posible que los usuarios de Linux no sepan que puede usar el comando locale para inspeccionar dichos parámetros.

En JavaScript, la forma más fácil y popular de formatear números como cadenas de moneda es a través del método Intl.NumberFormat(). Este enfoque le permite dar formato a los números utilizando parámetros locales personalizados, y en este artículo, nos centraremos en las monedas.

El constructor Intl.NumberFormat() acepta dos argumentos, el primero es una cadena de configuración regional, con la que definimos la configuración regional a la que queremos formatear:

1
2
3
4
5
6
7
const price = 1470000.15;

let dollarUSLocale = Intl.NumberFormat('en-US');
let dollarIndianLocale = Intl.NumberFormat('en-IN');

console.log("US Locale output: " + dollarUSLocale.format(price));
console.log("Indian Locale output: " + dollarIndianLocale.format(price));

Esto da como resultado:

1
2
1,470,000.15
14,70,000.15

Aquí, tenemos variantes localizadas del precio, formateadas como un número simple. Sin embargo, hay ciertas opciones que también podemos modificar para personalizar aún más este proceso de formateo.

El segundo argumento se puede usar para especificar las opciones que desea aplicar al formatear. Este es un objeto de JavaScript que puede contener, pero no se limita a:

  • estilo
  • moneda
  • usar agrupamiento
  • máximo de dígitos significativos

Echemos un vistazo a estas propiedades individualmente.

Estilo

El campo estilo especifica el tipo de formato que desea utilizar. Los posibles valores incluyen:

  • decimal - Formato de números decimales.
  • moneda - Formato de moneda.
  • unidad - Formato de unidades métricas o imperiales.

En nuestro escenario, solo formatearemos cadenas de moneda.

Divisa

Usando el campo moneda, puede especificar a qué moneda específica desea formatear, como 'USD', 'CAD' o 'INR'.

Vamos a formatear nuestro precio en diferentes monedas:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const price = 1470000.15;

// Format the price above to USD, INR, EUR using their locales.
let dollarUS = Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
});

let rupeeIndian = Intl.NumberFormat("en-IN", {
    style: "currency",
    currency: "INR",
});

let euroGerman = Intl.NumberFormat("de-DE", {
    style: "currency",
    currency: "EUR",
});

console.log("Dollars: " + dollarUS.format(price));
// Dollars: $147,000,000.15

console.log("Rupees: " + rupeeIndian.format(price));
// Rupees: ₹14,70,000.15

console.log("Euros: " + euroEU.format(price));
// Euros: 1.470.000,15 €

Opciones adicionales

El campo useGrouping es un campo booleano que le permite agrupar el número usando comas (o puntos, para algunas configuraciones regionales). De forma predeterminada, se establece en true, como pudimos ver en los resultados anteriores.

Vamos a apagarlo:

1
2
3
4
5
6
let dollarUS = Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    useGrouping: false,
}); 
// $1470000.15

El campo maximumSignificantDigits le permite establecer el número de dígitos significativos para el precio. Esto se puede usar para redondear su variable de precio en función de la cantidad de dígitos significativos que haya establecido.

Los dígitos significativos, en términos simplificados, son los dígitos de la representación de un número que tienen algún peso en términos de precisión.

Irónicamente, la exactitud de un número se define como el número de sus dígitos significativos.

Los dígitos significativos incluyen:

  1. Todos los dígitos distintos de cero
  2. Ceros que ocurren en cualquier lugar entre dos dígitos distintos de cero
  3. Ceros que están a la derecha de todos los dígitos distintos de cero, pero solo si denotan una mayor precisión

Los dígitos no significativos incluyen:

  1. Ceros a la izquierda de todos los dígitos distintos de cero
  2. Ceros que están a la derecha de todos los dígitos distintos de cero que no indican precisión

Por ejemplo, en el número 000003.1240000 solo hay 4 dígitos significativos si nuestra precisión es de 4 dígitos significativos (3.124). Sin embargo, también puede haber 5 dígitos significativos si nuestra precisión es de 5 dígitos significativos (3.1240).

A continuación se muestra un ejemplo:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
const price = 147741.15;

// Format the above price dollar currency
let dollarUS = Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    useGrouping: true,
    maximumSignificantDigits: 3,
}); // $148,000

let dollarUS2 = Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    useGrouping: true,
}); // $147,741.15

Conclusión

En este tutorial, hemos repasado cómo dar formato a un número como una cadena de moneda en JavaScript. Hemos usado el método Intl.NumberFormat() para hacer esto, con la configuración regional deseada y varias configuraciones que podemos usar para personalizar el proceso de formateo.