¿Cómo mostrar u ocultar el signo negativo para números negativos?

Controla cuándo aparecen los signos negativos y positivos en números formateados para diferentes contextos

Introducción

Diferentes contextos requieren diferentes representaciones de números negativos. Un panel que muestra cambios de temperatura necesita signos explícitos de más y menos para indicar la dirección. Un gráfico que muestra magnitudes solo se preocupa por los valores absolutos y debería ocultar el signo por completo. Los informes financieros siguen convenciones contables que envuelven cantidades negativas entre paréntesis en lugar de usar signos menos.

La API Intl.NumberFormat de JavaScript proporciona la opción signDisplay para controlar cuándo aparecen los signos en números formateados. Esta opción te da un control preciso sobre la visibilidad del signo para números negativos, números positivos y cero.

Cómo JavaScript formatea los números negativos por defecto

Por defecto, Intl.NumberFormat muestra un signo menos para números negativos y ningún signo para números positivos.

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

formatter.format(-42);
// "-42"

formatter.format(42);
// "42"

formatter.format(0);
// "0"

Este comportamiento predeterminado funciona bien para la mayoría de los casos, pero puedes anularlo cuando tu caso de uso requiere un manejo de signos diferente.

Controlar la visualización de signos con la opción signDisplay

La opción signDisplay acepta cinco valores que controlan cuándo aparecen los signos:

  • "auto": Muestra signos solo para números negativos, incluyendo el cero negativo (predeterminado)
  • "never": Nunca muestra signos
  • "always": Siempre muestra signos tanto para números positivos como negativos
  • "exceptZero": Muestra signos para números positivos y negativos, pero no para cero
  • "negative": Muestra signos solo para números negativos, excluyendo el cero negativo

Pasa la opción signDisplay en el objeto de opciones al crear un formateador.

const formatter = new Intl.NumberFormat('en-US', {
  signDisplay: 'always'
});

Ocultar el signo menos completamente

Usa signDisplay: 'never' para ocultar todos los signos y mostrar solo valores absolutos.

const formatter = new Intl.NumberFormat('en-US', {
  signDisplay: 'never'
});

formatter.format(-100);
// "100"

formatter.format(100);
// "100"

formatter.format(-0);
// "0"

Esta configuración elimina el signo de todos los números, haciendo que -100 y 100 se formateen de manera idéntica. El cero negativo se formatea como "0" sin signo.

Utiliza esta opción cuando muestres magnitudes donde la dirección no importa, como valores de cambio absoluto en visualizaciones de datos, cálculos de distancia o márgenes de error.

const changes = [-15, 23, -8, 42];

const formatter = new Intl.NumberFormat('en-US', {
  signDisplay: 'never'
});

changes.map(change => formatter.format(change));
// ["15", "23", "8", "42"]

Mostrar el signo negativo solo para números negativos

La opción signDisplay: 'auto' es el comportamiento predeterminado. Muestra signos para números negativos pero no para números positivos.

const formatter = new Intl.NumberFormat('en-US', {
  signDisplay: 'auto'
});

formatter.format(-100);
// "-100"

formatter.format(100);
// "100"

formatter.format(-0);
// "-0"

Observe que el cero negativo se muestra como "-0" con esta opción. JavaScript distingue entre cero positivo y cero negativo, lo que puede ocurrir en ciertas operaciones matemáticas.

Utilice signDisplay: 'negative' para ocultar el signo del cero negativo mientras lo mantiene para otros números negativos.

const formatter = new Intl.NumberFormat('en-US', {
  signDisplay: 'negative'
});

formatter.format(-100);
// "-100"

formatter.format(100);
// "100"

formatter.format(-0);
// "0"

La opción negative trata el cero negativo como un caso especial y lo formatea sin signo. Esto evita visualizaciones confusas en contextos donde la distinción entre cero positivo y negativo no es relevante para los usuarios.

Mostrar signos para todos los números excepto cero

Utilice signDisplay: 'exceptZero' para mostrar signos tanto para números positivos como negativos, pero omita el signo cuando el valor es exactamente cero.

const formatter = new Intl.NumberFormat('en-US', {
  signDisplay: 'exceptZero'
});

formatter.format(-100);
// "-100"

formatter.format(100);
// "+100"

formatter.format(0);
// "0"

formatter.format(-0);
// "0"

Los números positivos se muestran con un signo más. Los valores cero, ya sean positivos o negativos, se muestran sin ningún signo.

Esta opción funciona bien para mostrar cambios o deltas donde cero significa ningún cambio. Mostrar "+0" o "-0" sería confuso, pero mostrar "0" hace que el significado sea claro.

const deltas = [5, -3, 0, -0, 12];

const formatter = new Intl.NumberFormat('en-US', {
  signDisplay: 'exceptZero'
});

deltas.map(delta => formatter.format(delta));
// ["+5", "-3", "0", "0", "+12"]

Mostrar signos para todos los números

Usa signDisplay: 'always' para mostrar signos en todos los números, incluyendo números positivos y cero.

const formatter = new Intl.NumberFormat('en-US', {
  signDisplay: 'always'
});

formatter.format(-100);
// "-100"

formatter.format(100);
// "+100"

formatter.format(0);
// "+0"

formatter.format(-0);
// "-0"

Esta configuración añade un signo más a los números positivos y al cero positivo. El cero negativo mantiene su signo menos, haciendo visible la distinción.

Utiliza esta opción cuando necesites enfatizar la dirección para todos los valores, como cambios de temperatura, cambios de elevación, o ganancias y pérdidas financieras.

const temperatures = [-5, 0, 3, -2];

const formatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'celsius',
  signDisplay: 'always'
});

temperatures.map(temp => formatter.format(temp));
// ["-5°C", "+0°C", "+3°C", "-2°C"]

Combinar visualización de signos con formato de moneda

La opción signDisplay funciona con todos los estilos de formato, incluyendo el formato de moneda. Cuando se combina con currencySign: 'accounting', puedes crear formatos que siguen las convenciones contables.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencySign: 'accounting'
});

formatter.format(-1234.56);
// "($1,234.56)"

La notación contable envuelve las cantidades negativas entre paréntesis en lugar de usar un signo menos. Esta convención hace que los números negativos sean visualmente más distintivos en los informes financieros.

Puedes combinar la notación contable con diferentes valores de signDisplay.

const always = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencySign: 'accounting',
  signDisplay: 'always'
});

always.format(1234.56);
// "+$1,234.56"

always.format(-1234.56);
// "($1,234.56)"

const never = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencySign: 'accounting',
  signDisplay: 'never'
});

never.format(-1234.56);
// "$1,234.56"

Con signDisplay: 'always', las cantidades positivas muestran un signo más mientras que las cantidades negativas siguen usando paréntesis. Con signDisplay: 'never', tanto las cantidades positivas como negativas se muestran sin signos ni paréntesis.

Cuándo usar cada opción de visualización de signo

Elige tu valor signDisplay según lo que representen tus números y cómo los usuarios los interpretarán.

Usa signDisplay: 'auto' para el formato estándar de números donde los números negativos necesitan una identificación clara. Este es el valor predeterminado y funciona bien para precios, conteos, medidas y la mayoría de las visualizaciones de números de propósito general.

Usa signDisplay: 'never' cuando muestres valores absolutos o magnitudes donde la dirección no importa. Esto funciona bien para cálculos de distancia, márgenes de error, valores de cambio absolutos y visualizaciones de datos que muestran magnitud sin dirección.

Usa signDisplay: 'negative' cuando quieras un formato estándar de números negativos pero necesites evitar mostrar cero negativo. Esto previene mostrar confusamente "-0" en contextos matemáticos o científicos donde la distinción entre cero positivo y negativo no es significativa para los usuarios.

Usa signDisplay: 'exceptZero' cuando muestres cambios o deltas donde cero significa sin cambio. Esto hace que las ganancias y pérdidas sean claras mientras evita mostrar confusamente "+0" o "-0". Los cambios de temperatura, movimientos de precio de acciones y métricas de rendimiento se benefician de esta opción.

Usa signDisplay: 'always' cuando la dirección importa para todos los valores y quieras enfatizar tanto los aumentos como las disminuciones. Los cambios de temperatura, diferencias de elevación e informes de rendimiento financiero a menudo usan este formato para hacer que los valores positivos y negativos sean igualmente explícitos.

// Precios estándar: usa auto (predeterminado)
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(-50);
// "-$50.00"

// Diferencia absoluta de precio: usa never
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  signDisplay: 'never'
}).format(-50);
// "$50.00"

// Cambio de precio: usa exceptZero
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  signDisplay: 'exceptZero'
}).format(50);
// "+$50.00"

// Cambio de temperatura: usa always
new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'celsius',
  signDisplay: 'always'
}).format(3);
// "+3°C"

La opción signDisplay te da un control preciso sobre cómo aparecen los números positivos y negativos en tu aplicación. Elige el valor que mejor comunique el significado a tus usuarios según el contexto y propósito de cada número que muestres.