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

Introducción

Al formatear números para mostrar, 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 llama formateo con dígitos significativos.

Los dígitos significativos representan los dígitos en un número que contienen información significativa 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 son siempre 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 el 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 los indicadores de precisión explícitos resuelven esta ambigüedad.

Formatear números con dígitos significativos máximos

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

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

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

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

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

console.log(formatter.format(1234.5));
// Output: "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 de redondeo, redondeando al valor más cercano. Cuando un número cae exactamente a medio camino entre dos valores, redondea al número par más cercano.

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

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

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

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

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

Formatear números con dígitos significativos mínimos

La opción minimumSignificantDigits garantiza que al menos el número especificado de dígitos significativos aparezca en la salida formateada. Cuando el número contiene menos dígitos significativos que el mínimo, el formateador añade ceros finales.

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

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

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

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

Esta opción es útil cuando necesitas mostrar números con un nivel consistente de precisión, mostrando que las mediciones o cálculos se realizaron con una precisión 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));
// Output: "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));
// Output: "1.20"
// Expanded to meet minimum of 3

console.log(formatter.format(1.234));
// Output: "1.234"
// Within range, displayed as-is

console.log(formatter.format(1.23456789));
// Output: "1.2346"
// Rounded to meet maximum of 5

Al combinar 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);
  // Output: "RangeError"
}

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

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

Los dígitos significativos y los decimales representan dos enfoques diferentes para controlar la precisión de los números. Comprender cuándo usar cada enfoque te ayuda a formatear los números de manera apropiada.

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));
// Output: "1.20"

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

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

Los dígitos significativos controlan cuántos dígitos significativos aparecen en el número completo, adaptándose a la magnitud del número. Los 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));
// Output: "1.20"

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

console.log(significantDigits.format(123.4));
// Output: "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 las 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 está presente cualquier opción de dígitos significativos.

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

console.log(formatter.format(1234.56));
// Output: "1,230"
// Significant digits option takes precedence
// Fraction digit options are ignored

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 por defecto es "auto", que da prioridad a los dígitos significativos.

Puedes cambiar este comportamiento estableciendo roundingPriority en "morePrecision" o "lessPrecision", pero estas son opciones avanzadas para casos de uso especializados. Para la mayoría de las aplicaciones, el comportamiento de prioridad por defecto 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 de visualización de datos.

Usa dígitos significativos para mediciones y cálculos científicos. Los resultados de laboratorio, las lecturas de sensores y las mediciones físicas a menudo necesitan reflejar la precisión del instrumento de medición. Mostrar tres dígitos significativos de forma consistente comunica la 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));
// Output: "0.01235"

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

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

Usa dígitos significativos para métricas de panel que muestren 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));
// Output: "1.23"

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

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

Usa decimales para montos monetarios y financieros donde la parte fraccionaria representa centavos u otras subdivisiones monetarias fijas. Estos montos necesitan 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));
// Output: "$1.50"

console.log(currency.format(123.5));
// Output: "$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.