Cómo convertir cadenas a números en JavaScript: Number(), parseInt(), parseFloat() y mejores prácticas

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introducción

JavaScript es uno de los lenguajes de programación más utilizados en el desarrollo web. Entre sus muchas características, la conversión de cadenas a números es una operación fundamental que se requiere frecuentemente en aplicaciones del mundo real.

Por ejemplo, los valores ingresados por los usuarios en formularios o los datos recuperados de APIs a menudo se tratan como cadenas. Estos valores no se pueden usar directamente para cálculos o comparaciones a menos que se conviertan en tipos numéricos.

En este artículo, explicaremos métodos concretos para convertir cadenas a números en JavaScript. Cubriremos cómo funciona cada función y técnica, sus diferencias y puntos importantes a tener en cuenta. Use esta guía como una referencia práctica.

2. Resumen de los Tipos de Datos en JavaScript

JavaScript es conocido como un lenguaje con tipado dinámico, lo que significa que el tipo de una variable se determina automáticamente durante la ejecución del programa. Aunque esto proporciona flexibilidad, también puede llevar a errores o comportamientos inesperados si la conversión de tipos no se maneja con cuidado.

Tipos de Datos Principales

Los tipos de datos en JavaScript se pueden dividir ampliamente en las siguientes dos categorías.

1. Tipos Primitivos

• Number: Representa enteros y números de punto flotante.
• String: Representa datos de texto.
• Boolean: Solo tiene true o false.
• Undefined: Indica que no se ha asignado un valor.
• Null: Representa explícitamente la ausencia de un valor.
• Symbol: Se usa como un identificador único.

1. Tipos de Objetos

• Incluye arreglos (Array), funciones (Function), fechas (Date) y más.

Tipado Dinámico y Problemas en la Conversión de Tipos

En JavaScript, los tipos de variables pueden convertirse implícitamente o explícitamente. Se requiere atención especial al tratar con cadenas y números.

Ejemplo:

console.log("10" + 5); // Output: "105" (string concatenation)
console.log("10" - 5); // Output: 5 (numeric calculation)

Como se muestra arriba, el mismo operador puede comportarse de manera diferente dependiendo del contexto. La conversión de tipos explícita es esencial para prevenir resultados no intencionados.

3. Métodos para Convertir Cadenas a Números

JavaScript proporciona varias formas de convertir cadenas en números. Esta sección explica en detalle cuatro métodos comúnmente utilizados.

La Función Number()

La función Number() es la forma más básica de convertir una cadena en un número.

Ejemplos:

console.log(Number("42"));    // Output: 42
console.log(Number("3.14"));  // Output: 3.14
console.log(Number(""));      // Output: 0 (empty string becomes 0)
console.log(Number("abc"));   // Output: NaN (returns NaN if conversion fails)

Características:

• Convierte tanto enteros como números de punto flotante.
• Una cadena vacía se convierte en 0.
• Devuelve NaN (Not-a-Number) si la conversión falla.

Nota Importante:
NaN es un valor numérico especial que no se puede usar en cálculos. Usarlo sin intención puede llevar a comportamientos inesperados.

La Función parseInt()

La función parseInt() convierte una cadena en un entero. Analiza la cadena desde el principio y se detiene en el primer carácter no numérico.

Ejemplos:

console.log(parseInt("42"));         // Output: 42
console.log(parseInt("42.99"));      // Output: 42 (decimal part is ignored)
console.log(parseInt("10abc"));      // Output: 10
console.log(parseInt("abc10"));      // Output: NaN

Especificando la Base Numérica:

console.log(parseInt("10", 2)); // Output: 2 (binary)
console.log(parseInt("A", 16)); // Output: 10 (hexadecimal)

Características:

• Útil cuando solo se requiere la parte entera.
• Soporta la conversión desde diferentes sistemas numéricos.

Precaución:
Si se omite la base numérica, el resultado puede depender del formato de la cadena, potencialmente causando resultados inesperados.

La Función parseFloat()

La función parseFloat() convierte una cadena en un número de punto flotante.

Ejemplos:

console.log(parseFloat("3.14"));     // Output: 3.14
console.log(parseFloat("3.14abc"));  // Output: 3.14
console.log(parseFloat("abc3.14"));  // Output: NaN

Características:

• Ideal para manejar valores decimales.
• Funciona correctamente también con valores enteros.

Precaución:

• Al igual que parseInt(), ignora los caracteres después de la parte numérica.

El Operador Unario Plus (+)

El operador unario plus (+) ofrece una forma corta y sencilla de realizar la conversión de tipos.

Ejemplos:

console.log(+"42");      // Output: 42
console.log(+"3.14");    // Output: 3.14
console.log(+"abc");     // Output: NaN

Características:

• Produce código conciso.
• Se comporta igual que Number().

Precaución:
Aunque es conciso, este enfoque puede reducir la legibilidad. Para código orientado a principiantes o en equipos, Number() suele ser más claro.

Resumen

La siguiente sección explica las diferencias entre estos métodos y cómo elegir el adecuado.

4. Diferencias entre los Métodos de Conversión y Cómo Elegir

JavaScript ofrece múltiples formas de convertir cadenas a números, cada una con un comportamiento distinto. Comprender estas diferencias es esencial para seleccionar el método correcto.

Number() vs parseInt()

Number() evalúa toda la cadena como un valor numérico, mientras que parseInt() extrae solo la parte entera.

Ejemplo:

console.log(Number("42.5"));     // Output: 42.5
console.log(parseInt("42.5"));  // Output: 42

Guías de Uso:

• Usa Number() cuando se requieren valores numéricos precisos.
• Usa parseInt() cuando se deben ignorar los decimales.

parseInt() vs parseFloat()

parseInt() está limitado a enteros, mientras que parseFloat() maneja valores decimales.

Ejemplo:

console.log(parseInt("42.75"));     // Output: 42
console.log(parseFloat("42.75"));  // Output: 42.75

Guías de Uso:

• Usa parseInt() para números enteros como edades o identificadores.
• Usa parseFloat() para precios o medidas.

Number() vs Operador Unario Plus (+)

Tanto Number() como el operador unario plus se comportan de manera similar, pero la legibilidad difiere.

Ejemplo:

console.log(Number("42"));  // Output: 42
console.log(+"42");         // Output: 42

Guías de Uso:

• Number() expresa claramente la intención y se recomienda para proyectos en equipo.
• El operador unario plus es útil cuando se prefiere la brevedad.

Manejo de Casos Especiales

Cadenas Vacías y Valores Inválidos

Ejemplo:

console.log(Number(""));           // Output: 0
console.log(parseInt(""));         // Output: NaN
console.log(+"");                  // Output: 0
console.log(Number("abc"));        // Output: NaN
console.log(parseFloat("abc123")); // Output: NaN

Puntos Clave:

• Usa Number() o el unario + cuando las cadenas vacías deben convertirse en 0.
• Ten cuidado con parseInt() y parseFloat(), ya que puede ocurrir un análisis parcial.

Resumen

5. Manejo de Errores Durante la Conversión

El manejo adecuado de errores es esencial al convertir cadenas a números, especialmente al tratar con entradas de usuario o datos externos.

Manejo de NaN (Not-a-Number)

Cuando la conversión falla, JavaScript devuelve NaN, que técnicamente es un tipo numérico pero no puede usarse en cálculos.

Ejemplo:

console.log(Number("abc"));      // Output: NaN
console.log(parseInt("xyz"));    // Output: NaN
console.log(+"test");            // Output: NaN

Puntos Clave:

• Cualquier cálculo que involucre NaN da como resultado NaN.
• NaN === NaN devuelve false.

Uso de isNaN()

La función isNaN() verifica si un valor es NaN.

Ejemplo:

console.log(isNaN("abc")); // true
console.log(isNaN(42));    // false
console.log(isNaN(NaN));   // true

Precaución:
isNaN() realiza una conversión implícita de tipo.

Uso de Number.isNaN()

Number.isNaN() realiza una comprobación estricta sin conversión de tipo.

Ejemplo:

console.log(Number.isNaN("abc"));      // false
console.log(Number.isNaN(NaN));        // true
console.log(Number.isNaN(undefined));  // false

Recomendación:

• Utilice Number.isNaN() para una verificación de errores fiable.

Ejemplo: Manejo de Entrada Inválida

function safeConvert(input) {
  let value = Number(input);
  return Number.isNaN(value) ? 0 : value;
}

6. Ejemplos Prácticos

Esta sección presenta casos de uso del mundo real, incluyendo entrada de usuario, arreglos, formularios y datos JSON.

1. Convertir Entrada de Usuario

function processUserInput(input) {
  let value = Number(input);

  if (Number.isNaN(value)) {
    console.log("Error: Please enter a number.");
    return null;
  }

  console.log("Entered value: " + value);
  return value;
}

2. Convertir Valores de Cadena en Arreglos

let data = ["10", "20", "30", "40"];
let numbers = data.map(Number);
console.log(numbers);

3. Procesar Datos de Formularios

function calculateTotalPrice(priceInput, quantityInput) {
  let price = parseFloat(priceInput);
  let quantity = parseInt(quantityInput);

  if (Number.isNaN(price) || Number.isNaN(quantity)) {
    console.log("Error: Please enter valid numbers.");
    return null;
  }

  let total = price * quantity;
  console.log("Total price: " + total);
  return total;
}

4. Convertir Datos JSON

let jsonData = '[{"id": "1", "price": "120.5"}, {"id": "2", "price": "200"}]';
let products = JSON.parse(jsonData);

let total = products.reduce((sum, product) => {
  let price = Number(product.price);
  return sum + (Number.isNaN(price) ? 0 : price);
}, 0);

console.log("Total price: " + total);

7. Conclusión

En este artículo, cubrimos la conversión de cadena a número en JavaScript, desde los fundamentos hasta casos de uso avanzados.

Los puntos clave incluyen comprender los tipos de datos, elegir el método de conversión adecuado e implementar un manejo de errores apropiado.

La conversión de cadena a número es una habilidad básica pero esencial para el desarrollo de JavaScript en el mundo real. Practique los ejemplos proporcionados aquí y aplíquelos a sus propios proyectos para mejorar la fiabilidad y precisión.