¿Cómo eliminar los ceros finales después del punto decimal?

Introducción

Cuando formateas números, algunos valores tienen naturalmente ceros finales después del punto decimal. El número 1,5 podría mostrarse como 1,50, o 3 podría mostrarse como 3,00. Estos ceros finales pueden tener sentido para precios donde quieres mostrar los céntimos de forma consistente, pero parecen innecesarios al mostrar estadísticas o mediciones.

El Intl.NumberFormat de JavaScript te da control sobre si aparecen ceros finales. Puedes configurar el formateador para eliminarlos, mantenerlos o aplicar diferentes reglas según tus necesidades.

Qué son los ceros finales

Los ceros finales son ceros que aparecen al final de un número después del punto decimal. No cambian el valor matemático del número, pero afectan cómo se ve el número cuando se muestra.

// These numbers have the same value but different trailing zeros
1.5   // No trailing zeros
1.50  // One trailing zero
1.500 // Two trailing zeros

Los ceros finales pueden aparecer cuando especificas cuántos decimales mostrar. Si un número tiene menos dígitos significativos que el número de decimales que especificaste, el formateador añade ceros para llenar las posiciones restantes.

Cómo muestra Intl.NumberFormat los dígitos fraccionarios por defecto

Por defecto, Intl.NumberFormat muestra hasta 3 dígitos fraccionarios y elimina los ceros finales. Esto significa que la mayoría de los números aparecen sin ceros innecesarios.

const formatter = new Intl.NumberFormat("en-US");

console.log(formatter.format(1.5));
// Output: "1.5"

console.log(formatter.format(1.50));
// Output: "1.5"

console.log(formatter.format(1.123456));
// Output: "1.123"

El formateador trata 1,5 y 1,50 como el mismo valor y los muestra de forma idéntica. Los números con más de 3 decimales se redondean a 3 dígitos.

Establecer los dígitos fraccionarios mínimos y máximos

Las opciones minimumFractionDigits y maximumFractionDigits controlan cuántos dígitos aparecen después del punto decimal. Estas dos opciones trabajan juntas para determinar si aparecen ceros finales.

const formatter = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

console.log(formatter.format(1.5));
// Output: "1.50"

console.log(formatter.format(1));
// Output: "1.00"

console.log(formatter.format(1.234));
// Output: "1.23"

Cuando minimumFractionDigits y maximumFractionDigits se establecen en el mismo valor, cada número se muestra con exactamente esa cantidad de decimales. Los números con menos dígitos obtienen ceros finales añadidos, y los números con más dígitos se redondean.

Eliminar ceros finales

Para eliminar los ceros finales, establece minimumFractionDigits en 0 y maximumFractionDigits en el número máximo de decimales que deseas permitir. Esta configuración le indica al formateador que muestre entre 0 y N decimales, usando solo los necesarios.

const formatter = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 0,
  maximumFractionDigits: 2
});

console.log(formatter.format(1));
// Output: "1"

console.log(formatter.format(1.5));
// Output: "1.5"

console.log(formatter.format(1.50));
// Output: "1.5"

console.log(formatter.format(1.23));
// Output: "1.23"

El formateador muestra números enteros sin punto decimal, números con un decimal tal cual, y elimina cualquier cero final que hubiera aparecido. Los números aún se redondean al número máximo de decimales si lo exceden.

Establecer un mínimo mayor que cero

Puedes establecer minimumFractionDigits en un valor mayor que cero mientras permites que se eliminen los ceros finales. Esto asegura que siempre aparezcan al menos algunos decimales, mientras se eliminan los ceros más allá de ese mínimo.

const formatter = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 1,
  maximumFractionDigits: 3
});

console.log(formatter.format(1));
// Output: "1.0"

console.log(formatter.format(1.5));
// Output: "1.5"

console.log(formatter.format(1.50));
// Output: "1.5"

console.log(formatter.format(1.234));
// Output: "1.234"

console.log(formatter.format(1.2345));
// Output: "1.235"

El número 1 se muestra como 1,0 porque el mínimo es 1 decimal. El número 1,5 se muestra tal cual. El número 1,50 tiene su cero final eliminado. Los números con más de 3 decimales se redondean a 3.

Cuándo mantener ceros finales

Mantén los ceros finales cuando necesites mostrar precisión consistente en todos los números. Esto es común para precios, cantidades financieras y mediciones donde el número de decimales transmite significado.

// Prices should show consistent decimal places
const priceFormatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

console.log(priceFormatter.format(5));
// Output: "$5.00"

console.log(priceFormatter.format(5.5));
// Output: "$5.50"

Los formateadores de moneda usan este enfoque por defecto. Ambas cantidades se muestran con exactamente 2 decimales, facilitando su comparación y reforzando que son valores monetarios.

Cuándo eliminar ceros finales

Elimine los ceros finales al mostrar estadísticas, porcentajes, mediciones o cualquier valor donde los ceros finales no aporten información. Esto crea una salida más limpia y legible.

// Statistics look cleaner without trailing zeros
const statsFormatter = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 0,
  maximumFractionDigits: 2
});

console.log(`Average: ${statsFormatter.format(3.5)} items`);
// Output: "Average: 3.5 items"

console.log(`Total: ${statsFormatter.format(100)} items`);
// Output: "Total: 100 items"

// Percentages often work better without trailing zeros
const percentFormatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  minimumFractionDigits: 0,
  maximumFractionDigits: 1
});

console.log(percentFormatter.format(0.75));
// Output: "75%"

console.log(percentFormatter.format(0.755));
// Output: "75.5%"

Las estadísticas y porcentajes muestran solo los decimales que necesitan. Los números enteros aparecen sin punto decimal, y los números con dígitos decimales significativos los muestran sin ceros finales innecesarios.

Cómo afecta la configuración regional a la visualización de decimales

La posición del punto decimal y los caracteres de agrupación de dígitos varían según la configuración regional, pero las reglas para los ceros finales funcionan de la misma manera en todas las configuraciones regionales. Las opciones minimumFractionDigits y maximumFractionDigits tienen el mismo efecto independientemente de la configuración regional que uses.

const formatterEN = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 0,
  maximumFractionDigits: 2
});

const formatterDE = new Intl.NumberFormat("de-DE", {
  minimumFractionDigits: 0,
  maximumFractionDigits: 2
});

console.log(formatterEN.format(1234.5));
// Output: "1,234.5"

console.log(formatterDE.format(1234.5));
// Output: "1.234,5"

Ambos formateadores eliminan los ceros finales y muestran el número con un decimal. La diferencia es que el formato inglés estadounidense utiliza un punto para el separador decimal y comas para los separadores de miles, mientras que el formato alemán utiliza la convención opuesta.