Conversión de Strings a Números: parseFloat() y parseInt()
Aprende a convertir strings a números usando parseFloat() y parseInt() con control de base numérica para diferentes aplicaciones.
TL;DR - Resumen rápido
- parseFloat('3.14abc') retorna 3.14: lee hasta carácter inválido e ignora el resto
- parseInt('42px', 10) retorna 42: SIEMPRE especifica base 10 para evitar octal
- parseInt('0x10') retorna 16 sin base: detecta hex, pero parseInt('08') puede fallar
- Number('3.14abc') retorna NaN: más estricto que parse*, útil para validación
- parseFloat/parseInt con string vacío o inválido retornan NaN (verifica con isNaN)
Introducción a la Conversión de Strings a Números
La conversión de strings a números es una tarea fundamental en programación, especialmente cuando trabajas con entrada de usuario, datos externos o APIs que retornan strings. JavaScript proporciona dos métodos principales para esta tarea: parseFloat() y parseInt().
Estos métodos difieren en comportamiento y casos de uso:
- <strong>parseFloat('3.14'):</strong> Procesa decimales, ideal para precios, mediciones
- <strong>parseInt('42', 10):</strong> Convierte a enteros, segundo parámetro es la base
- <strong>Number('3.14'):</strong> Más estricto, retorna NaN si el string no es puramente numérico
- <strong>+('3.14'):</strong> Operador unario +, atajo para Number() pero menos legible
Cada método tiene ventajas: parseFloat/parseInt son permisivos (ignoran caracteres extra), mientras que Number() es estricto (útil para validación).
Importante: Lectura hasta Carácter No Numérico
Tanto parseFloat() como parseInt() leen el string de izquierda a derecha hasta encontrar el primer carácter que no es válido para el número. El resto del string se ignora, lo que puede causar resultados inesperados si no validas el formato del string.
parseFloat(): Conversión a Decimales
El método parseFloat() convierte un string a un número de punto flotante (decimal). Este método es ideal para procesar valores que pueden tener decimales, como precios, mediciones o cualquier valor que requiera precisión decimal.
Usos Prácticos de parseFloat()
parseFloat() se usa comúnmente para procesar entrada de usuario, datos de formularios y cualquier string que represente un valor decimal. El método es especialmente útil para procesar precios, mediciones y valores que requieren precisión decimal.
El ejemplo muestra cómo parseFloat() convierte strings a números decimales. Observa que el método lee el string hasta encontrar un carácter no numérico y luego retorna el número convertido. Los espacios en blanco al inicio del string se ignoran automáticamente.
Este ejemplo muestra aplicaciones prácticas de parseFloat() en procesamiento de entrada de usuario y datos de formularios. El método es especialmente útil para procesar precios, mediciones y cualquier valor que requiera precisión decimal.
Limitaciones y Errores Comunes
Aunque parseFloat() es útil, tiene algunas limitaciones importantes que debes conocer. El método solo puede procesar strings que representan números válidos y retorna NaN si no puede convertir el string.
Este ejemplo muestra las limitaciones de parseFloat(). El método retorna NaNsi el string no representa un número válido y puede causar resultados inesperados si el string contiene caracteres no numéricos después de un número válido.
parseInt(): Conversión a Enteros
El método parseInt() convierte un string a un número entero. Este método es ideal para procesar valores que deben ser enteros, como índices de arrays, iteraciones o cualquier valor que no requiera decimales.
Usos Prácticos de parseInt()
parseInt() se usa comúnmente para procesar valores que deben ser enteros, como índices de arrays, iteraciones o cualquier valor que no requiera decimales. El método es especialmente útil para procesar IDs, cantidades y valores de conteo.
El ejemplo muestra cómo parseInt() convierte strings a números enteros. Observa que el método trunca cualquier parte decimal del número, no redondea. Los espacios en blanco al inicio del string se ignoran automáticamente.
Este ejemplo muestra aplicaciones prácticas de parseInt() en procesamiento de IDs, cantidades y valores de conteo. El método es especialmente útil para procesar valores que deben ser enteros exactos.
Control de Base Numérica
parseInt() acepta un segundo parámetro opcional que especifica la base (radix) del número a convertir. Este parámetro es importante para evitar errores de interpretación, especialmente con strings que empiezan con "0".
El ejemplo muestra cómo especificar diferentes bases en parseInt(). Es importante siempre especificar la base (generalmente 10 para decimal) para evitar interpretaciones incorrectas, especialmente con strings que empiezan con "0".
Advertencia: Siempre Especifica la Base
Siempre especifica la base (generalmente 10) en parseInt() para evitar errores de interpretación. Sin especificar la base, JavaScript puede interpretar strings que empiezan con "0" como octales, lo que puede causar resultados inesperados.
Comparación: parseFloat() vs parseInt()
Entender las diferencias entre parseFloat() y parseInt() es crucial para elegir el método correcto para cada situación. Ambos métodos convierten strings a números, pero tienen comportamientos distintos con los decimales y el propósito de uso.
Este ejemplo comparativo muestra las diferencias clave entre parseFloat() yparseInt(). Observa cómo parseFloat() preserva los decimales mientras queparseInt() los trunca, lo que afecta el resultado de la conversión.
- <strong>parseFloat()</strong> preserva los decimales y es ideal para precios, mediciones y valores que requieren precisión decimal.
- <strong>parseInt()</strong> trunca los decimales y es ideal para índices, IDs y valores que deben ser enteros.
- <strong>parseFloat()</strong> retorna NaN si el string no representa un número decimal válido.
- <strong>parseInt()</strong> acepta un segundo parámetro para especificar la base numérica.
- Ambos métodos leen el string hasta encontrar un carácter no numérico y luego retornan el número convertido.
Tip Profesional: Cuándo Usar Cada Método
Usa parseFloat() para cualquier valor que requiera decimales, como precios, mediciones o valores de precisión. Usa parseInt() para valores que deben ser enteros exactos, como índices, IDs o cantidades de conteo. Siempre especifica la base (10) en parseInt().
Errores Comunes
Estos son los errores más frecuentes que encontrarás al trabajar con parseFloat() yparseInt(), especialmente cuando estás aprendiendo o migrando código legacy.
Este error ocurre cuando no especificas la base en parseInt(). Sin especificar la base, JavaScript puede interpretar strings que empiezan con "0" como octales, lo que puede causar resultados inesperados. La solución es siempre especificar la base (generalmente 10).
Este error ocurre cuando el string contiene caracteres no numéricos después de un número válido.parseFloat() y parseInt() leen hasta encontrar el primer carácter no numérico y luego retornan el número convertido, ignorando el resto del string.
Este error ocurre cuando no validas que el resultado de parseFloat() oparseInt() es un número válido. Ambos métodos retornan NaN si no pueden convertir el string, lo que puede causar errores en cálculos posteriores.
Resumen: Conversión de Strings a Números
Conceptos principales:
- •parseFloat() convierte strings a números decimales, preservando la parte decimal
- •parseInt() convierte strings a números enteros, truncando cualquier parte decimal
- •Ambos métodos leen el string hasta encontrar un carácter no numérico
- •parseInt() acepta un segundo parámetro para especificar la base (radix)
- •Siempre especifica la base (10) en parseInt() para evitar errores de interpretación
Mejores prácticas:
- •Usa parseFloat() para valores que requieren decimales como precios y mediciones
- •Usa parseInt() para valores que deben ser enteros como índices y IDs
- •Siempre especifica la base (10) en parseInt() para evitar interpretaciones incorrectas
- •Valida que el resultado no es NaN antes de usarlo en cálculos
- •Usa Number() para conversiones más estrictas que rechazan strings con caracteres no numéricos