3

Necesito dar formato de moneda CLP mediante JavaScript.

He estado intentando hacerlo así:

new Intl.NumberFormat('es-CL', {currency: 'CLP', style: 'currency'}).format(1000)

Pero este enfoque tiene un problema ya conocido por la internacionalización donde obvian el uso de separador de miles para números de 4 dígitos.

¿Existe alguna forma efectiva para la manipulación de currencies en Chile?

El esperado es:

$1
$10
$100
$1.000
$10.000
$100.000
$1.000.000

...

3 respuestas 3

3

La API Intl de Javascript para las configuraciones de localización utiliza la información establecida por el Unicode Common Locale Data Repository (CLDR)

Actualmente el CLDR ha establecido para el sistema numérico en español que los "dígitos mínimos para agrupar" es igual a 2.

The minimumGroupingDigits determines what the default for a locale is. In this case the value should be "2" to illustrate that the separator only appears once the number of thousands goes into the double-digits (i.e. 10 thousand or above) and not for single-digit thousands (i.e. anything below 10 thousand).


El minimumGroupingDigits determina cuál es el valor predeterminado para una configuración regional. En este caso, el valor debe ser "2" para ilustrar que el separador solo aparece una vez que el número de miles entra en dos dígitos (es decir, 10 mil o más) y no para miles de un solo dígito (es decir, cualquier cosa por debajo de 10 mil).

Demo:

let formatter = new Intl.NumberFormat('es-CL', {
  style: 'currency',
  currency: 'CLP'
})

console.log(formatter.format(1));
console.log(formatter.format(10));
console.log(formatter.format(100));
console.log(formatter.format(1000), ' <- ACA el problema');
console.log(formatter.format(10000));
console.log(formatter.format(100000));
console.log(formatter.format(1000000));


Con respecto a:

[...] obvian el uso de separador de miles para números de 4 dígitos. ¿Existe alguna forma efectiva para la manipulación de currencies en Chile?

Podrías "parchar" (sobrescribir) el método format.

Ejemplo:

// @START HACKING
(function() {

  // Obtenemos la definicion de la funcion original
  let prop = Object.getOwnPropertyDescriptor(Intl.NumberFormat.prototype, 'format');

  // Sobrescribimos el método "format"
  Object.defineProperty(Intl.NumberFormat.prototype, 'format', {
    get: function() {
      return function(value) {
        let fn = prop.get.call(this), // Recuperamos la funcion "formateadora" original 
          opts = this.resolvedOptions(); // Obtenemos las opciones de "formateo"
        
        // Solo cambiamos el formateo cuando es moneda en español y el numero es >= 1.000 o menor a 10.000
        if (opts.style == 'currency' && opts.locale.substr(0, 2) == 'es' && opts.numberingSystem == 'latn' && value >= 1000 && value < 10000) {
          let num = fn(10000), // -> [pre]10[sep]000[sub]
            pre = num.substr(0, num.indexOf('10')),
            sep = num.substr(num.indexOf('10') + 2, 1),
            sub = num.substr(num.indexOf('000') + 3);
          num = value.toString();
          return pre + num.slice(0, 1) + sep + num.slice(1) + sub;
        }
        // Sino devolvemos el número formateado normalmente
        return fn(value);
      };
    },
  });
})();

// @USE

let formatter = new Intl.NumberFormat('es-CL', {
  style: 'currency',
  currency: 'CLP'
})

console.log(formatter.format(1));
console.log(formatter.format(10));
console.log(formatter.format(100));
console.log(formatter.format(1000), ' <- ACA ahora funciona');
console.log(formatter.format(10000));

formatter = new Intl.NumberFormat('es-CL', {
  style: 'currency',
  currency: 'ARS'
})

console.log(formatter.format(1));
console.log(formatter.format(10));
console.log(formatter.format(100));
console.log(formatter.format(1000), ' <- ACA tambien funciona');
console.log(formatter.format(10000));

3
  • Lleve el código a un codesandbox y falla :/ codesandbox.io/s/gracious-wozniak-c0sk7?file=/src/index.js
    – vicasas
    Commented el 20 ene. 2021 a las 18:34
  • No sabría que decirte, acabo de entrar y veo que funciona. PD: no se como funciona Codesandbox.
    – Marcos
    Commented el 20 ene. 2021 a las 18:41
  • Toda la razón, entre nuevamente y esta funcionando... al parecer es algo de codesandbox que bloquea hacer override "en vivo" del prototype.
    – vicasas
    Commented el 20 ene. 2021 a las 18:57
1

Te faltó la opción useGrouping: true o useGrouping: 'always'

Esto debería funcionar y dar como resultado: $1.000

console.log(
new Intl.NumberFormat('es-CL', {
    currency: 'CLP',
    style: 'currency',
    useGrouping: true
}).format(1000)
);

1
  • Hola Jorge, bienvenido a StackOverflow. Te invito a hacer el recorrido de bienvenida. Para respuestas JavaScript/HTML/CSS tenemos el snippet, que permite probar el código directamente en un sandbox en el navegador, en la propia respuesta. Puse tu código dentro de un snippet y con salida a la consola, que creo que queda mejor.
    – jachguate
    Commented el 14 jun. a las 1:39
0

A la respuesta publicada arriba, va bien, pero si quieres tener decimales, yo le he cambiado la linea:

return pre + num.slice(0, 1) + sep + num.slice(1) + sub;

Por:

return pre + num.slice(0, 1) + sep + num.slice(1).replace(".", ",") + sub;
1
  • Dado que acá no hay arriba y abajo, las respuestas se pueden ordenar de varias formas, es mejor que dejes un link a la respuesta a la que haces referencia.
    – jachguate
    Commented el 14 jun. a las 1:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.