Dar formato a un número como una cadena de moneda en JavaScript

Harshit Jindal 12 octubre 2023
  1. Utilice el método Intl.NumberFormat() para formatear un número como cadena de moneda en JavaScript
  2. Utilice el método toLocaleString() para formatear un número como una cadena de moneda en JavaScript
  3. Utilice la biblioteca Numeral.js para dar formato a un número como una cadena de moneda en JavaScript
Dar formato a un número como una cadena de moneda en JavaScript

Un número se representa de muchas formas, fecha / hora, moneda, número y mucho más. Cuando se representa como un valor monetario, su impacto aumenta y se vuelve mucho más legible. Por ejemplo, un valor monetario escrito como 10000 tiene un impacto mucho menor que un número representado como $ 10,000.00. Nos dice mucho más sobre el número, los diferentes símbolos de moneda y las diferentes separaciones por comas. Este tutorial enseña cómo formatear un número como una cadena de moneda en JavaScript.

Utilice el método Intl.NumberFormat() para formatear un número como cadena de moneda en JavaScript

Este método se utiliza para representar números en formato sensible al idioma y representar moneda de acuerdo con los parámetros proporcionados. Toma dos parámetros como entrada: locales y options.

  1. locales: especifica el idioma y la configuración de la región. Es una pequeña cadena formada por una combinación de idioma y región separados por un guión. Por ejemplo, la configuración regional en-IN toma el formato de la India y el idioma inglés. La primera coma de la derecha separa miles y continúa en términos de cientos.
  2. options: es un objeto que consta de toneladas de propiedades, o podemos decir opciones. al formatear un número como una cadena de moneda, se requieren 3 opciones principales.
  3. style: es simplemente el estilo de nuestro formato numérico. Puede tener 3 valores diferentes decimal, currency, percent según el caso de uso. En nuestro caso, configuraremos el estilo como currency.
  4. currency: especifica el tipo de moneda del símbolo que se incluirá antes de la cadena de números de formato, por ejemplo, dólar estadounidense y euro.
  5. minimumFractionDigits: Especifica los dígitos mínimos que se muestran después del decimal en la cadena formateada.
const money = 10000;
const currency = function(number) {
  return new Intl
      .NumberFormat(
          'en-IN',
          {style: 'currency', currency: 'INR', minimumFractionDigits: 2})
      .format(number);
};
console.log(currency(money));

El código anterior ayuda a convertir un número dado en una cadena de moneda india.

Utilice el método toLocaleString() para formatear un número como una cadena de moneda en JavaScript

Este método es esencialmente el mismo que Intl.NumberFormat() pero no se suele utilizar debido a su baja velocidad con varios elementos. Para elementos individuales, la velocidad de ambos métodos es similar. Tiene los mismos parámetros que Intl.NumberFormat(). Solo difiere en velocidad debido a la diferente implementación interna de ambos métodos.

const number = 2000;
number.toLocaleString(
    'en-IN', {style: 'currency', currency: 'INR', minimumFractionDigits: 2})
console.log(number);

El código anterior ayuda a convertir un número dado en una cadena de moneda india.

Utilice la biblioteca Numeral.js para dar formato a un número como una cadena de moneda en JavaScript

Numeral.js es una de las bibliotecas más utilizadas para formatear números. Para formatear números como cadena de moneda usando esta biblioteca, primero creamos una instancia de un numeral. Es el tipo de datos estándar utilizado por esta biblioteca que convierte números o cadenas en un número antes de realizar el formateo. Después de esto, podemos especificar el formato de moneda usando la función format().

<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>

El código anterior se utiliza para incluir la biblioteca Numeral.js en el navegador.

var number = 1000;
var myNumeral = numeral(number);
var currencyString = myNumeral.format('$0,0.00');

Creamos un número y luego llamamos a la función de formato para formatear el número como USD con 2 puntos decimales. El código anterior proporciona una forma mucho más clara de especificar el formato de moneda.

Harshit Jindal avatar Harshit Jindal avatar

Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.

LinkedIn

Artículo relacionado - JavaScript Format

Artículo relacionado - JavaScript Number