How to control plus and minus signs in currency formatting
Use the signDisplay option to show or hide positive and negative signs when formatting currency amounts in JavaScript
Introduction
When you display a transaction amount like $500 in a banking app, users cannot tell whether this represents a deposit or a withdrawal. The missing plus or minus sign creates ambiguity. By showing +$500 or -$500, you communicate the transaction direction clearly.
Financial applications need precise control over how signs appear with currency amounts. Transaction histories show deposits and withdrawals with explicit signs. Profit and loss statements display gains and losses with clear positive and negative indicators. Account balance changes need visible signs to show whether money entered or left an account. JavaScript's Intl.NumberFormat provides the signDisplay option to control exactly when plus and minus signs appear with formatted currency.
How currency formats by default
By default, Intl.NumberFormat shows a minus sign for negative currency amounts and no sign for positive amounts.
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD"
});
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"
This default behavior works well for displaying prices and account balances. However, when showing transaction amounts or financial changes, the absence of a plus sign on positive values makes the direction unclear.
Using signDisplay to control currency signs
The signDisplay option controls when plus and minus signs appear in formatted currency. Pass this option when creating a number formatter for currency.
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"
Now positive amounts display with a plus sign, making deposits and gains explicit rather than implied.
Understanding signDisplay values for currency
The signDisplay option accepts five values. Each value serves specific purposes in financial displays.
auto value for standard currency formatting
The "auto" value is the default behavior. It shows the minus sign for negative amounts but no sign for positive amounts.
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"
Use "auto" for displaying prices, account balances, and other absolute currency values where negative amounts need identification but positive amounts are assumed.
always value to show all transaction directions
The "always" value displays signs for all amounts, including positive, negative, and zero.
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"
Use "always" for transaction histories, profit and loss statements, and account activity feeds where the direction of money movement matters for every entry. The explicit plus sign clarifies that positive amounts represent deposits, gains, or incoming funds.
exceptZero value to highlight actual changes
The "exceptZero" value displays signs for positive and negative amounts but omits the sign for zero.
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"
Use "exceptZero" for displaying balance changes where zero represents no change. This makes zero visually distinct from actual gains or losses. Trading platforms and investment apps use this format to show price changes and portfolio value changes.
negative value to emphasize debts
The "negative" value displays the minus sign for negative amounts only, excluding negative zero. Positive amounts and zero display without signs.
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"
Use "negative" for account balances where negative amounts represent debt or overdrafts that need highlighting. The absence of a plus sign treats positive balances as normal while drawing attention to negative balances.
never value to show absolute amounts
The "never" value displays currency amounts without any signs, even for negative values.
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"
Use "never" for displaying absolute amounts where the direction is communicated through other means. When transaction lists use separate columns for debits and credits, or when color coding indicates positive and negative, removing the sign prevents redundant information.
Combining signDisplay with accounting style
Currency formatting supports an accounting notation that displays negative amounts in parentheses. Set currencySign to "accounting" to enable this format.
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)"
The accounting format wraps negative amounts in parentheses instead of using a minus sign. This convention appears in financial reports, accounting software, and business statements.
You can combine accounting notation with different signDisplay values to control how positive amounts appear while negative amounts use parentheses.
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"
With signDisplay: "always", positive amounts show a plus sign while negative amounts continue to use parentheses. This format works well for profit and loss statements where both gains and losses need clear identification.
With signDisplay: "exceptZero", zero appears without a sign while positive and negative amounts use their respective indicators.
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"
This combination highlights actual changes while making zero visually neutral.
How signDisplay works with currency display modes
Currency formatting supports three display modes for the currency itself. The currencyDisplay option controls whether to show the currency as a symbol, code, or name.
The signDisplay option works consistently across all currency display modes.
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"
The sign appears in the appropriate position regardless of how the currency displays. This ensures consistent sign visibility across different currency formats.
Sign positioning varies by locale
Different locales position the sign in different places relative to the currency symbol. JavaScript handles these locale-specific conventions automatically.
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 €"
In US English, the sign appears before the currency symbol. In French, the sign appears before the number with the currency symbol after. The formatter respects these locale conventions while honoring your signDisplay choice.
Some locales position negative signs differently from positive signs even when using 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 ensures the output follows proper formatting rules for each locale while maintaining the sign visibility you specify.
Real-world use cases for currency sign control
Different financial contexts require different sign display strategies.
Transaction histories
Banking apps and payment platforms display transaction lists where each entry shows money moving in or out. Use signDisplay: "always" to make every transaction direction explicit.
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
The explicit signs clarify whether each transaction increased or decreased the account balance.
Profit and loss statements
Financial reports show gains and losses with clear positive and negative indicators. Use signDisplay: "always" with accounting notation for professional financial statements.
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
This format follows accounting conventions while making both gains and losses clear.
Balance change indicators
Investment platforms and trading apps show how account values changed over time. Use signDisplay: "exceptZero" to highlight actual changes while making no change visually neutral.
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
Zero displays without a sign, making it stand out as a period with no change.
Account balances
Banking apps display current account balances where negative values indicate overdrafts. Use signDisplay: "negative" to highlight debts while treating positive balances as normal.
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
The minus sign draws attention to the negative balance while positive balances appear without signs.
Price comparison absolute differences
Shopping apps and price comparison tools show how much prices differ between options. Use signDisplay: "never" when displaying absolute price differences where direction does not matter.
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
All amounts display as positive values, showing the magnitude of difference regardless of which option costs more.
Combining signDisplay with decimal precision
The signDisplay option works with all other currency formatting options. You can control decimal places, rounding, and sign display together.
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"
This ensures consistent decimal precision while showing explicit signs for all amounts.
You can also combine signDisplay with minimum and maximum significant digits for scientific or financial calculations.
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"
The formatter applies significant digit rules while maintaining the sign display behavior you specify.
What to remember
The signDisplay option in Intl.NumberFormat controls when plus and minus signs appear in formatted currency amounts. Use "always" to show explicit signs for all amounts, "exceptZero" to hide the sign on zero, "auto" for default behavior, "negative" to show only minus signs, and "never" to hide all signs.
Choose the right signDisplay value based on your financial context. Transaction histories need explicit signs for all amounts. Balance change indicators benefit from making zero visually neutral. Account balances work well with highlighting only negative values. Price comparisons often need absolute values without signs.
Combine signDisplay with accounting notation, currency display modes, and decimal precision options to create the exact currency format your financial application needs. JavaScript handles locale-specific sign positioning automatically while respecting your sign display preferences.