Cómo controlar los signos más y menos en el formateo de monedas

Introducción

Cuando muestras un importe de transacción como $500 en una aplicación bancaria, los usuarios no pueden determinar si representa un depósito o una retirada. La ausencia del signo más o menos crea ambigüedad. Al mostrar +$500 o -$500, comunicas claramente la dirección de la transacción.

Las aplicaciones financieras necesitan un control preciso sobre cómo aparecen los signos con los importes de moneda. Los historiales de transacciones muestran depósitos y retiradas con signos explícitos. Los estados de pérdidas y ganancias muestran beneficios y pérdidas con indicadores positivos y negativos claros. Los cambios en el saldo de la cuenta necesitan signos visibles para mostrar si el dinero entró o salió de una cuenta. La opción signDisplay de Intl.NumberFormat de JavaScript proporciona control exacto sobre cuándo aparecen los signos más y menos con la moneda formateada.

Cómo se formatean las monedas por defecto

Por defecto, Intl.NumberFormat muestra un signo menos para cantidades de moneda negativas y ningún signo para cantidades positivas.

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

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

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

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

Este comportamiento predeterminado funciona bien para mostrar precios y saldos de cuentas. Sin embargo, cuando se muestran importes de transacciones o cambios financieros, la ausencia de un signo más en los valores positivos hace que la dirección no esté clara.

Uso de signDisplay para controlar los signos de moneda

La opción signDisplay controla cuándo aparecen los signos más y menos en la moneda formateada. Pasa esta opción al crear un formateador de números para moneda.

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

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

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

Ahora los importes positivos se muestran con un signo más, haciendo que los depósitos y ganancias sean explícitos en lugar de implícitos.

Entendiendo los valores de signDisplay para monedas

La opción signDisplay acepta cinco valores. Cada valor sirve para propósitos específicos en visualizaciones financieras.

valor auto para el formato estándar de moneda

El valor "auto" es el comportamiento predeterminado. Muestra el signo negativo para cantidades negativas pero ningún signo para cantidades positivas.

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

console.log(formatter.format(1000));
// Output: "$1,000.00"

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

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

Utiliza "auto" para mostrar precios, saldos de cuentas y otros valores absolutos de moneda donde las cantidades negativas necesitan identificación pero las cantidades positivas se asumen.

valor always para mostrar todas las direcciones de transacción

El valor "always" muestra signos para todas las cantidades, incluyendo positivas, negativas y cero.

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

console.log(formatter.format(1000));
// Output: "+$1,000.00"

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

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

Utiliza "always" para historiales de transacciones, estados de pérdidas y ganancias, y feeds de actividad de cuenta donde la dirección del movimiento de dinero importa para cada entrada. El signo más explícito aclara que las cantidades positivas representan depósitos, ganancias o fondos entrantes.

valor exceptZero para destacar cambios reales

El valor "exceptZero" muestra signos para cantidades positivas y negativas pero omite el signo para cero.

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

console.log(formatter.format(1000));
// Output: "+$1,000.00"

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

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

Utiliza "exceptZero" para mostrar cambios de saldo donde cero representa ningún cambio. Esto hace que el cero sea visualmente distinto de ganancias o pérdidas reales. Las plataformas de trading y aplicaciones de inversión utilizan este formato para mostrar cambios de precio y cambios en el valor de la cartera.

valor negativo para enfatizar deudas

El valor "negative" muestra el signo menos solo para cantidades negativas, excluyendo el cero negativo. Las cantidades positivas y el cero se muestran sin signos.

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

console.log(formatter.format(1000));
// Output: "$1,000.00"

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

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

Utiliza "negative" para saldos de cuentas donde las cantidades negativas representan deudas o sobregiros que necesitan destacarse. La ausencia de un signo más trata los saldos positivos como normales mientras llama la atención sobre los saldos negativos.

valor never para mostrar cantidades absolutas

El valor "never" muestra las cantidades de moneda sin ningún signo, incluso para valores negativos.

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

console.log(formatter.format(1000));
// Output: "$1,000.00"

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

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

Utiliza "never" para mostrar cantidades absolutas donde la dirección se comunica por otros medios. Cuando las listas de transacciones utilizan columnas separadas para débitos y créditos, o cuando la codificación por colores indica positivo y negativo, eliminar el signo evita información redundante.

Combinando signDisplay con estilo contable

El formato de moneda admite una notación contable que muestra las cantidades negativas entre paréntesis. Establece currencySign a "accounting" para habilitar este formato.

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

console.log(formatter.format(1000));
// Output: "$1,000.00"

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

El formato contable envuelve las cantidades negativas entre paréntesis en lugar de usar un signo menos. Esta convención aparece en informes financieros, software de contabilidad y estados de cuenta empresariales.

Puedes combinar la notación contable con diferentes valores de signDisplay para controlar cómo aparecen las cantidades positivas mientras que las cantidades negativas usan paréntesis.

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

console.log(formatter.format(1000));
// Output: "+$1,000.00"

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

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

Con signDisplay: "always", las cantidades positivas muestran un signo más mientras que las cantidades negativas continúan usando paréntesis. Este formato funciona bien para estados de pérdidas y ganancias donde tanto las ganancias como las pérdidas necesitan una identificación clara.

Con signDisplay: "exceptZero", el cero aparece sin signo mientras que las cantidades positivas y negativas utilizan sus respectivos indicadores.

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

console.log(formatter.format(1000));
// Output: "+$1,000.00"

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

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

Esta combinación resalta los cambios reales mientras hace que el cero sea visualmente neutral.

Cómo funciona signDisplay con los modos de visualización de moneda

El formateo de moneda admite tres modos de visualización para la moneda en sí. La opción currencyDisplay controla si se muestra la moneda como un símbolo, código o nombre.

La opción signDisplay funciona de manera consistente en todos los modos de visualización de moneda.

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

console.log(symbol.format(100));
// Output: "+$100.00"

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

console.log(code.format(100));
// Output: "+USD 100.00"

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

console.log(name.format(100));
// Output: "+100.00 US dollars"

El signo aparece en la posición apropiada independientemente de cómo se muestre la moneda. Esto asegura una visibilidad consistente del signo en diferentes formatos de moneda.

La posición del signo varía según la configuración regional

Diferentes configuraciones regionales posicionan el signo en diferentes lugares en relación con el símbolo de moneda. JavaScript maneja estas convenciones específicas de cada configuración regional automáticamente.

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

console.log(enUS.format(100));
// Output: "+$100.00"

console.log(enUS.format(-100));
// Output: "-$100.00"

const frFR = new Intl.NumberFormat("fr-FR", {
  style: "currency",
  currency: "EUR",
  signDisplay: "always"
});

console.log(frFR.format(100));
// Output: "+100,00 €"

console.log(frFR.format(-100));
// Output: "-100,00 €"

En inglés estadounidense, el signo aparece antes del símbolo de moneda. En francés, el signo aparece antes del número con el símbolo de moneda después. El formateador respeta estas convenciones regionales mientras honra tu elección de signDisplay.

Algunas configuraciones regionales posicionan los signos negativos de manera diferente a los signos positivos incluso cuando se usa signDisplay: "always".

const nlNL = new Intl.NumberFormat("nl-NL", {
  style: "currency",
  currency: "EUR",
  signDisplay: "always"
});

console.log(nlNL.format(100));
// Output: "+€ 100,00"

console.log(nlNL.format(-100));
// Output: "-€ 100,00"

JavaScript asegura que la salida siga las reglas de formato adecuadas para cada configuración regional mientras mantiene la visibilidad del signo que especifiques.

Casos de uso reales para el control del signo de moneda

Diferentes contextos financieros requieren diferentes estrategias de visualización de signos.

Historiales de transacciones

Las aplicaciones bancarias y plataformas de pago muestran listas de transacciones donde cada entrada muestra el movimiento de dinero entrante o saliente. Utiliza signDisplay: "always" para hacer explícita la dirección de cada transacción.

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

const transactions = [
  { description: "Salary deposit", amount: 3500 },
  { description: "Rent payment", amount: -1200 },
  { description: "Grocery store", amount: -85.50 },
  { description: "Refund", amount: 25 }
];

transactions.forEach(transaction => {
  console.log(`${transaction.description}: ${formatter.format(transaction.amount)}`);
});
// Output:
// Salary deposit: +$3,500.00
// Rent payment: -$1,200.00
// Grocery store: -$85.50
// Refund: +$25.00

Los signos explícitos aclaran si cada transacción aumentó o disminuyó el saldo de la cuenta.

Estados de pérdidas y ganancias

Los informes financieros muestran ganancias y pérdidas con indicadores claros positivos y negativos. Utiliza signDisplay: "always" con notación contable para estados financieros profesionales.

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

const financials = {
  revenue: 150000,
  expenses: -95000,
  netIncome: 55000
};

console.log(`Revenue: ${formatter.format(financials.revenue)}`);
// Output: Revenue: +$150,000.00

console.log(`Expenses: ${formatter.format(financials.expenses)}`);
// Output: Expenses: ($95,000.00)

console.log(`Net Income: ${formatter.format(financials.netIncome)}`);
// Output: Net Income: +$55,000.00

Este formato sigue las convenciones contables mientras hace claras tanto las ganancias como las pérdidas.

Indicadores de cambio de saldo

Las plataformas de inversión y aplicaciones de trading muestran cómo cambiaron los valores de las cuentas a lo largo del tiempo. Utiliza signDisplay: "exceptZero" para destacar los cambios reales mientras mantienes visualmente neutral la ausencia de cambio.

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

const changes = [
  { period: "Today", change: 125.50 },
  { period: "This week", change: -45.75 },
  { period: "This month", change: 0 },
  { period: "This year", change: 1850 }
];

changes.forEach(item => {
  console.log(`${item.period}: ${formatter.format(item.change)}`);
});
// Output:
// Today: +$125.50
// This week: -$45.75
// This month: $0.00
// This year: +$1,850.00

El cero se muestra sin signo, destacándolo como un período sin cambios.

Saldos de cuenta

Las aplicaciones bancarias muestran los saldos actuales de las cuentas donde los valores negativos indican sobregiros. Utiliza signDisplay: "negative" para destacar las deudas mientras tratas los saldos positivos como normales.

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

const accounts = [
  { name: "Checking", balance: 2500 },
  { name: "Savings", balance: 15000 },
  { name: "Credit Card", balance: -850 }
];

accounts.forEach(account => {
  console.log(`${account.name}: ${formatter.format(account.balance)}`);
});
// Output:
// Checking: $2,500.00
// Savings: $15,000.00
// Credit Card: -$850.00

El signo menos llama la atención sobre el saldo negativo mientras que los saldos positivos aparecen sin signos.

Diferencias absolutas en comparación de precios

Las aplicaciones de compras y las herramientas de comparación de precios muestran cuánto difieren los precios entre opciones. Utiliza signDisplay: "never" cuando muestres diferencias absolutas de precios donde la dirección no importa.

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

const comparisons = [
  { item: "Laptop A vs B", difference: -150 },
  { item: "Phone X vs Y", difference: 75 },
  { item: "Tablet M vs N", difference: -25 }
];

comparisons.forEach(comp => {
  console.log(`${comp.item}: ${formatter.format(comp.difference)} difference`);
});
// Output:
// Laptop A vs B: $150.00 difference
// Phone X vs Y: $75.00 difference
// Tablet M vs N: $25.00 difference

Todos los montos se muestran como valores positivos, mostrando la magnitud de la diferencia independientemente de qué opción cuesta más.

Combinando signDisplay con precisión decimal

La opción signDisplay funciona con todas las demás opciones de formato de moneda. Puedes controlar los decimales, el redondeo y la visualización de signos juntos.

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

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

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

Esto asegura una precisión decimal consistente mientras muestra signos explícitos para todos los montos.

También puedes combinar signDisplay con dígitos significativos mínimos y máximos para cálculos científicos o financieros.

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

console.log(formatter.format(1234.567));
// Output: "+$1,230"

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

El formateador aplica reglas de dígitos significativos mientras mantiene el comportamiento de visualización de signos que especifiques.

Qué recordar

La opción signDisplay en Intl.NumberFormat controla cuándo aparecen los signos más y menos en los importes de moneda formateados. Utiliza "always" para mostrar signos explícitos para todos los importes, "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 correcto de signDisplay según tu contexto financiero. Los historiales de transacciones necesitan signos explícitos para todos los importes. Los indicadores de cambio de saldo se benefician de hacer que el cero sea visualmente neutral. Los saldos de cuenta funcionan bien destacando solo los valores negativos. Las comparaciones de precios a menudo necesitan valores absolutos sin signos.

Combina signDisplay con notación contable, modos de visualización de moneda y opciones de precisión decimal para crear el formato de moneda exacto que necesita tu aplicación financiera. JavaScript maneja automáticamente la posición de los signos según la configuración regional mientras respeta tus preferencias de visualización de signos.