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 el cambio de temperatura, los usuarios no pueden saber si esto 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 importa al mostrar cambios, diferencias o deltas. Los cambios en el precio de las acciones, ajustes en el saldo de cuentas, diferencias de puntuación y variaciones de temperatura se benefician de signos más explícitos que aclaran la dirección del cambio. El 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 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));
// Output: "42"

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

console.log(formatter.format(0));
// Output: "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 significar temperaturas absolutas en lugar de cambios. Con signos explícitos como +3 y +5, el significado se vuelve claro.

Usar signDisplay para mostrar signos más

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

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

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

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

console.log(formatter.format(0));
// Output: "+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 significado.

Comprender todos los valores de signDisplay

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

valor auto para el comportamiento de signo predeterminado

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

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

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

Utiliza "auto" al mostrar 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));
// Output: "+100"

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

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

Utiliza "always" al mostrar 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));
// Output: "+100"

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

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

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

valor negative para mostrar solo signos negativos

El valor "negative" muestra el signo menos 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));
// Output: "100"

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

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

Utiliza "negative" cuando quieras resaltar valores negativos mientras tratas los valores positivos y el cero de forma neutral. Esto funciona bien para saldos de cuenta 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));
// Output: "100"

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

console.log(formatter.format(0));
// Output: "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 color o iconos.

Cuándo usar cada opción de signDisplay

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

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 el 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. Los 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 cuenta y cálculos de beneficios a menudo resaltan 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.

Mostrar signos más con moneda

El formato de moneda funciona con signDisplay para mostrar cambios de cuenta 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 formato de moneda con exceptZero para distinguir sin 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.

Mostrar 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 crecimiento positivo en lugar de dejar que los usuarios lo infieran.

Al mostrar cambios porcentuales en contextos donde el cero es significativo, utiliza 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.

Combinar 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 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 números formateados. Utiliza "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 menos, y "never" para ocultar todos los signos.

Elige el valor signDisplay correcto 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.