¿Cuál es la diferencia entre parseInt() y Number()?

  • La función parseInt():
    La función parseInt() se utiliza para analizar una string y convertirla en un número entero de una base específica. Se necesitan dos parámetros, la string que se analizará y la raíz que se usará. La raíz es un número entero entre 2 y 36 que representa la base del número.

    Si parseInt() encuentra un carácter durante el análisis que no se ajusta a la base especificada, ignorará el carácter y todos los caracteres posteriores. Luego devuelve el valor analizado hasta ese punto como un número entero. En este caso, se permiten espacios al principio o al final.

    Si la función obtiene el primer carácter y no puede convertirlo en un número, devolverá NaN a menos que la base sea mayor que 10. Este valor de NaN no es un número válido para ninguna base y no se puede usar en ningún cálculo matemático.

    Sintaxis:

    parseInt(string, radix)
  • La función Number()
    La función Number() se utiliza para crear un objeto Número de tipo primitivo. Toma un parámetro que es el valor del número. Este valor podría pasarse con una string y la función Número intentará representarlo como un número. Si el argumento no se pudo convertir en un número, devuelve un valor NaN. Este valor de NaN no es un número válido y no se puede utilizar en ningún cálculo matemático.

    Sintaxis:

    Number(valueString)

Las diferencias entre estos se pueden explicar usando los siguientes ejemplos:

Ejemplo 1:
este ejemplo muestra que parseInt() intenta convertir el valor al último carácter que podría convertirse en un número entero. Los espacios en blanco y los caracteres finales se ignoran porque no son válidos. La función Number() , por otro lado, solo devuelve NaN .

<!DOCTYPE html>
<html>
  
<head>
    <title>
      What is the difference between 
      parseInt() and Number()
  </title>
</head>
  
<body>
    <h1 style="color: green">
      GeeksforGeeks
  </h1>
    <b>
      What is the difference between
      parseInt() and Number()
  </b>
    <p>String is: 10 objects</p>
    <p>Output of parseInt is: <span class="parseOutput">
      </span>
  </p>
    <p>Output of Number is: <span class="numberOutput">
      </span>
  </p>
    <button onclick="parseNumber()">
      Parse string
  </button>
    <script type="text/javascript">
        function parseNumber() {
            let string = '10.6 objects';
            let number1 = parseInt(string);
            let number2 = Number(string);
  
            document.querySelector(
              '.parseOutput').textContent = number1;
            document.querySelector(
              '.numberOutput').textContent = number2;
        }
    </script>
</body>
  
</html>

Producción:

  • Antes de hacer clic en el botón:
    ex1-string-before
  • Después de hacer clic en el botón:
    ex1-string-after

Ejemplo 2:
este ejemplo muestra la diferencia de que parseInt() solo devuelve un valor entero, mientras que Number() devuelve todos los dígitos, incluidos los puntos flotantes.

<!DOCTYPE html>
<html>
  
<head>
    <title>
      What is the difference between 
      parseInt() and Number()
  </title>
</head>
  
<body>
    <h1 style="color: green">
      GeeksforGeeks
  </h1>
    <b>What is the difference between
      parseInt() and Number()
  </b>
    <p>String is: 3.1415</p>
    <p>Output of parseInt is: <span class="parseOutput">
      </span>
  </p>
    <p>Output of Number is: <span class="numberOutput">
      </span>
  </p>
    <button onclick="parseNumber()">Parse string</button>
    <script type="text/javascript">
        function parseNumber() {
            let string = '3.1415';
            let number1 = parseInt(string);
            let number2 = Number(string);
  
            document.querySelector(
              '.parseOutput').textContent = number1;
            document.querySelector(
              '.numberOutput').textContent = number2;
        }
    </script>
</body>
  
</html>

Producción:

  • Antes de hacer clic en el botón:
    ex2-pi-before
  • Después de hacer clic en el botón:
    ex2-pi-after

Ejemplo 3:
Este ejemplo muestra el funcionamiento del parámetro radix en parseInt() . La string pasada se analiza con la base de 2. Esto devuelve el valor como 12. Por otro lado, Number() devuelve el valor de la string tal cual.

<!DOCTYPE html>
<html>
  
<head>
    <title>
      What is the difference between 
      parseInt() and Number()
  </title>
</head>
  
<body>
    <h1 style="color: green">
      GeeksforGeeks
  </h1>
    <b>What is the difference between
      parseInt() and Number()
  </b>
    <p>String is: 1100</p>
    <p>Output of parseInt is: <span class="parseOutput">
      
      </span></p>
    <p>Output of Number is: <span class="numberOutput">
      </span></p>
    <button onclick="parseNumber()">
      Parse string
  </button>
    
    <script type="text/javascript">
        function parseNumber() {
            let string = '1100';
            let number1 = parseInt(string, 2);
            let number2 = Number(string);
  
            document.querySelector(
              '.parseOutput').textContent = number1;
            document.querySelector(
              '.numberOutput').textContent = number2;
        }
    </script>
</body>
  
</html>

Producción:

  • Antes de hacer clic en el botón:
    ex3-binary-before
  • Después de hacer clic en el botón:
    ex3-binary-after

Publicación traducida automáticamente

Artículo escrito por sayantanm19 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 *