¿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 más y menos explícitos para indicar dirección. Un gráfico que muestra magnitudes solo se preocupa por valores absolutos y debe 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 le brinda un control preciso sobre la visibilidad del signo para números negativos, positivos y cero.

Cómo JavaScript formatea 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 requiera un manejo diferente de signos.

Controla 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 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 cero negativo

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

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

Oculta el signo negativo completamente

Utilice 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 forma idéntica. El cero negativo se formatea como "0" sin signo.

Usa 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 menos 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 cual 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 importa para los usuarios.

Mostrar signos para todos los números excepto cero

Usa signDisplay: 'exceptZero' para mostrar signos tanto para números positivos como negativos, pero omite 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 para 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.

Utilice esta opción cuando necesite 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"]

Combine la visualización de signos con el 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 más visualmente distintos 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 signos

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

Usa signDisplay: 'auto' para el formato estándar de números donde los números negativos necesitan una identificación clara. Este es el predeterminado y funciona bien para precios, conteos, mediciones y la mayoría de 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 absoluto y visualizaciones de datos que muestran magnitud sin dirección.

Utilice signDisplay: 'negative' cuando desee el formato estándar de números negativos pero necesite 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.

Utilice signDisplay: 'exceptZero' cuando muestre 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 precios de acciones y métricas de rendimiento se benefician de esta opción.

Utilice signDisplay: 'always' cuando la dirección importa para todos los valores y desee 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.

// Standard pricing: use auto (default)
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(-50);
// "-$50.00"

// Absolute price difference: use never
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  signDisplay: 'never'
}).format(-50);
// "$50.00"

// Price change: use exceptZero
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  signDisplay: 'exceptZero'
}).format(50);
// "+$50.00"

// Temperature change: use always
new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'celsius',
  signDisplay: 'always'
}).format(3);
// "+3°C"

La opción signDisplay le proporciona un control preciso sobre cómo aparecen los números positivos y negativos en su aplicación. Elija el valor que mejor comunique el significado a sus usuarios según el contexto y propósito de cada número que muestre.