¿Vas a sumar importes de inputs de formulario. Qué paso evita bug clásico?

Inputs suelen llegar como string; validar tipo evita concatenacin accidental.

Strings y números sin sorpresas: parseo, formato y precisión

Aprende a convertir y formatear datos de formularios y APIs sin caer en coerciones accidentales ni errores de redondeo, con un flujo de trabajo robusto para frontend real.

¿Cuánto sabes de JavaScript?

📘 Teoría

Modelo mental: entrada, conversión, validación y salida

No mezcles responsabilidades: primero interpreta, luego calcula, después formatea.

Piensa en cuatro pasos: (1) recibes dato crudo, casi siempre string; (2) lo conviertes al tipo correcto; (3) validas que sea utilizable; (4) lo formateas para mostrarlo al usuario.

Separar estas fases evita meter Number(...) en cualquier sitio y te permite depurar más rápido cuando una pantalla muestra un total raro.

Entrada

Dato sin confianza todavía.

'19.99' desde input
'1,250.40' desde API legacy

Conversión

Transformar a tipo de trabajo.

String(valor)
Number(valor) o parseFloat(valorLimpio)

Validación

Comprobar que no hay basura.

Number.isFinite(numero)
Rangos de negocio

Salida

Presentar sin romper UX.

Intl.NumberFormat para moneda
Template literals para texto

Parseo seguro de datos numéricos

Convertir no es suficiente: hay que limpiar y validar.

Number('') devuelve 0, lo que puede introducir falsos positivos en formularios. Por eso conviene limpiar y tratar casos vacíos explícitamente.

Cuando viene separador de miles, limpia primero el string (por ejemplo quitando comas) y después parsea. Si el resultado no es finito, corta el flujo con mensaje claro.

Number() es estricto: útil cuando esperas todo el string válido.
parseFloat() acepta prefijos numéricos: úsalo con cuidado.
Valida siempre con Number.isFinite() antes de operar.

Función robusta para importe

function parseImporte(raw) {
  const texto = String(raw).trim();

  if (!texto) return null;

  const normalizado = texto.replace(/,/g, '');
  const numero = Number(normalizado);

  if (!Number.isFinite(numero)) return null;
  return numero;
}

console.log(parseImporte(' 1,250.40 ')); // 1250.4
console.log(parseImporte('abc')); // null

Formatear para usuario sin perder precisión de cálculo

Calcula con números, presenta con formato humano.

No uses el valor formateado para seguir calculando. El formato es solo capa de presentación. Primero calcula con números puros; al final conviertes a string para UI.

Intl.NumberFormat es preferible a concatenar símbolos manualmente porque respeta idioma, separadores y moneda.

Formato de moneda en español

const monedaES = new Intl.NumberFormat('es-ES', {
  style: 'currency',
  currency: 'EUR'
});

const subtotal = 1234.5;
const iva = subtotal * 0.21;
const total = subtotal + iva;

console.log(`Subtotal: ${monedaES.format(subtotal)}`);
console.log(`IVA: ${monedaES.format(iva)}`);
console.log(`Total: ${monedaES.format(total)}`);

Precisión decimal: por qué 0.1 + 0.2 da guerra

JavaScript usa coma flotante binaria; hay que saber convivir con ello.

Operaciones como 0.1 + 0.2 pueden producir 0.30000000000000004. No es bug de tu app: es representación interna de floating point.

Para dinero, estrategia clásica: trabajar en céntimos enteros y solo formatear al final. Para redondeos puntuales, añade Number.EPSILON antes de Math.round.

Céntimos enteros y redondeo estable

const precioA = 10.1;
const precioB = 20.2;

const totalCentimos = Math.round(precioA * 100) + Math.round(precioB * 100);
const total = totalCentimos / 100;

const redondeo2 = (n) => Math.round((n + Number.EPSILON) * 100) / 100;

console.log(total); // 30.3
console.log(redondeo2(1.005)); // 1.01

Errores comunes y cómo depurarlos rápido

Depurar datos mixtos es más sencillo cuando registras tipo y valor juntos.

Cuando algo no cuadra en un cálculo, loguea typeof, valor original y valor convertido en la misma traza. Eso reduce muchísimo el tiempo de diagnóstico.

Evita corregir a ciegas: primero identifica en qué fase falla (entrada, conversión, validación o salida).

Traza mínima útil

function auditar(raw) {
  const convertido = Number(String(raw).trim());
  console.log({ raw, tipoRaw: typeof raw, convertido, tipoConvertido: typeof convertido });
}

auditar(' 42 ');
auditar('42px');

1 Modelo mental: entrada, conversión, validación y salida 2 Parseo seguro de datos numéricos 3 Formatear para usuario sin perder precisión de cálculo 4 Precisión decimal: por qué 0.1 + 0.2 da guerra 5 Errores comunes y cómo depurarlos rápido

🧪 Aprende probando

Ejemplo Ejemplo guiado: total de checkout con datos de formulario Convierte precio y cantidad desde strings, valida y calcula subtotal/IVA/total con salida lista para UI.

⌄

Ejemplo Ejemplo guiado: normalizar etiquetas y porcentajes Limpia strings de producto, convierte descuento textual a número y genera texto de salida consistente.

⌄

Ejemplo Demo interactiva: calculadora de pedido con validación Introduce precio, cantidad y descuento. La demo limpia datos, calcula y te avisa cuando la entrada no es válida.

⌄

🏁 Retos

Reto Reto 1: parser de precio robusto Implementa una función que convierta texto a número y devuelva `null` cuando no sea válido.

⌄

Reto Reto 2: total con descuento y formato final Calcula subtotal, descuento y total con números válidos y muestra un mensaje formateado para interfaz.

⌄

🧰 Recursos

Enlaces útiles

MDN: String MDN: Number javascript.info: Type Conversions MDN: parseFloat MDN: Intl.NumberFormat MDN: Number.EPSILON

Test

Comprueba tus conocimientos con un test sobre JavaScript.

Test de JavaScript

Recursos del curso 62

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 18

Métodos de array en producción: map, filter y reduce con criterio

Lección 20

Fechas e internacionalización con Intl

›