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.