Saltar al contenido

En React, ¿cómo formatear un número con comas?

Solución:

Imprima un número con comas como separadores de miles en JavaScript

Puede encontrar una solución JS general para esto:


toLocaleString:

// A more complex example: 
number.toLocaleString(); // "1,234,567,890"

// A more complex example: 
var number2 = 1234.56789; // floating point example
number2.toLocaleString(undefined, {maximumFractionDigits:2}) // "1,234.57"

Formato numérico (Safari no es compatible):

var nf = new Intl.NumberFormat();
nf.format(number); // "1,234,567,890"

fuente: https://stackoverflow.com/a/32154217/6200607


var number = 1234567890; // Número de ejemplo a convertir

⚠ Tenga en cuenta que javascript tiene un valor entero máximo de 9007199254740991


Otra solucion:

Put Comma Values in Numbers

2345643.00 devolverá 2,345,643.00

Tengo una clase que convierte un número en 31,312 o 31,312.00.

El código es bastante;

return value.toLocaleString(navigator.language, { minimumFractionDigits: 2 });

y

return value.toLocaleString(navigator.language, { minimumFractionDigits: 0 });

Entonces puedes usar toLocaleString para convertir.

Actualizar

Basado en su ejemplo, sería (asumiendo que los puntos son un número);

const RankingsList = ({rankings, currentUserId}) => {
  return (
      <div className="listGroup">
        {rankings.map((ranking, index) =>
            <span className="number">{ranking.points.toLocaleString(navigator.language, { minimumFractionDigits: 0 })}</span>
        )}
      </div>
  );
};

Sin embargo, es posible que desee mover esto a un componente más pequeño llamado NumberDisplay y una propiedad para mostrar / ocultar puntos decimales ‘

  export const formatNumber = inputNumber => {
    let formetedNumber=(Number(inputNumber)).toFixed(2).replace(/d(?=(d{3})+.)/g, '$&,');
    let splitArray=formetedNumber.split('.');
    if(splitArray.length>1){
      formetedNumber=splitArray[0];
    }
    return(formetedNumber);
  };

Tenga en cuenta que estoy ignorando los puntos decimales

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)


Tags : /

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *