Cómo formatear números con dígitos significativos

Introducción

Al formatear números para su visualización, a veces necesitas controlar la precisión basándote en cuántos dígitos significativos contiene un número, en lugar de cuántos dígitos aparecen después del punto decimal. Este enfoque se denomina formateo con dígitos significativos.

Los dígitos significativos representan los dígitos en un número que contienen información relevante sobre su precisión. El número 123.45 tiene cinco dígitos significativos. El número 0.00123 tiene tres dígitos significativos, porque los ceros iniciales solo indican magnitud, no precisión.

Esta lección te muestra cómo formatear números usando dígitos significativos en JavaScript. Aprenderás cuándo este enfoque es mejor que controlar los decimales, y cómo usar las opciones minimumSignificantDigits y maximumSignificantDigits con la API Intl.NumberFormat.

Qué son los dígitos significativos

Los dígitos significativos son los dígitos en un número que indican su precisión. Entender qué dígitos son significativos requiere seguir reglas específicas.

Todos los dígitos distintos de cero siempre son significativos. En el número 123, los tres dígitos son significativos. En 45.67, los cuatro dígitos son significativos.

Los ceros iniciales nunca son significativos. Solo indican la posición del punto decimal. En 0.0045, solo el 4 y el 5 son dígitos significativos. El número tiene dos dígitos significativos, no seis.

Los ceros finales después del punto decimal son significativos. Indican que la medición o cálculo fue preciso hasta ese nivel. El número 1.200 tiene cuatro dígitos significativos, mientras que 1.2 tiene solo dos.

Los ceros finales antes del punto decimal dependen del contexto. En el número 1200, no está claro si los ceros son significativos sin información adicional. La notación científica o indicadores explícitos de precisión resuelven esta ambigüedad.

Formatear números con máximo de dígitos significativos

La opción maximumSignificantDigits limita cuántos dígitos significativos aparecen en el resultado formateado. Esta opción es útil cuando deseas mostrar números con una precisión consistente independientemente de su magnitud.

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

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

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

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

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

Cuando el número contiene más dígitos significativos que el máximo, el formateador redondea el número. El redondeo sigue las reglas estándar, redondeando al valor más cercano. Cuando un número cae exactamente a mitad de camino entre dos valores, se redondea al número par más cercano.

La opción maximumSignificantDigits acepta valores de 1 a 21. El valor predeterminado cuando no se especifica esta opción es 21, lo que efectivamente significa sin límite.

const oneDigit = new Intl.NumberFormat("en-US", {
  maximumSignificantDigits: 1,
});

console.log(oneDigit.format(54.33));
// Resultado: "50"

console.log(oneDigit.format(56.33));
// Resultado: "60"

Esta opción funciona con todos los tipos de números, incluyendo enteros, decimales y números en diferentes notaciones.

Formatear números con mínimo de dígitos significativos

La opción minimumSignificantDigits asegura que al menos el número especificado de dígitos significativos aparezca en el resultado formateado. Cuando el número contiene menos dígitos significativos que el mínimo, el formateador añade ceros al final.

const formatter = new Intl.NumberFormat("en-US", {
  minimumSignificantDigits: 5,
});

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

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

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

Esta opción es útil cuando necesitas mostrar números con un nivel consistente de precisión, indicando que las mediciones o cálculos se realizaron con una exactitud específica.

La opción minimumSignificantDigits acepta valores de 1 a 21. El valor predeterminado es 1, lo que significa que los números muestran su precisión natural sin ceros añadidos.

const manyDigits = new Intl.NumberFormat("en-US", {
  minimumSignificantDigits: 10,
});

console.log(manyDigits.format(5));
// Resultado: "5.000000000"

El formateador añade ceros después del punto decimal para alcanzar el mínimo, o añade ceros antes del punto decimal si es necesario.

Combinar dígitos significativos mínimos y máximos

Puedes especificar tanto minimumSignificantDigits como maximumSignificantDigits juntos para crear un rango de precisión aceptable. El formateador mostrará números dentro de este rango.

const formatter = new Intl.NumberFormat("en-US", {
  minimumSignificantDigits: 3,
  maximumSignificantDigits: 5,
});

console.log(formatter.format(1.2));
// Salida: "1.20"
// Expandido para cumplir el mínimo de 3

console.log(formatter.format(1.234));
// Salida: "1.234"
// Dentro del rango, mostrado tal cual

console.log(formatter.format(1.23456789));
// Salida: "1.2346"
// Redondeado para cumplir el máximo de 5

Cuando se combinan estas opciones, el mínimo debe ser menor o igual que el máximo. Si especificas un mínimo mayor que el máximo, el formateador lanza un RangeError.

try {
  const invalid = new Intl.NumberFormat("en-US", {
    minimumSignificantDigits: 5,
    maximumSignificantDigits: 3,
  });
} catch (error) {
  console.log(error.name);
  // Salida: "RangeError"
}

Esta combinación es particularmente útil para aplicaciones científicas o financieras donde quieres imponer tanto un nivel mínimo de precisión como evitar que dígitos excesivos sobrecarguen la visualización.

Cómo los dígitos significativos difieren de los decimales

Los dígitos significativos y los decimales representan dos enfoques diferentes para controlar la precisión numérica. Entender cuándo usar cada enfoque te ayuda a formatear números apropiadamente.

Los decimales controlan cuántos dígitos aparecen después del punto decimal, independientemente de la magnitud del número. Las opciones minimumFractionDigits y maximumFractionDigits implementan este enfoque.

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

console.log(decimalPlaces.format(1.2));
// Salida: "1.20"

console.log(decimalPlaces.format(12.3));
// Salida: "12.30"

console.log(decimalPlaces.format(123.4));
// Salida: "123.40"

Los dígitos significativos controlan cuántos dígitos significativos aparecen en todo el número, adaptándose a la magnitud del número. Números con diferentes magnitudes muestran diferentes cantidades de decimales para mantener una precisión consistente.

const significantDigits = new Intl.NumberFormat("en-US", {
  minimumSignificantDigits: 3,
  maximumSignificantDigits: 3,
});

console.log(significantDigits.format(1.2));
// Salida: "1.20"

console.log(significantDigits.format(12.3));
// Salida: "12.3"

console.log(significantDigits.format(123.4));
// Salida: "123"

Observa cómo el enfoque de dígitos significativos muestra menos decimales a medida que aumenta la magnitud del número, mientras que el enfoque de decimales muestra la misma cantidad de decimales independientemente de la magnitud.

Interacción con opciones de dígitos fraccionarios

Cuando especificas opciones de dígitos significativos, estas tienen prioridad sobre las opciones de dígitos fraccionarios por defecto. El formateador ignora minimumFractionDigits y maximumFractionDigits cuando cualquier opción de dígitos significativos está presente.

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

console.log(formatter.format(1234.56));
// Resultado: "1,230"
// La opción de dígitos significativos tiene prioridad
// Las opciones de dígitos fraccionarios son ignoradas

Este comportamiento está controlado por la opción roundingPriority, que determina cómo el formateador resuelve conflictos entre diferentes configuraciones de precisión. El valor predeterminado es "auto", que da prioridad a los dígitos significativos.

Puedes cambiar este comportamiento estableciendo roundingPriority a "morePrecision" o "lessPrecision", pero estas son opciones avanzadas para casos de uso especializados. Para la mayoría de las aplicaciones, el comportamiento de precedencia predeterminado es apropiado.

Cuándo usar dígitos significativos en lugar de decimales

Elige dígitos significativos cuando necesites una precisión consistente en números con diferentes magnitudes. Este enfoque es común en contextos científicos, de ingeniería y visualización de datos.

Utiliza dígitos significativos para mediciones y cálculos científicos. Los resultados de laboratorio, lecturas de sensores y mediciones físicas a menudo necesitan reflejar la precisión del instrumento de medición. Mostrar tres dígitos significativos de manera consistente comunica precisión independientemente de si la medición es 0.0123, 1.23 o 123.

const measurement = new Intl.NumberFormat("en-US", {
  maximumSignificantDigits: 4,
});

console.log(measurement.format(0.012345));
// Resultado: "0.01235"

console.log(measurement.format(1.2345));
// Resultado: "1.235"

console.log(measurement.format(1234.5));
// Resultado: "1,235"

Utiliza dígitos significativos para métricas de panel que muestran números con magnitudes variables. Al mostrar estadísticas como vistas de página, ingresos o recuentos de usuarios, los dígitos significativos evitan que los números pequeños muestren una precisión excesiva mientras mantienen los números grandes legibles.

const metric = new Intl.NumberFormat("en-US", {
  maximumSignificantDigits: 3,
});

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

console.log(metric.format(123.4));
// Resultado: "123"

console.log(metric.format(12345));
// Resultado: "12,300"

Utiliza decimales para monedas y cantidades financieras donde la parte fraccionaria representa centavos u otras subdivisiones fijas de moneda. Estas cantidades necesitan lugares decimales consistentes independientemente de la magnitud.

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

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

console.log(currency.format(123.5));
// Resultado: "$123.50"

La elección entre estos enfoques depende de si la precisión se relaciona con el número total de dígitos o con un componente fraccionario fijo.