Conversión de tipos — Number / String / parseInt y conversión implícita

Una cantidad escrita en un campo de entrada, o un importe enterrado en datos de una fuente externa. Aunque estos se vean iguales en pantalla — ambos 1200 — si JavaScript lo guarda como una cadena o como un número cambia lo que un cálculo hace con él.

Este artículo cubre dos cosas: la conversión de tipos explícita (cambiar tú mismo el tipo de un valor llamando a algo como Number), y la conversión de tipos implícita (los operadores igualando tipos automáticamente antes de calcular).

Comprobar el tipo actual — typeof

Igualar tipos empieza por saber qué tipo ya tiene algo. Errores como un total desviado, o una comparación que no sale como esperabas, normalmente se rastrean hasta un valor que asumiste que era un número y resultó ser una cadena.

Primero, veamos cómo comprobar el tipo de un valor en el momento.

Pon typeof (un operador que devuelve el nombre del tipo de un valor como cadena) delante de un valor, y obtienes su tipo. typeof 1200 es "number", y typeof "1200" es "string".

Lo que vuelve no es el tipo en sí — es una cadena que nombra el tipo — así que al usarlo en una comprobación, compáralo contra una cadena entre comillas, como en typeof price === "number".

const orderId = "A-1042";   // número de pedido

console.log(typeof orderId);   // string
console.log(typeof 500);       // number
console.log(typeof true);      // boolean

// También funciona con resultados de expresiones, no solo variables
console.log(typeof (500 + 100));            // number
console.log(typeof (500 > 100));            // boolean
console.log(typeof `Order ${orderId}`);      // string

Comprueba el tipo de 3 valores que llegan de una pantalla de edición de producto. inputPrice / stockCount / isPublished ya están declarados.

① Muestra el tipo de inputPrice.

② Muestra el tipo de stockCount.

③ Muestra el tipo de isPublished.

④ Comprueba y muestra si inputPrice NO es del tipo number.

(Si se ejecuta correctamente, aparecerá una explicación.)

Conversión implícita — solo + se vuelve concatenación de cadenas

Calcula con valores de tipos distintos, y JavaScript no se detiene con un error. El operador iguala los tipos primero, y luego simplemente sigue adelante.

El mismo comportamiento que viste hacer a == antes de comparar aparece también en los operadores aritméticos. Como nunca se detiene, no notarás el desajuste hasta que veas el resultado.

El truco es que + hace una elección distinta a los demás operadores. + elige la concatenación de cadenas si cualquiera de los lados es una cadena. El lado numérico se convierte a cadena, así que "3" + 1 se convierte en "31".

- * / %, en cambio, no tienen ningún significado para unir cadenas, así que convierten el lado de cadena a número y calculan.

Si un campo de total muestra dos importes uno al lado del otro, es señal de que se sumaron antes de convertirse.

const inputQuantity = "3";   // valor del campo de cantidad (string)

// Solo con la salida no puedes distinguir el número 31 del string "31" — usa typeof abajo
console.log(inputQuantity + 1);   // 31   unido como el string "31"
console.log(inputQuantity - 1);   // 2    convertido a número antes de restar
console.log(inputQuantity * 2);   // 6    la multiplicación también convierte
console.log(inputQuantity / 3);   // 1    la división también convierte

// typeof confirma que solo el resultado de + tiene un tipo distinto
console.log(typeof (inputQuantity + 1));   // string
console.log(typeof (inputQuantity - 1));   // number

Trata los valores externos como cadenas

Los números de un campo de entrada, o enterrados en datos de una fuente externa, normalmente llegan como cadenas. Si una suma que pretendías como 1200 + 300 aparece como "1200300" uno al lado del otro, es señal de que un lado siguió siendo una cadena. Conviértelo a número antes de sumar.

Conversión explícita — Number / String / Boolean

Dejar la conversión en manos del operador significa que la dirección en la que convierte está fija por operador, así que tu propia intención no se ve en el código. Iguala los tipos tú mismo antes de un cálculo, y el resultado se vuelve más fácil de seguir.

JavaScript proporciona una función de conversión para cada tipo.

Number(value) convierte a número, String(value) a cadena, y Boolean(value) a booleano — cada una devuelve un valor nuevo. La variable original no cambia.

Boolean sigue exactamente las reglas de falsy: "" y 0 se vuelven false, y una cadena no vacía se vuelve true. Ten en cuenta que Number("") devuelve 0, no NaN, así que convertir un campo en blanco directamente a número lo trata como un importe de 0.

const inputQuantity = "3";   // valor del campo de cantidad
const shippingFee = 500;     // costo de envío (number)

console.log(Number(inputQuantity));         // 3     string a number
console.log(Number(inputQuantity) + 1);     // 4     la suma ya funciona como number
console.log(String(shippingFee));           // 500   number a string
console.log(typeof String(shippingFee));    // string

console.log(Boolean("Tokyo"));   // true    una cadena no vacía
console.log(Boolean(""));        // false   una cadena vacía es falsy
console.log(Number(""));         // 0       una cadena vacía se vuelve 0

// La variable original sigue siendo un string incluso tras convertir
console.log(typeof inputQuantity);   // string

Calcula el subtotal de un carrito a partir de una cantidad que llegó de un campo de entrada y un precio unitario. inputQuantity / unitPrice / inputCoupon ya están declaradas.

① Muestra el resultado de convertir inputQuantity a número.

② Calcula y muestra el subtotal a partir del número de ① y unitPrice.

③ Muestra el tipo que obtienes al convertir el subtotal de ② a cadena.

④ Muestra el resultado de convertir el campo de cupón vacío, inputCoupon, a booleano.

Conversiones fallidas — NaN y Number.isNaN

Pásale a Number una cadena que no se pueda convertir en número, y JavaScript no lanza un error. En su lugar devuelve NaN (un valor que significa que el resultado no pudo convertirse en número) y simplemente sigue con el siguiente cálculo.

Por eso un campo de importe con un carácter de ancho completo o una coma mezclada puede dejar un total mostrando NaN hasta llegar a la pantalla. Después de convertir, tienes que comprobar tú mismo si realmente funcionó.

Escribir total === NaN no funciona como comprobación aquí. NaN ni siquiera es igual a sí mismo, así que el resultado siempre es false.

typeof NaN también devuelve "number", así que el tipo tampoco lo distingue. Usa Number.isNaN (una función que devuelve si el valor que le pasas es NaN) para la comprobación en su lugar.

const inputAmount = "1,200";   // un importe escrito con una coma

console.log(Number(inputAmount));         // NaN   una coma no se puede convertir
console.log(Number(inputAmount) + 500);   // NaN   un cálculo después de eso sigue siendo NaN

// Ni la comparación ni el tipo pueden distinguirlo
console.log(Number(inputAmount) === NaN);   // false
console.log(typeof NaN);                    // number

// Usa la función dedicada para comprobar
console.log(Number.isNaN(Number(inputAmount)));   // true

Comprueba si un valor escrito en un campo de importe se puede tratar como número, y muestra un mensaje solo cuando no se pueda. inputAmount / validAmount ya están declaradas.

① Muestra el resultado de convertir inputAmount a número.

② Comprueba y muestra si el resultado de ① es una conversión fallida.

③ Ejecuta la misma comprobación sobre validAmount y muestra el resultado.

④ Solo cuando la conversión de inputAmount haya fallado, muestra "Please enter the amount as a number."

Leer una cadena que empieza por un número — parseInt y parseFloat

A veces te dan una cadena como "240px" o "12.5%" — dígitos seguidos de una unidad. Number lee la cadena entera como número, así que el texto de unidad sobrante convierte el resultado en NaN.

Cuando solo quieres los dígitos iniciales, usa una función distinta.

parseInt (una función que saca, desde el principio, todo lo que se pueda leer como entero) saca 240 de "240px". El 10 que le pasas como segundo argumento significa "léelo usando los dígitos base-10 habituales, del 0 al 9". Puedes omitirlo, pero escribirlo deja clara tu intención a quien lo lea.

Cuando quieras leer hasta el punto decimal también, usa parseFloat (una función que saca, desde el principio, todo lo que se pueda leer como decimal). Ambas devuelven NaN si no hay nada leíble como número justo al principio.

const cardWidth = "240px";   // ancho leído de un valor de estilo

console.log(Number(cardWidth));         // NaN    no puede convertir todo entero
console.log(parseInt(cardWidth, 10));   // 240    solo lo leíble desde el principio

console.log(parseFloat("12.5%"));       // 12.5   lee hasta el punto decimal
console.log(parseInt("12.5%", 10));     // 12     leer como entero descarta el decimal

// No se lee nada si no empieza por un dígito
console.log(parseInt("about 240px", 10));   // NaN

Leer solo el inicio puede esconder un truncamiento silencioso

parseInt se detiene en cuanto ya no puede leer más. El "1,200" separado por comas se convierte en 1, y "12.5" se convierte en 12. Ninguno da error, así que usa Number para valores como un importe donde necesitas leerlo entero, y reserva parseInt para cadenas con una unidad pegada.

Saca solo la parte numérica de un valor de estilo y de una cadena para mostrar. cardWidth / discountText ya están declaradas.

① Muestra el resultado de convertir cardWidth a número, como cadena completa.

② Saca la parte numérica de cardWidth como entero y muéstrala.

③ Saca la parte numérica de discountText como decimal y muéstrala.

④ Muestra el valor de ② duplicado.