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

Introducción

Cuando formateas números, algunos valores naturalmente tienen 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 centavos de manera consistente, pero parecen innecesarios cuando muestras estadísticas o mediciones.

El Intl.NumberFormat de JavaScript te da control sobre si aparecen los 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.

// Estos números tienen el mismo valor pero diferentes ceros finales
1.5   // Sin ceros finales
1.50  // Un cero final
1.500 // Dos ceros finales

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 Intl.NumberFormat muestra los dígitos decimales por defecto

Por defecto, Intl.NumberFormat muestra hasta 3 dígitos decimales 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));
// Resultado: "1.5"

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

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

El formateador trata 1.5 y 1.50 como el mismo valor y los muestra de manera idéntica. Los números con más de 3 decimales se redondean a 3 dígitos.

Establecer los dígitos de fracción 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));
// Resultado: "1.50"

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

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

Cuando minimumFractionDigits y maximumFractionDigits se establecen con el mismo valor, cada número se muestra con exactamente esa cantidad de decimales. Los números con menos dígitos reciben 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 a 0 y maximumFractionDigits al número máximo de decimales que quieres permitir. Esta configuración indica al formateador que muestre entre 0 y N decimales, utilizando solo los necesarios.

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

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

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

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

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

El formateador muestra números enteros sin punto decimal, números con un decimal tal como son, y elimina cualquier cero final que hubiera aparecido. Los números siguen redondeándose al máximo de decimales si lo exceden.

Establecer un mínimo mayor que cero

Puedes establecer minimumFractionDigits a 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));
// Resultado: "1.0"

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

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

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

console.log(formatter.format(1.2345));
// Resultado: "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. Al número 1.50 se le elimina el cero final. 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 una 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 un significado.

// Los precios deben mostrar lugares decimales consistentes
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 utilizan este enfoque por defecto. Ambas cantidades se muestran con exactamente 2 decimales, lo que facilita su comparación y refuerza que son valores monetarios.

Cuándo eliminar ceros finales

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

// Las estadísticas se ven más limpias sin ceros finales
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"

// Los porcentajes suelen funcionar mejor sin ceros finales
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 puntos decimales, 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 decimal

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 utilices.

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 en inglés estadounidense utiliza un punto para el punto decimal y comas para los separadores de miles, mientras que el formato alemán utiliza la convención opuesta.