Por si no lo sabías, es muy normal que cuando trabajas con JavaScript, una de las tareas más comunes que te encontrarás es la necesidad de convertir cadenas de texto en números. Debido a esto, JavaScript nos trae una solución muy sencilla de usar y nos ofrece una función muy útil. Aquí te contaremos todo lo que necesitas saber, desde qué es parseInt en JavaScript, para qué sirve, cómo funciona, hasta brindarte un ejemplo práctico para que puedas verlo en acción. Sigue leyendo para que estés cada vez más cerca de convertirte en un experto en JavaScript.
¿Qué es parseInt en JavaScript?
Es una función de JavaScript que se utiliza para convertir (o parsear) un argumento de tipo cadena en un número entero de una base especificada. Debes tener presente que esta función es de alto nivel y no está asociada a ningún objeto en particular. Además, es extremadamente útil cuando necesitas manejar datos numéricos que inicialmente se presentan como texto.
Sintaxis
Un punto a favor es que su sintaxis es bastante sencilla:
parseInt(string, base);
Parámetros
- string: Una cadena que representa el valor que deseas convertir.
- base: Un entero que representa la base de la cadena mencionada. Por ejemplo, 10 para decimal, 16 para hexadecimal, etc.
Descripción
Lo que hace la función es revisar el primer argumento, que es una cadena, e intenta devolver un número entero basado en la base especificada. Si no se especifica la base, JavaScript asumirá lo siguiente:
- Si la cadena comienza con “0x”, la base es 16 (hexadecimal).
- Si la cadena comienza con “0”, la base es 8 (octal). Aunque esta característica está desaconsejada.
- Si la cadena comienza con cualquier otro valor, la base es 10 (decimal).
Es muy importante que sepas que si la función encuentra un carácter que no es un numeral de la base especificada, lo ignora a él y a todos los caracteres siguientes, devolviendo el valor entero obtenido hasta ese punto. Esto quiere decir que si no puede convertir el primer carácter en un número, la función devuelve NaN (Not a Number).
¿Para qué sirve?
Como te lo comentamos esta función es esencial cuando necesitas convertir valores de texto en números para realizar operaciones matemáticas. Es comúnmente usado en formularios web donde los datos ingresados por los usuarios son de tipo texto y necesitas convertir esos datos a números para cálculos posteriores.
¿Cómo funciona?
Lo magnífico de esta función de JavaScript es que funciona al revisar la cadena de texto y convertir los caracteres numéricos hasta que encuentra un carácter que no puede convertir según la base especificada. Aquí tienes algunos ejemplos para que veas cómo es su funcionamiento:
Ejemplos de uso
console.log(parseInt("F", 16)); // Devuelve 15
console.log(parseInt("17", 8)); // Devuelve 15
console.log(parseInt("15", 10)); // Devuelve 15
console.log(parseInt(15.99, 10)); // Devuelve 15
console.log(parseInt("FXX123", 16)); // Devuelve 15
console.log(parseInt("1111", 2)); // Devuelve 15
console.log(parseInt("15*3", 10)); // Devuelve 15
console.log(parseInt("12", 13)); // Devuelve 15
Ejemplos que devuelven NaN
console.log(parseInt("Hello", 8)); // No es un número en absoluto
console.log(parseInt("0x7", 10)); // No es de base 10
console.log(parseInt("546", 2)); // Los dígitos no son válidos para representaciones binarias.
Incluso cuando la base especificada es diferente, todos los siguientes ejemplos devuelven 17 porque la cadena comienza con “0x”:
console.log(parseInt("0x11", 16));
console.log(parseInt("0x11", 0));
console.log(parseInt("0x11"));
Ejemplo práctico con formulario
Para que entiendas mejor cómo utilizar esta función de JavaScript, aquí tienes un ejemplo práctico. Supongamos que tienes un formulario donde los usuarios ingresan su edad y quieres asegurarte de que este valor sea un número entero.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo parseInt</title>
</head>
<body>
<form id="ageForm">
<label for="age">Ingresa tu edad:</label>
<input type="text" id="age" name="age">
<button type="button" onclick="convertAge()">Enviar</button>
</form>
<script>
function convertAge() {
let ageInput = document.getElementById('age').value;
let age = parseInt(ageInput, 10);
if (isNaN(age)) {
alert('Por favor, ingresa un número válido.');
} else {
alert('Tu edad es ' + age);
}
}
</script>
</body>
</html>
En este ejemplo, el usuario ingresa su edad en un campo de texto. La función convertAge toma ese valor, lo convierte en un número entero utilizando parseInt, y luego verifica si es un número válido. Si no lo es, muestra un mensaje de error; de lo contrario, muestra la edad ingresada.
Ahora sabes que esta función es una gran aliada para convertir cadenas de texto en números enteros, permitiéndote manejar datos numéricos de manera eficiente. Conocer cómo usarla, comprender su sintaxis y funcionamiento, y aplicar ejemplos prácticos te permitirá mejorar tus habilidades en JavaScript y crear aplicaciones web más robustas y funcionales.
Si te ha parecido interesante este artículo y quieres aprender más sobre cómo manejar datos y mejorar tus habilidades en JavaScript, te invitamos a inscribirte en el Bootcamp de Desarrollo Web Full Stack de KeepCoding. Este programa no solo te enseñará JavaScript a fondo, sino que también te preparará para una carrera en el sector tecnológico, una industria en constante crecimiento que ofrece excelentes oportunidades laborales y salarios competitivos. ¡No pierdas la oportunidad de transformar tu vida y dar el salto a una carrera en tecnología con KeepCoding!
