4

He visto demasiados ejemplos, pero ninguno me ha convencido a lo que realmente quiero y la mejor práctica para realizar esto.

Tengo mi código de la siguiente manera:

const nf = new Intl.NumberFormat("es-MX");
let anualidad = 1200;
this.model.enero = nf.format(anualidad);

output: 1200

Mi problema es que no coloca la coma en 1,200; no digo que no funcione, porque si coloco otro cero me agrega la coma de esta manera 12,000.

Ya configure el idioma a MX.

¿Como puedo realizar esto de la mejor manera? ya que son demasiados cálculos los que deben hacerse de esta manera.

1
  • te recomiendo usar numeralJS, lo puedes encontrar aca en numeraljs.com facilita todo con el formato de numeros Commented el 29 nov. 2019 a las 21:58

6 respuestas 6

17

Hice una investigación bastante exhaustiva del tema, y basaré mi respuesta sobre el resultado obtenido en la misma.

En primer lugar, aunque ya se ha discutido la posibilidad de usar otro sistema de locale (por ejemplo en-US), eso no responde totalmente la pregunta.

Claramente deseas realizar la conversión de un tipo Number a un tipo String, pero que el mismo represente una cifra con formato local para es-MX (español de México).

Si hacemos uso del método toLocaleString(), o del método NumberFormat del objeto Intl, obtenemos como resultado lo siguiente:

const number = 1200;
const number2 = 12000;
console.log(number.toLocaleString('es-MX')); // 1200
console.log(new Intl.NumberFormat('es-MX').format(number)); // 1200
console.log(number2.toLocaleString('es-MX')); // 12,000
console.log(new Intl.NumberFormat('es-MX').format(number2)); // 12,000

Claramente no coloca la coma decimal si la cantidad de dígitos para el grupo de miles es menor que 2.

SOLUCIÓN

Una forma de resolver este problema (digo problema, aunque no es un bug del lenguaje, sino una decisión de estandarización) es realizar manualmente la conversión del número, ya que el estándar no nos está aportando el resultado deseado.

En tu pregunta indicas que has visto muchas formas, pero ninguna te convence. La verdad es que para gustos, los colores.

Esta es mi propuesta, pero entiendo que puede hacerse de muchas otras formas.

Creamos nuestra propia función de formato, apoyados en la máquina de Expresiones Regulares del motor de JavaScript.

Usaremos la siguiente expresión regular para dar formato a nuestro número en el lenguaje local deseado:

const miRegEx = /(?=(\d{3})+(?!\d))/g;

En esta expresión regular se hace un positive lookahead (?=), buscando uno o varios (+) grupos de 3 dígitos ((\d{3})+), si los hay devuelve match junto con los valores agrupados en 3. Luego, se realiza un negative lookahead ((?!)) para descartar cualquier dígito que no sea agrupado por el primer grupo de captura (en este caso 1 o 2 dígitos). Puedes leer más sobre lookahead en Regex Lookahead.

Usaremos el método replace del objeto String, el cual acepta una expresión regular (la cual ya tenemos) y un parámetro de tipo String con el siguiente formato:

$n ó $nn Donde n o nn son dígitos decimales positivos menores a 100, inserta la subcadena emparejada de orden n del paréntesis, proporcionado por el primer argumento del objeto RegExp.

Así, nuestro parámetro será el siguiente:

$1,

Donde $1 representa el primer argumento: nuestra expresión regular, y , es el símbolo de separación de miles que usaremos para este caso.

Por último, debemos tomar la decisión de si utilizamos siempre este método para sustituir el método toLocaleString() o podemos combinar ambos.

Supongamos que vamos a usar siempre este método para cualquier valor numérico válido:

const numero = 123.456789;
const numero2 = 1234.56789;
const numero3 = 123456.789;
const numero4 = 1234567.89;

const formatoMexico = (number) => {
  const exp = /(\d)(?=(\d{3})+(?!\d))/g;
  const rep = '$1,';
  return number.toString().replace(exp,rep);
}

console.log(formatoMexico(numero));  // 123.456,789  <= NO VALIDO
console.log(formatoMexico(numero2)); // 1,234.56,789 <= NO VALIDO
console.log(formatoMexico(numero3)); // 123,456.789
console.log(formatoMexico(numero4)); // 1,234,567.89

Claramente tenemos un grave problema, ya que hay resultados no válidos.

El problema está en que el reemplazo se realiza sin tomar en cuenta que las posiciones decimales no deberían ser parte del reemplazo.

Para solucionar este problema tenemos algunas opciones, y como dije anteriormente: para gustos, los colores.

Como un número en Javascript sólo puede contener un carácter . o ninguno, usaremos esto para aplicar nuestra función sólo sobre la parte entera del número.

Vamos a separar la parte entera de la parte decimal, aplicamos el formato a la parte entera y luego concatenaremos nuevamente todo en un String.

const numero = 123;
const numero2 = 1234;
const numero3 = 123.456789;
const numero4 = 1234.56789;
const numero5 = 123456.789;
const numero6 = 1234567.89;

const formatoMexico = (number) => {
  const exp = /(\d)(?=(\d{3})+(?!\d))/g;
  const rep = '$1,';
  let arr = number.toString().split('.');
  arr[0] = arr[0].replace(exp,rep);
  return arr[1] ? arr.join('.'): arr[0];
}

console.log(formatoMexico(numero));  // 123
console.log(formatoMexico(numero2)); // 1,234
console.log(formatoMexico(numero3)); // 123.456789
console.log(formatoMexico(numero4)); // 1,234.56789
console.log(formatoMexico(numero5)); // 123,456.789
console.log(formatoMexico(numero6)); // 1,234,567.89

Con esto tenemos una función que nos ayuda a convertir números a su representación de cadena en formato local de México (punto decimal y comas para separación de miles).

Aplicando esto a tu código, podrías tener:

const formatoMexico = (number) => {
  const exp = /(\d)(?=(\d{3})+(?!\d))/g;
  const rep = '$1,';
  let arr = number.toString().split('.');
  arr[0] = arr[0].replace(exp,rep);
  return arr[1] ? arr.join('.'): arr[0];
}

let anualidad = 1200;
this.model.enero = formatoMexico(anualidad);

// output: 1,200

Modificando un poco este método podemos hacerlo para cualquier sistema de representación numérica que deseemos.

¿Porqué toLocaleString() o FormatNumber() no colocan el símbolo de miles para cifras entre 1000 y 9999?

Es una decisión tomada (no sé el motivo) por la organización de estandarización de Unicode. En particular por el proyecto CLDR (siglas de Common Locale Data Rrepository).

En el estándar se establece entre otras cosas, el patron de formato numérico. Y dentro de ese patrón, existe una propiedad o atributo llamado minimumGroupingDigits, la cual establece la cantidad de dígitos mínimos de un grupo para usar el separador de miles.

El hecho es que este valor es igual a 2 (como puede verse en CLDR Survey Tool) en todos los formatos numéricos pertenecientes a la especificación es (que incluye a México).

Debido a esto, los métodos antes mencionados, siempre devolverán enteros de 4 cifras sin separador de miles.

Espero que esto aclare tu duda y te ayude a resolver el problema.

1

Con argentina tampoco funciona es-AR

Usando el formato alemán, da el resultado requerido:

Intl.NumberFormat("de-DE").format()
0

Según la documentación de las etiquetas IETF el código para América Latina y Caribe es es-419 y tiene bastante sentido puesto que en Argentina, Colombia o México la expresión es la misma.

Language-Region:

de-DE (German for Germany)

en-US (English as used in the United States)

es-419 (Spanish appropriate for the Latin America and Caribbean region using the UN region code)

Puedes consultarlo aquí

Estuve haciendo unas pruebas pero desafortunadamente esa etiqueta no está funcionando. Lo que si es que, si no le pasas nada al constructor este toma el formato que estas buscando.

const anualidad = 1200;

const nf  = new Intl.NumberFormat().format( anualidad );
const nf2 = new Intl.NumberFormat('es-419').format( anualidad );
const nf3 = new Intl.NumberFormat('es-MX').format( anualidad );


console.log( nf, nf2, nf3 );

Espero te puedas guiar

EDIT

Haciendo unas pruebas utilicé un rastreador del Objeto Intl.NumberFormat() y encontré que el Intl.NumberFormat().resolvedOptions() Tiene un objeto de este tipo

{
locale: "en-US"
maximumFractionDigits: 3
minimumFractionDigits: 0
minimumIntegerDigits: 1
notation: "standard"
numberingSystem: "latn"
signDisplay: "auto"
style: "decimal"
useGrouping: true
}

Esto puede cambiar dependiendo el navegador que se esté utilizando. Le he pasado al constructor el tag en-MX por que en algunas ocasiones funciona (Lo he visto en otros proyectos) o Voilá! funcionó.

3
  • Revisa tu respuesta, hacer lo siguiente: console.log(new Intl.NumberFormat('es-MX').format(12000)); producirá: 12,000 mientras que hacer esto otro: console.log(new Intl.NumberFormat('es-VE').format(12000)); producirá: 12.000. Por lo tanto, si que existe es-MX. Recuerda que no todos los países de América Latina y el Caribe usan el Sistema Internacional, como México, por ejemplo. Saludos Commented el 29 nov. 2019 a las 22:18
  • Que raro, por que en el snippet que hice no funciona, pero hice la sentencia completa en una consola de Chrome y funcionó. Commented el 29 nov. 2019 a las 22:21
  • El tema de la pregunta, es que funciona para números de 5 dígitos o más, pero no para números de 4 dígitos. Esto va con cualquiera de las etiquetas console.log(new Intl.NumberFormat('es-419').format(10000)); //10,000, pero esto no console.log(new Intl.NumberFormat('es-419').format(9999)); // 9999 (no le agrega la coma) Commented el 29 nov. 2019 a las 22:28
0

var number = 123456.789;

alert(new Intl.NumberFormat("es-MX", {style: "currency", currency: "MXN"}).format(number));

Te recomiendo lo siguiente:

var number = 123456.789;
alert(new Intl.NumberFormat("es-MX", {style: "currency", currency: "MXN"}).format(number));
0

Adaptacion del codigo de Mauricio Contreras para España (es-ES) (por ejemplo 1.234,56):

const formatoMexico = (number) => {
    const exp = /(\d)(?=(\d{3})+(?!\d))/g;
    const rep = '$1.';
    let arr = number.toString().split('.');
    arr[0] = arr[0].replace(exp,rep);
    return arr[1] ? arr.join(','): arr[0];
}
1
  • Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 5 jun. 2023 a las 18:46
-1

Creo que es mucho mas sencilla, debe tener mejor performance esta aproximación y me dio mejores resultados, sobre todo cuando se le pasa dinámicamente el valor desde un input, toma como parámetro un Numero o String y devuelve un string agregando las comas necesarias.

function commaToK (price) {
  if (!isNaN(price)) {
    return new Intl.NumberFormat("en-US", {
      maximumSignificantDigits: 4,
    }).format(price);
  } else {
    let newpriceString = price.replace(/,/g, "");
    let newPrice = parseFloat(newpriceString);
       return new Intl.NumberFormat("en-US", {
      maximumSignificantDigits: 4,
    }).format(newPrice);
  }
};

console.log(commaToK(12000))   // Devuelve "12,000"
console.log(commaToK("1200000"))  // Devuelve "1,200,00"

1
  • 1
    Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 22 ene. a las 15:37

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.