Convertir strings a number y viceversa - Curso de JavaScript de cero a máster - Capítulo 13

En este capítulo aprenderás a convertir un string con un valor numérico a tipo de dato number y un number a string.

Como convertir de string a number

JavaScript pone las conversiones extremadamente fáciles. Solo necesitas un string con un valor numérico y podrás convertirlo a number para poder operar con él.

Código JavaScript 

let num1 = "7";
let num2 = "5";
let operacion = num1 + num2;

document.write(operacion);

Resultado en el navegador

El valor de string "7" se concatena o une al valor de string "5". No opera con ellos.

Concatenación de números en JavaScript

Podemos intentar forzar esto cambiando un string por un number a ver que pasa.

Código JavaScript 

let num1 = 7;
let num2 = "5";
let operacion = num1 + num2;

document.write(operacion);

Resultado en el navegador

Concatenación de números en JavaScript

Nada, sigue concatenando. Hay que convertir los strings a numbers. Esto lo haremos con Number().

Palabra del lenguaje nº 28 encontrada.
Number() es un método capaz de convertir strings en number. En caso de que el string contenga algún caracter que no sea un número devuelve un valor de NaN.

Código JavaScript 

let num1 = "7";
let num2 = "5";
let operacion = Number(num1) + Number(num2);

document.write(operacion);

Resultado en el navegador

En este caso, convierte directamente los valores del string para poder operar con ellos. Pero lo strings siguen siendo strings. Ahora si que opera correctamente.

Convertir de string a number en JavaScript

¿Qué ocurre si le intentamos hacer esta conversión con un valor no numérico?

Código JavaScript 

let texto1 = "Puro texto";
let convertirString = Number(texto1);

document.write(typeof(convertirString) + " " + convertirString);

Resultado en el navegador

nan not a number JavaScript

Lo que acabo de hacer es forzar una conversión de un string que no tiene un valor numérico a tipo number. Esto no da errores en la consola, JavaScript es flexible en este caso. Si miramos el tipo de dato con typeof, podemos ver que aunque no es un número en absoluto, se ha transformado a number. Ten cuidado con esto, ya que puedes crear fácilmente incoherencias. Después he concatenado en el document.write() un string con un espacio para separar el tipo de dato del valor devuelto (es un simple espacio).
Mirando el valor que ha almacenado, vemos que no almacena realmente el valor del string. En su lugar, te va a devolver NaN.

Palabra del lenguaje nº 29 encontrada.
NaN son las siglas en inglés de Not a Number. "No es un número" en español.

Como convertir de number a string en JavaScript

También es muy fácil de hacer. Solo tienes que utilizar el método toString().

Palabra del lenguaje nº 30 encontrada.
toString es un método capaz de convertir tipos de datos number a string.

Código JavaScript 

let num1 = 7;
let transformaNumber = toString(num1);

document.write(typeof(transformaNumber));

Resultado en el navegador

Convertir de number a string en JavaScript

Ejercicios de JavaScript

  1. Crea tres variables con strings que contengan números. Deberás concatenarlos.
  2. Esta vez, haz que los tres valores anteriores se sumen y se almacene en una variable el resultado de la operación. Tienen que seguir siendo strings en la declaración.
  3. Transforma el resultado almacenado del ejercicio anterior en un string y crea una frase con algo como "el resultado es: ", a esto, concaténale el valor del resultado.

La solución la encontrarás aquí: Haz click aquí.

Capítulos

    Suscríbete a mi canal de YouTube para apoyarme

    Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

    Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

    No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.

    Comentarios

    Si te quedan dudas sobre el temario, sobre JavaScript, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.