Artículos de Tecnología > Front End

Convirtiendo String a número en JavaScript

Felipe Nascimento
Felipe Nascimento
portada

Recientemente desarrollé una aplicación para descubrir cuál sería el nuevo sueldo de un empleado con base en el porcentaje de aumento que recibió.

const sueldo = TomaSueldoDelEmpleado();
const aumento = 20;
const nuevoSueldo = ( sueldo * aumento)/100) + sueldo;
console.log( "Su nuevo sueldo es: " +nuevoSueldo ); 

¡La respuesta al nuevo sueldo fue 3001500! Este resultado ocurrió porque los datos provienen de un formulario HTML y, como razón de eso, la variable sueldo es una string.

Aunque JavaScript es un lenguaje de tipo débil y puede realizar operaciones de resta, división y multiplicación que involucran strings, no comprende una operación de suma que involucre strings. Lo que hace es concatenar, es decir, une estas dos strings.

Las funciones parseInt() y parseFloat()

Para que funcione la lógica de la aplicación, la variable sueldo necesita convertirse en un número.

En JavaScript tenemos una función llamada parseInt(), que, en otras palabras, analizará la string y devolverá un número entero. Ahora, usando la función, el código de la aplicación se ve así:

const sueldo = tomaSueldoDelEmpleado();
const sueldoFormateado = parseInt(sueldo);
const aumento = 20;const nuevoSueldo = ( sueldo * aumento)/100) + sueldoFormateado;
console.log( "Su nuevo sueldo es: " + nuevoSueldo );

Dado que los cálculos de salario generalmente usan representación de puntos flotantes, es decir, contienen casas decimales, podemos usar la función parseFloat() que analizará justamente la string y devolverá un número con representación decimal, es decir, con punto flotante.

const sueldo = tomaSueldoDelEmpleado();
const aumento = 0.9;
const sueldoFormateado = parseFloat(sueldo);
const nuevoSueldo = ( sueldo * aumento)/100) + sueldoFormateado;console.log( "Su nuevo sueldo es: " +nuevoSueldo );

Conclusión

Podemos ver que dependiendo del tipo de entrada que reciba la función puede cambiar su comportamiento y afectar nuestra lógica dentro del sistema.

Teniendo en cuenta que en ocasiones capturaremos datos de los usuarios para realizar alguna operación de adición, debemos recordar que, muchas veces estas entradas vendrán en formato de string.

Por tanto, para no correr el riesgo de concatenar estos datos en lugar de hacer una suma, siempre es importante recordar utilizar las funciones parseInt() o parseFloat() dependiendo del tipo de número que se utilizará para realizar las operaciones.

Si le interesa cómo funciona JavaScript y cómo puede usarlo mejor, aquí en Alura tenemos una Formación en desarrollo JavaScript. Ahí verás cómo programar en JavaScript, usar expresiones regulares, aprender desarrollo web, entre otras cosas.

Puedes leer también:

Artículos de Tecnología > Front End

En Alura encontrarás variados cursos sobre Front End. ¡Comienza ahora!

Semestral

  • 194 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro y comunidad exclusiva para resolver tus dudas
  • Acceso a todo el contenido de la plataforma por 6 meses
US$49,90
un solo pago de US$49,90
¡QUIERO EMPEZAR A ESTUDIAR!

Paga en moneda local en los siguientes países

Anual

  • 194 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro y comunidad exclusiva para resolver tus dudas
  • Acceso a todo el contenido de la plataforma por 12 meses
US$79,90
un solo pago de US$79,90
¡QUIERO EMPEZAR A ESTUDIAR!

Paga en moneda local en los siguientes países

Acceso a todos
los cursos

Estudia las 24 horas,
dónde y cuándo quieras

Nuevos cursos
cada semana