parseInt o Number: convertir una cadena en número en JavaScript

Un valor leído en un campo de formulario, un atributo HTML, una URL o un archivo JSON mal tipado llega siempre en forma de cadena de texto. Antes de calcular hay que convertirlo en número. JavaScript ofrece cuatro maneras de hacerlo, y no reaccionan igual ante «42px», «3,99» o una cadena vacía. Esto es lo que devuelve realmente cada una, comprobado en Node.js 22.

Los cuatro métodos en una tabla

Se dibujan dos familias. parseInt y parseFloat extraen: leen la cadena desde el principio, se detienen en el primer carácter que no es una cifra y devuelven lo que han leído. Number() y el operador + convierten todo o nada: la cadena entera tiene que representar un número; si no, es NaN. Una excepción que escuece: para ellos, la cadena vacía vale 0.

parseInt(): el entero al principio de la cadena

parseInt('42', 10);      // 42
parseInt('42px', 10);    // 42  : se detiene en la «p»
parseInt('3.99', 10);    // 3   : la parte decimal se ignora, no se redondea
parseInt('  42  ', 10);  // 42  : se toleran los espacios alrededor
parseInt('abc', 10);     // NaN : ninguna cifra al principio
parseInt('', 10);        // NaN

El segundo argumento es la base (o radix). Vale 10 para un número decimal, 16 para el hexadecimal y 2 para el binario:

parseInt('ff', 16);   // 255
parseInt('101', 2);   // 5
parseInt('0x1f');     // 31 : sin base, el prefijo 0x cambia a hexadecimal
parseInt('08');       // 8  : los motores modernos ya no leen «08» en octal

Escribir la base de forma explícita, parseInt(s, 10), ya no es imprescindible por los ceros iniciales desde ES5, pero sigue siendo la buena costumbre: hace legible la intención y neutraliza el caso 0x.

parseFloat(): el número decimal al principio de la cadena

parseFloat('3.99');     // 3.99
parseFloat('12.5px');   // 12.5
parseFloat('.5');       // 0.5
parseFloat('1e3');      // 1000 : entiende la notación científica
parseFloat('3,99');     // 3    : la coma detiene la lectura
parseFloat('abc');      // NaN

parseFloat no tiene argumento de base: siempre lee en decimal. Es la función que hay que elegir para extraer una medida de una cadena CSS («12.5px», «1.5rem») o de un texto libre.

Number(): la conversión estricta

Number('42');       // 42
Number('3.99');     // 3.99
Number('  42  ');   // 42  : se ignoran los espacios y saltos de línea alrededor
Number('42px');     // NaN : un solo carácter de más y todo falla
Number('');         // 0   : cuidado
Number(' ');        // 0   : ídem
Number(null);       // 0
Number(undefined);  // NaN
Number(true);       // 1
Number('0x1f');     // 31  : se aceptan hexadecimal, binario (0b) y octal (0o) con prefijo

Number() es la conversión que quieres para un valor que debe ser un número y nada más: un precio, una cantidad, un identificador. Si el usuario ha escrito «12 euros», obtienes NaN y puedes decírselo, en vez de calcular con 12 sin saberlo.

El operador unario +: Number() en un carácter

+'42';     // 42
+'';       // 0
+'abc';    // NaN
'42' * 1;  // 42  : la multiplicación también fuerza la conversión
'42' - 0;  // 42
'3' + '4'; // '34' : la suma, en cambio, ¡concatena!

El + colocado delante de un valor aplica exactamente Number(). Es corto, muy habitual en el código existente y fácil de pasar por alto al releer: +valeur se confunde con una errata. En un código compartido, Number(valeur) dice lo mismo con más claridad. Y no uses nunca la suma binaria para convertir: '3' + '4' da la cadena '34'.

Tratar NaN correctamente

NaN (Not a Number) es el resultado de cualquier conversión fallida. Tiene una propiedad traicionera: no es igual a nada, ni siquiera a sí mismo.

const n = Number('abc');

n === NaN;          // false, siempre
Number.isNaN(n);    // true  : la forma correcta de comprobarlo
isNaN('abc');       // true  : pero isNaN convierte primero su argumento...
Number.isNaN('abc');// false : ... mientras que Number.isNaN solo detecta los NaN reales

El esquema habitual: convertir, comprobar, aplicar un valor por defecto o señalar el error.

function toNumber(valeur, defaut = 0) {
  const n = Number(String(valeur).trim());
  return Number.isNaN(n) ? defaut : n;
}

toNumber('42');    // 42
toNumber('42px');  // 0  (valor por defecto)
toNumber('', 10);  // 0  : la cadena vacía vale 0, no el valor por defecto

La última línea recuerda la trampa de la cadena vacía: si un campo vacío debe tratarse como «sin rellenar», compruébalo antes de convertir.

function toNumberStrict(valeur) {
  const s = String(valeur).trim();
  if (s === '') return NaN;
  return Number(s);
}

El caso francés: la coma decimal

Ninguno de los cuatro métodos entiende «12,5». Number devuelve NaN; parseFloat se detiene en la coma y devuelve 12, que es peor: el programa sigue con un valor falso. Normaliza la entrada antes de convertir.

function parseFr(chaine) {
  const normalisee = String(chaine)
    .replace(/\s/g, '')   // quita los espacios de los miles: «1 234,56»
    .replace(',', '.');   // coma decimal -> punto
  return Number(normalisee);
}

parseFr('12,5');       // 12.5
parseFr('1 234,56');   // 1234.56
parseFr('12.5');       // 12.5 : el punto sigue aceptándose

En un formulario, <input type="number"> evita el problema: el navegador muestra la coma al usuario francés, pero siempre transmite un punto en value.

Comprobar que una cadena es realmente un número

Para saber si una cadena representa un número antes de usarla, combina una conversión estricta con Number.isFinite, que rechaza NaN e Infinity.

function estNumerique(chaine) {
  const s = String(chaine).trim();
  return s !== '' && Number.isFinite(Number(s));
}

estNumerique('42');       // true
estNumerique('3.99');     // true
estNumerique('42px');     // false
estNumerique('');         // false
estNumerique('Infinity'); // false

Y para distinguir un entero de un decimal una vez convertido: Number.isInteger(42) vale true y Number.isInteger(3.99) vale false.

Los enteros grandes: cuando Number ya no basta

Number representa con exactitud los enteros hasta 2⁵³ − 1 (9.007.199.254.740.991). Por encima, la precisión se pierde sin avisar: un identificador de base de datos de 64 bits o un importe en céntimos muy alto pueden falsearse.

Number('9007199254740993');   // 9007199254740992 : la última cifra ha cambiado
BigInt('9007199254740993');   // 9007199254740993n : exacto
Number.MAX_SAFE_INTEGER;      // 9007199254740991

BigInt no se mezcla con Number en un cálculo y no acepta decimales; resérvalo para los identificadores y los enteros de verdad grandes.

¿Qué método elegir?

• El valor debe ser un número y nada más (precio, cantidad, identificador): Number(), después de descartar la cadena vacía.
• Hay que extraer un número de un texto («12.5px», «3 artículos»): parseFloat() para un decimal, parseInt(s, 10) para un entero.
• La entrada viene de un usuario francés: normalizar la coma y los espacios, y luego Number().
• Estás releyendo código con +valeur: eso es Number(valeur). Consérvalo si el equipo está acostumbrado, pero no conviertas nunca con la suma '3' + '4'.
• En todos los casos: comprueba con Number.isNaN() o Number.isFinite() antes de calcular.

La operación inversa, convertir un número en una cadena legible con dos decimales o un separador de miles, se trata en Formatear un número en JavaScript. Para las bases del lenguaje, el capítulo Variables y tipos de datos del tutorial explica por qué una cadena y un número son dos tipos distintos.