Conversión de tipos
Ya separas null y undefined. Lo siguiente: cambiar a propósito el tipo de un valor — número a texto para una etiqueta, texto a número para calcular. Eso es conversión de tipos. Aquí usamos ayudantes claros: String(), Number() y Boolean() — más una sorpresa habitual con +.
¿Qué es la conversión de tipos en JavaScript?
Conversión de tipos significa pasar un valor de un tipo a otro. Mejor explícita: String(42) da "42", Number("7") da 7, Boolean(0) da false. Si Number no entiende el texto, obtienes NaN. Con +, si hay una cadena, a menudo concatena en lugar de sumar — regístralo una vez para que quede.
Kit de conversión
📊 Conversión de tipos para principiantes
| Ayuda / idea | Ejemplo | Resultado / nota |
|---|---|---|
String(...) |
String(42) |
"42" (texto) |
Number(...) |
Number("7") |
7 (número) |
Boolean(...) |
Boolean(0) |
false (vista previa falsy) |
| Texto no numérico | Number("hello") |
NaN — typeof sigue "number" |
| Vacío → booleano | Boolean("") |
false |
Mezcla con + |
5 + "2" |
"52" (concatena, no 7) |
String() — crear texto
Cuando necesites etiqueta o mensaje, envuelve el valor en String(...). Números, booleanos, null y undefined pasan a cadena para mostrar o unir.
console.log(String(42));
console.log(String(true));
console.log(String(null));
console.log(String(undefined));
console.log(typeof String(42));
Number() — crear un número
Usa Number(...) cuando el texto debe servir para matemáticas. Cadenas de dígitos convierten bien. Texto no numérico se vuelve NaN.
console.log(Number("7"));
console.log(Number("3.5"));
console.log(Number(true));
console.log(Number(false));
console.log(typeof Number("7"));
Cuando Number falla — NaN
Number("hello") es NaN. Del tema de números: typeof NaN sigue siendo "number". Trata NaN como conversión fallida, no como cantidad usable.
console.log(Number("hello"));
console.log(typeof Number("hello"));
console.log(Number(""));
console.log(Number(null));
Number("") y Number(null) dan 0 — otra trampa para principiantes. Si quieres una cantidad real, usa cadenas de dígitos claras.
Boolean() — sí/no desde un valor
Boolean(...) convierte a true o false. Vacíos como 0, "", null, undefined y NaN dan false. Cadenas no vacías y la mayoría de números dan true. La lista completa truthy / falsy viene después — aquí basta el ayudante.
console.log(Boolean(1));
console.log(Boolean(0));
console.log(Boolean("hi"));
console.log(Boolean(""));
console.log(Boolean(null));
La sorpresa de + — concatenar vs sumar
Si un lado de + es cadena, JavaScript suele unir texto en lugar de sumar. Cuando quieras matemáticas, convierte antes con Number().
console.log(5 + 2);
console.log(5 + "2");
console.log(Number("5") + Number("2"));
console.log("Score: " + 10);
Mostrar conversiones en la página
Convierte unos valores y escribe etiquetas cortas con textContent.
<!DOCTYPE html>
<html>
<head>
<title>Type conversion — labels</title>
</head>
<body>
<p id="out">…</p>
<script>
let raw = "12";
let asNumber = Number(raw);
let asText = String(asNumber);
let flag = Boolean(asNumber);
document.getElementById("out").textContent =
"raw=" + raw +
" | number=" + asNumber +
" | text=" + asText +
" | flag=" + flag;
</script>
</body>
</html>
El párrafo muestra la misma idea en tres formas. Cambia raw a "0", actualiza y verás flag en false mientras el número sigue siendo 0.
Pruébalo tú
- Registra
String(99),String(false)ytypeof String(99). - Registra
Number("8")yNumber("8") + 2— matemáticas, no"82". - Registra
Number("oops")y sutypeof(NaN, aún"number"). - Registra
Boolean("")yBoolean("ok"). - Registra
3 + "4"y reescribe conNumber("3") + Number("4"). - En el demo HTML pon
raw="0", actualiza y lee el nuevoflag.
Errores comunes
- Creer que
+siempre suma — una cadena puede concatenar - Ignorar
NaNtrasNumber("hello")y usarlo en cálculos - Pensar que esta lección sustituye truthy / falsy —
Boolean()es solo vista previa - Esperar que
String(null)sea""— es el texto"null" - Olvidar
typeofcuando el resultado parece raro
Resumen
- Conversión de tipos: cambiar a propósito el tipo de un valor
- Prefiere
String(),Number(),Boolean()para intención clara - Texto no numérico →
NaN;typeof NaNsigue"number" +con cadena suele concatenar — convierte antes de sumar- Siguiente: truthy y falsy — qué valores actúan como true o false en condiciones
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior