AD

¿Ya dominas lo básico? Un curso estructurado de JavaScript es la vía rápida para dar el salto.

Ver cursos de JavaScript en Udemy

Enlace de afiliado. No te cuesta nada extra.

🟨Lecciones de JavaScript
Lección 50 / 69

Dar formato a números (alinear dígitos y decimales)

En esta lección aprenderás a dar formato a números para producir salidas limpias y alineadas: precios, nombres de archivo numerados, etc. Está dirigida a quien busca «uso de toFixed en JavaScript» o «rellenar con ceros en JavaScript».

.toFixed(dígitos) alinea el número de decimales, y .padStart(longitud, "0") rellena el principio de un número con ceros hasta alinear los dígitos. Ambos resultan cómodos para mostrar precios o generar nombres de archivo numerados. Ten en cuenta además que .toFixed() devuelve una cadena, no un número.

El código de ejemplo convierte el número 1234.5 en la cadena "1234.50", alineada a 2 decimales, con .toFixed(2), y convierte el número 7 en cadena y después en la cadena de 3 dígitos "007" con .padStart(3, "0"). Recuerda también que padStart es un método exclusivo de cadenas, así que no se puede aplicar directamente a un número.

Un tropiezo habitual al empezar es que, como el resultado de .toFixed() es una cadena, intentar usarlo directamente en otro cálculo provoca errores o fallos. Un valor formateado para mostrar es estrictamente «una cadena para enseñar»: para seguir calculando hay que usar el número original.

Mostrar un resultado en bruto suele producir cantidades de dígitos irregulares y difíciles de leer, así que en el trabajo real lo habitual es insertar este formato justo antes de mostrar algo en pantalla. Es un paso pequeño para pulir la apariencia, pero una parte importante que influye mucho en la calidad de la experiencia del usuario.

JavaScript
SALIDA

💡 Todo lo que pases a console.log() aparece en la salida de abajo.

Espacio publicitario (banner)
Espacio publicitario (en el artículo)