2

Estoy intentando convertir una cadena de caracteres en un número entero utilizando la función parseInt(). El problema es que en ciertas circunstancias, la función devuelve NaN en lugar del número esperado.

Aquí está mi código:

let str1 = "123";
let num1 = parseInt(str1); // devuelve 123, funciona correctamente

let str2 = "abc";
let num2 = parseInt(str2); // devuelve NaN, ¿por qué?

let str3 = "456xyz";
let num3 = parseInt(str3); // devuelve 456, ¿por qué no devuelve NaN?

console.log(num1, num2, num3);

Como se puede ver, la conversión funciona bien para cadenas que contienen solo dígitos numéricos, pero devuelve NaN cuando hay letras mezcladas con números.

¿Alguien puede explicar por qué esto sucede y cómo puedo solucionarlo?

0

3 respuestas 3

1

Leyendo la documentación:

Si parseInt encuentra un carácter que no es un numeral de la base especificada, lo ignora a él y a todos los caracteres correctos siguientes, devolviendo el valor entero obtenido hasta ese punto. parseInt trunca los números en valores enteros. Se permiten espacios anteriores y posteriores.

Si no se especifica la base o se especifica como 0, JavaScript asume lo siguiente:

  • Si el parámetro cadena comienza por "0x", la base es 16 (hexadecimal).
  • Si el parámetro cadena comienza por "0", la base es de 8 (octal). Esta característica está desaconsejada.
  • Si el parámetro cadena comienza por cualquier otro valor, la base es 10 (decimal).
  • Si el primer carácter no se puede convertir en número, parseInt devuelve NaN.

Es decir, si la cadena comienza con un número válido, parseInt() devolverá ese número, pero si no comienza con un número válido, te devolverá NaN.


Más ejemplos:

console.log(parseInt("10"))
console.log(parseInt("10.00"))
console.log(parseInt("10.33"))
console.log(parseInt("34 45 66"))
console.log(parseInt(" 60 "))
console.log(parseInt("40 years"))
console.log(parseInt("He was 40"))

1

Para mí, estos 2 casos:

parseInt("123"); // devuelve 123
parseInt("abc"); // devuelve NaN

Son claros y arrojan el resultado esperado, la confusión entra cuando se hace

parseInt("456xyz"); // devuelve 456

Como bien ya han explicado anteriormente esto se debe a que parseInt al encontrar una letra la ignora e ignora todo carácter que la suceda (incluidos otros números).

Para mí lo interesante de tu pregunta es el -¿Por qué?-, cual es el motivo detrás de ese comportamiento, que por lo menos para mi es contraintuitivo.

Lamentablemente, después de una pequeña investigación no he podido encontrar la razón, incluso le pregunté a ChatGPT el cual me respondió que es intencional y se debe para facilitar la separación de una cadena en su parte numérica y texto (cada uno es libre de creerle o no)

En lo personal, como desarrollador que trabaja con JS desde casi sus inicios, este nefasto lenguaje que fue creado "a la rápida" incluyó errores de diseño graves, algunos resueltos con el tiempo y otros no. Muchos de estos errores han querido justificarlos, como el caso que indica ChatGPT que sería para separar una cadena, pero si fuera así también debería funcionar con abc123 y no lo hace.

Y tal como ha sido la costumbre en este lenguaje, la solución ha pasado por incluir nuevas funciones o API y no modificar la que tiene comportamiento anómalo, esto para asegurar la retrocompatibilidad. En este caso, la API es Number

console.log("parseInt vs Number");
console.log( parseInt("123"), Number("123"));
console.log( parseInt("123abc"), Number("123abc"));
console.log( parseInt("abc123"), Number("abc123"));


Como nota adicional en la documentación de mdn dice:

The function converts its first argument to a string, parses that string, then returns an integer or .parseIntNaN

Es decir, que el primer argumento se transforma a string y desde ahí comienza a trabajar. Entonces esto es equivalente:

parseInt("10"); // devuelve 10
parseInt(10); // devuelve 10

Ya que si ingreso 10 como entero o como string, es irrelevante, porque siempre se convierte a string. El problema, y para mi otro error de diseño, es que si pongo algo con notación exponencial no guarda la congruencia, no así Number que funciona como se espera.

console.log( parseInt("2e2") ,Number("2e2"));
console.log( parseInt(2e2), Number(2e2));

0

En las respuestas a la pregunta: Explicación del funcionamiento de parseInt en JavaScript ya se explica con amplitud lo que es parseInt() y como funciona, aquí concretamente quedan explicados los 16 pasos que podrían ocurrir en una llamada a parseInt(), en los que encontrarás respuestas a todos tus porqués presentes y futuros con respecto a esa función.

En cuanto a evitar el NaN, que significa no es un número (Not a Number), hay una forma muy sencilla de hacerlo. Consiste en usar el operador lógico OR, esto hará que cuando no sea un número devuelva 0.

let str1 = "123";
let num1 = parseInt(str1) || 0; // devuelve 123, funciona correctamente

let str2 = "abc";
let num2 = parseInt(str2) || 0; // devuelve 0, ¿por qué?

let str3 = "456xyz";
let num3 = parseInt(str3) || 0; // devuelve 456, ¿por qué no devuelve NaN?

console.log(num1, num2, num3);

Esto sirve además para todos los valores falsos (falsey):

  • NaN (Not a Number)
  • false
  • null
  • undefined
  • 0
  • "" (cadena vacía)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.