¿Cómo convertir un número largo en una string abreviada en JavaScript?

Dado un número largo y la tarea es convertirlo a la string abreviada (por ejemplo, 1234 a 1.2k). Aquí se discuten 2 enfoques con la ayuda de javaScript.
Enfoque 1: 
 

  • Obtenga los caracteres en una array (ar = [“”, “k”, “m”, “b”])
  • Divida la longitud del número por 3 y obtenga el valor en var(sNum).
  • Si sNum != 0, calcule el valor preciso del número dividiéndolo por 1000^sNum.
  • Agregue el carácter en index = sNum en la array, al valor preciso para finalmente obtener el número abreviado.

Ejemplo 1: Este ejemplo implementa el enfoque anterior. 
 

html

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        Convert long number into abbreviated string.
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
</head>
  
<body style="text-align:center;">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP">
    </p>
  
    <button onclick="GFG_Fun();">
        click here
    </button>
    <p id="GFG_DOWN" style="color: green;">
    </p>
  
    <script>
        var up = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        var n = 123287342;
        up.innerHTML =
"Click on the button to get the abbreviated number.<br>Number = "
        + n;
  
        function convert(val) {
  
            // thousands, millions, billions etc..
            var s = ["", "k", "m", "b", "t"];
  
            // dividing the value by 3.
            var sNum = Math.floor(("" + val).length / 3);
  
            // calculating the precised value.
            var sVal = parseFloat((
              sNum != 0 ? (val / Math.pow(1000, sNum)) : val).toPrecision(2));
            
            if (sVal % 1 != 0) {
                sVal = sVal.toFixed(1);
            }
  
            // appending the letter to precised val.
            return sVal + s[sNum];
        }
  
        function GFG_Fun() {
            $('#GFG_DOWN').html('Number = ' + convert(n));
        }
    </script>
</body>
  
</html>

Producción: 
 

  • Antes de hacer clic en el botón: 
     

  • Después de hacer clic en el botón: 
     

Enfoque 2: 
 

  • Compruebe si el número es menor que 1e3, si lo es, devuelva el número tal como está.
  • Si el número es mayor o igual a 1e3 y menor a 1e6, elimine los últimos tres dígitos y agregue el carácter ‘K’.
  • Si el número es mayor o igual a 1e6 y menor a 1e9, elimine los últimos seis dígitos y agregue el carácter ‘M’.
  • Si el número es mayor o igual a 1e9 y menor a 1e12, elimine los últimos nueve dígitos y agregue el carácter ‘B’.
  • Si el número es mayor o igual a 1e12, elimine los últimos 12 dígitos y agregue el carácter ‘T’.

Ejemplo 2: Este ejemplo implementa el enfoque anterior. 
 

html

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        Convert long number into abbreviated string.
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
</head>
  
<body style="text-align:center;">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP">
    </p>
  
    <button onclick="GFG_Fun();">
        click here
    </button>
    <p id="GFG_DOWN" style="color: green;">
    </p>
  
    <script>
        var up = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        var n = 1232873425;
        up.innerHTML = 
          "Click on the button to get the abbreviated number.<br>Number = "
        + n;
        const convert = n => {
            if (n < 1e3) return n;
            if (n >= 1e3 && n < 1e6) return +(n / 1e3).toFixed(1) + "K";
            if (n >= 1e6 && n < 1e9) return +(n / 1e6).toFixed(1) + "M";
            if (n >= 1e9 && n < 1e12) return +(n / 1e9).toFixed(1) + "B";
            if (n >= 1e12) return +(n / 1e12).toFixed(1) + "T";
        };
  
        function GFG_Fun() {
            $('#GFG_DOWN').html('Number = ' + convert(n));
        }
    </script>
</body>
  
</html>

Producción: 
 

  • Antes de hacer clic en el botón: 
     

  • Después de hacer clic en el botón: 
     

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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