Dar formato a un número en JavaScript

Hay varias formas en que las personas de diferentes países y regiones siguen diferentes formas de formatear un número. Y podría haber casos en los que queramos formatear un número en nuestros sitios web en función de la parte del mundo en la que el visitante accede a nuestro sitio web.

Podría resultar un desafío si intenta hacer esto manualmente en función de la ubicación del usuario. Pero no te preocupes, no tienes que hacerlo manualmente ya que hay una mejor forma de formatear un número en JavaScript, y es con la ayuda del método toLocalString(). Este método devuelve una cadena con la representación del número específica del idioma.

Dar formato a números con el método toLocaleString() en JavaScript

Se necesitan dos parámetros, el primero es locales y el segundo son options. Ambos parámetros son opcionales, lo que significa que no es obligatorio. También puede ejecutar el método directamente sin pasar esos parámetros. Si desea formatear los números, en este caso, lo hacemos, entonces debemos pasar esos parámetros.

Primero entendamos qué significa cada uno de estos parámetros, y luego, veremos cómo usarlos en nuestro código.

1. El parámetro locales

El locales es el primer parámetro que acepta el método toLocalString(). Representa una cadena de etiquetas de idioma BCP 47 o un array de dichas cadenas. La etiqueta de idioma BCP 47 es un código para identificar los lenguajes humanos.

Por ejemplo, la etiqueta ar-SA dice que es para el idioma árabe representado por ar, hablado en la región de Arabia Saudita SA. Entonces, si pasa esta cadena como primer argumento, formateará el número para que esté escrito en el idioma árabe.

let eArabic = (number => {
  return number.toLocaleString('ar-SA');
});

console.log(eArabic(12345));

Producción :

١٢٬٣٤٥

Aquí, hemos creado una función de flecha llamada eArabic, que toma un número como parámetro. Ahora, estamos pasando el número 12345 a esta función de flecha. Esta función tiene como objetivo convertir el número 12345 a su formato equivalente árabe ar-SA con la ayuda del método toLocalString().

Puede copiar y pegar directamente todo el código anterior y ejecutarlo en la ventana de la consola de su navegador para ver el resultado.

Para obtener más información sobre todas las etiquetas de idiomas de BCP 47, puede consultar este recurso.

También puede pasar undefined como locales. Tomará el idioma predeterminado que se establece en el navegador del visitante. Entonces, si alguien ha cambiado el idioma de su navegador a alemán, esto mostrará el número en formato alemán.

2. El parámetro options

Las options son un objeto, y es el segundo parámetro que acepta el método toLocalString(). Como es un objeto, este parámetro puede tomar varias propiedades como currency, currencySign, style, unitDisplay, y muchas más.

Tomemos el mismo ejemplo que hemos tomado anteriormente e intentemos modificarlo para comprender el parámetro options. Anteriormente, simplemente tomamos el número 12345 y luego lo formateamos al idioma árabe. Ahora démosle también al número un formato de moneda dándole un estilo de moneda con el símbolo de moneda y agregue algunos dígitos de fracción al final de ese número con la ayuda de options.

let eArabic = (number => {
  return number.toLocaleString(
      'ar-SA', {style: 'currency', currency: 'SAR', minimumFractionDigits: 3});
});

console.log(eArabic(12345));

Producción :

١٢٬٣٤٥٫٠٠٠ ر.س

En este caso, al método toLocaleString(), ahora también hemos agregado el parámetro options, que es un objeto. Actualmente, toma 3 propiedades, la propiedad style formateará el número en formato de moneda, la propiedad moneda dirá qué moneda representa, en este caso, Riyal saudí SAR y la propiedad minimumFractionDigits representa cuántos dígitos fraccionarios que desea mostrar al final del número.

Aquí, si está configurando la propiedad style con el valor de moneda, también debe configurar la propiedad moneda con algún valor. De lo contrario, obtendrá un error de tipo: Currency code is required with currency style..

En la salida del programa anterior, primero tenemos el nombre de la moneda Riyal Saudita ر.س.. Si fuera USD, entonces sería el símbolo $. Luego tenemos el número en sí mismo en idioma árabe ١٢٬٣٤٥. Si estuviera en USD, entonces sería 12,345. Por último, tenemos los 3 dígitos fraccionarios después del punto que se representa en el idioma árabe como ٫٠٠٠ y USD como .000.

// USD format
$12, 345.000

Aquí, también le proporcionamos la salida para el formato de moneda de los Estados Unidos para relacionarlo fácilmente con la salida del formato de moneda de Arabia Saudita, ya que puede ser difícil para las personas entender el idioma árabe.

Puede usar cualquiera de estos parámetros y propiedades de objeto en su código dependiendo de cómo desee formatear su número. También puede visitar los diversos enlaces proporcionados en este artículo para obtener más información sobre toLocalString() para formatear un número en JavaScript.