Cómo mostrar el signo más para números positivos

Introducción

Cuando muestras un número como 5 en una aplicación meteorológica que indica cambios de temperatura, los usuarios no pueden determinar si representa una temperatura absoluta de 5 grados o un cambio de más 5 grados. La ausencia del signo más crea ambigüedad. Al mostrar explícitamente el signo más como +5, comunicas que el valor representa un aumento en lugar de una medición neutral.

Esta distinción es importante cuando se muestran cambios, diferencias o deltas. Los cambios en el precio de las acciones, los ajustes del saldo de la cuenta, las diferencias de puntuación y las variaciones de temperatura se benefician de los signos más explícitos que aclaran la dirección del cambio. La función Intl.NumberFormat de JavaScript proporciona la opción signDisplay para controlar cuándo aparecen los signos más y menos.

Cómo se muestran los números por defecto

Por defecto, JavaScript solo muestra un signo menos para los números negativos. Los números positivos y el cero se muestran sin ningún signo.

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

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

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

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

Este comportamiento predeterminado funciona bien para valores absolutos como precios, cantidades o mediciones. Sin embargo, cuando necesitas mostrar un cambio o diferencia, la ausencia de un signo más hace que los valores positivos sean ambiguos.

Considera mostrar cambios diarios de temperatura. Sin signos explícitos, los usuarios ven números como 3 y 5, que podrían interpretarse como temperaturas absolutas en lugar de cambios. Con signos explícitos como +3 y +5, el significado se vuelve claro.

Uso de signDisplay para mostrar signos más

La opción signDisplay en Intl.NumberFormat controla cuándo mostrar signos para los números. Configura signDisplay como "always" para mostrar tanto signos más como menos.

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

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

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

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

Ahora los números positivos se muestran con un signo más, los números negativos se muestran con un signo menos, y el cero se muestra con un signo más. Este formato funciona bien para mostrar cambios donde el signo tiene un significado importante.

Entendiendo todos los valores de signDisplay

La opción signDisplay acepta cinco valores. Cada valor sirve para un propósito específico dependiendo de cómo quieras manejar los signos para valores positivos, negativos y cero.

valor auto para el comportamiento predeterminado de signos

El valor "auto" es el comportamiento predeterminado. Muestra el signo menos para números negativos incluyendo el cero negativo, pero ningún signo para números positivos o cero positivo.

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

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

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

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

Utiliza "auto" cuando muestres valores absolutos donde la ausencia de un signo implica un valor positivo. Este es el formato estándar para precios, conteos y mediciones.

valor always para mostrar todos los signos

El valor "always" muestra signos para todos los números, incluyendo positivos, negativos y cero.

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

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

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

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

Utiliza "always" cuando muestres cambios o deltas donde cero representa ningún cambio. El signo más en cero aclara que cero es un valor neutral en lugar de un valor faltante.

valor exceptZero para ocultar el signo del cero

El valor "exceptZero" muestra signos para números positivos y negativos pero omite el signo para cero.

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

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

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

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

Utiliza "exceptZero" cuando cero representa un estado especial que debe ser visualmente distinto de los valores positivos y negativos. Por ejemplo, cuando muestras cambios de puntuación donde cero significa que no ocurrió ningún cambio.

valor negativo para mostrar solo signos negativos

El valor "negative" muestra el signo negativo solo para números negativos, excluyendo el cero negativo. Los números positivos y el cero se muestran sin signos.

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

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

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

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

Utiliza "negative" cuando quieras destacar valores negativos mientras tratas los valores positivos y el cero de manera neutral. Esto funciona bien para saldos de cuentas donde los valores negativos representan deuda.

valor never para ocultar todos los signos

El valor "never" muestra números sin ningún signo, incluso para números negativos.

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

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

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

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

Utiliza "never" cuando necesites mostrar el valor absoluto de un número independientemente de su signo. Esto es útil para mostrar magnitudes donde la dirección ya se ha comunicado a través de otros medios como colores o iconos.

Cuándo usar cada opción de signDisplay

Elige el valor de signDisplay según lo que represente el número y cómo los usuarios necesiten interpretarlo.

Utiliza "always" para cambios, diferencias o deltas donde el signo indica dirección. Los cambios de temperatura, movimientos de precios de acciones y diferencias de puntuación necesitan signos explícitos para mostrar si los valores aumentaron o disminuyeron.

Utiliza "exceptZero" para cambios donde cero representa ningún cambio y debe ser visualmente neutral. Esto ayuda a que el cero destaque como un caso especial que no significa ni aumento ni disminución.

Utiliza "auto" para valores absolutos donde el número representa una cantidad o medida en lugar de un cambio. Precios, distancias, pesos y recuentos funcionan con la visualización de signo predeterminada.

Utiliza "negative" para valores donde los números negativos requieren atención especial pero los números positivos son normales. Los saldos de cuentas y cálculos de beneficios a menudo destacan las deudas mientras tratan los saldos positivos como estándar.

Utiliza "never" para magnitudes absolutas donde la dirección se comunica por separado. Cuando el color o los iconos ya indican positivo o negativo, eliminar el signo evita información redundante.

Mostrando signos más con monedas

El formateo de moneda funciona con signDisplay para mostrar cambios en cuentas y montos de transacciones con signos explícitos.

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

console.log(formatter.format(250.50));
// Output: "+$250.50"

console.log(formatter.format(-75.25));
// Output: "-$75.25"

console.log(formatter.format(0));
// Output: "+$0.00"

Este formato muestra claramente si una transacción añadió o retiró dinero de una cuenta. El signo más hace que los depósitos sean explícitos en lugar de implícitos.

Puedes combinar el formateo de moneda con exceptZero para distinguir cuando no hay cambios de transacciones positivas o negativas.

const formatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  signDisplay: "exceptZero"
});

console.log(formatter.format(250.50));
// Output: "+$250.50"

console.log(formatter.format(-75.25));
// Output: "-$75.25"

console.log(formatter.format(0));
// Output: "$0.00"

Ahora el cero aparece sin signo, haciéndolo visualmente distinto de ganancias o pérdidas reales.

Mostrando signos más con porcentajes

Los cambios porcentuales frecuentemente necesitan signos explícitos para mostrar si los valores aumentaron o disminuyeron.

const formatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  signDisplay: "always",
  minimumFractionDigits: 1,
  maximumFractionDigits: 1
});

console.log(formatter.format(0.0523));
// Output: "+5.2%"

console.log(formatter.format(-0.0341));
// Output: "-3.4%"

console.log(formatter.format(0));
// Output: "+0.0%"

Este formato funciona bien para mostrar tasas de crecimiento, tasas de interés o cambios de rendimiento. El signo más indica explícitamente un crecimiento positivo en lugar de dejar que los usuarios lo infieran.

Cuando se muestran cambios porcentuales en contextos donde el cero es significativo, usa exceptZero para hacer que el cero sea visualmente neutral.

const formatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  signDisplay: "exceptZero",
  minimumFractionDigits: 1,
  maximumFractionDigits: 1
});

console.log(formatter.format(0.0523));
// Output: "+5.2%"

console.log(formatter.format(0));
// Output: "0.0%"

El cero sin signo indica claramente que no ocurrió ningún cambio.

Combinando signDisplay con decimales

La opción signDisplay funciona con todas las demás opciones de formato de números. Puedes controlar los decimales, el redondeo y los separadores de miles mientras también controlas la visualización del signo.

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

console.log(formatter.format(1234.5));
// Output: "+1,234.50"

console.log(formatter.format(-1234.5));
// Output: "-1,234.50"

Esta combinación asegura decimales consistentes mientras muestra signos explícitos tanto para valores positivos como negativos.

También puedes combinar signDisplay con notación compacta para mostrar cambios grandes.

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

console.log(formatter.format(1500000));
// Output: "+1.5M"

console.log(formatter.format(-850000));
// Output: "-850K"

El formato compacto hace que los números grandes sean legibles mientras que el signo muestra la dirección del cambio.

Qué recordar

La opción signDisplay en Intl.NumberFormat controla cuándo aparecen los signos más y menos en los números formateados. Usa "always" para mostrar signos explícitos para todos los números, "exceptZero" para ocultar el signo en cero, "auto" para el comportamiento predeterminado, "negative" para mostrar solo signos negativos y "never" para ocultar todos los signos.

Elige el valor signDisplay adecuado según si tus números representan cambios o valores absolutos, y si el cero necesita un tratamiento visual especial. Combina signDisplay con otras opciones de formato como moneda, porcentajes y decimales para crear el formato exacto que tu aplicación necesita.