JavaScript
Explica la conversión explícita y la coerción automática entre strings, números y booleanos, con validación de formularios y parámetros de URL.
Convertir un tipo significa transformar un valor para trabajar con él de otra manera. En JavaScript puede ocurrir de forma explícita, cuando el código lo solicita, o implícita, cuando el lenguaje lo hace automáticamente.
const input = "25";
const age = Number(input);
console.log(age); // 25
console.log(typeof age); // "number"La conversión explícita ocurre cuando expresamos claramente el tipo que necesitamos.
String(25); // "25"
String(true); // "true"
String(null); // "null"
String(undefined); // "undefined"También puede utilizarse .toString() cuando el valor no es null ni undefined:
const price = 120;
price.toString(); // "120"String(value) suele ser más seguro porque también admite null y undefined.
Number("25"); // 25
Number("25.5"); // 25.5
Number(""); // 0
Number(" "); // 0
Number(true); // 1
Number(false); // 0
Number(null); // 0
Number(undefined); // NaN
Number("hola"); // NaNEl resultado debe validarse cuando el valor proviene del usuario:
function parseAge(input) {
const age = Number(input);
if (!Number.isInteger(age) || age < 0) {
throw new Error("La edad debe ser un número entero válido");
}
return age;
}Estas funciones leen un número desde el principio de un string y se detienen cuando encuentran contenido no numérico.
parseInt("42px", 10); // 42
parseFloat("19.95 USD"); // 19.95En cambio:
Number("42px"); // NaNUsa Number cuando todo el texto debe representar un número. Usa parseInt o parseFloat cuando el formato incluye una unidad conocida que necesitas separar.
Siempre indica la base al usar parseInt:
parseInt("101", 2); // 5
parseInt("101", 10); // 101Boolean(1); // true
Boolean(0); // false
Boolean("hola"); // true
Boolean(""); // false
Boolean([]); // true
Boolean({}); // true
Boolean(null); // falseLa conversión a boolean se conecta con los valores truthy y falsy, que se estudian en la siguiente nota.
La coerción ocurre cuando JavaScript convierte tipos automáticamente para poder ejecutar una operación.
"5" + 2; // "52"
"5" - 2; // 3El operador + también concatena strings. Si uno de sus operandos se convierte en string, el resultado puede ser texto.
"Total: " + 25; // "Total: 25"Los demás operadores aritméticos intentan convertir los valores a números:
"10" - 3; // 7
"10" * 2; // 20
"10" / 2; // 51 + true; // 2
1 + false; // 1
null + 1; // 1
undefined + 1; // NaN
[] + []; // ""
[] + {}; // "[object Object]"No es necesario memorizar cada combinación extraña. Lo importante es reconocer que mezclar tipos puede producir resultados difíciles de leer y mantener.
Los valores de un input HTML llegan como strings, incluso cuando el campo es numérico.
const quantityInput = "3";
const unitPrice = 50;
console.log(quantityInput * unitPrice); // 150Este resultado funciona por coerción, pero depende de comportamiento implícito.
Es mejor convertir y validar:
const quantity = Number(quantityInput);
if (!Number.isInteger(quantity) || quantity <= 0) {
throw new Error("La cantidad debe ser un entero mayor que cero");
}
const total = quantity * unitPrice;const params = new URLSearchParams("page=2&limit=20");
const page = Number(params.get("page"));
const limit = Number(params.get("limit"));URLSearchParams.get devuelve un string o null, por lo que convertir y validar evita errores silenciosos.
function parsePositiveInteger(value, fallback) {
const number = Number(value);
return Number.isInteger(number) && number > 0
? number
: fallback;
}
const page = parsePositiveInteger(params.get("page"), 1);Convertir cambia la representación de un valor:
Number("42"); // 42Transformar produce un valor nuevo aplicando una regla del dominio:
const priceInCents = Math.round(Number("19.95") * 100); // 1995Primero convertimos el texto a número; después transformamos el monto a centavos.
const price = Number("producto"); // NaNparseInt("12.99", 10); // 12Number(null); // 0Si null significa “no existe precio”, convertirlo a cero cambia el significado del dato.
function parsePrice(value) {
if (value === null || value === undefined || value === "") {
return null;
}
const price = Number(value);
if (!Number.isFinite(price)) {
throw new Error("Precio inválido");
}
return price;
}Number exige que todo el texto sea numérico.parseInt y parseFloat pueden leer números al inicio de un string.null o undefined sin pensar en su significado.Predice los resultados:
Number("20");
Number("20px");
parseInt("20px", 10);
"10" + 5;
"10" - 5;
Boolean("false");
Boolean("");Number("20"); // 20
Number("20px"); // NaN
parseInt("20px", 10); // 20
"10" + 5; // "105"
"10" - 5; // 5
Boolean("false"); // true, porque es un string no vacío
Boolean(""); // falseTruthy y falsy explica cómo JavaScript interpreta cualquier valor dentro de una condición.