How do you show or hide the minus sign for negative numbers?

Control when negative and positive signs appear in formatted numbers for different contexts

Introduction

Different contexts require different representations of negative numbers. A dashboard showing temperature changes needs explicit plus and minus signs to indicate direction. A chart displaying magnitudes cares only about absolute values and should hide the sign entirely. Financial reports follow accounting conventions that wrap negative amounts in parentheses instead of using minus signs.

JavaScript's Intl.NumberFormat API provides the signDisplay option to control when signs appear in formatted numbers. This option gives you precise control over sign visibility for negative numbers, positive numbers, and zero.

How JavaScript formats negative numbers by default

By default, Intl.NumberFormat shows a minus sign for negative numbers and no sign for positive numbers.

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

formatter.format(-42);
// "-42"

formatter.format(42);
// "42"

formatter.format(0);
// "0"

This default behavior works well for most cases, but you can override it when your use case requires different sign handling.

Control sign display with the signDisplay option

The signDisplay option accepts five values that control when signs appear:

  • "auto": Show signs for negative numbers only, including negative zero (default)
  • "never": Never show signs
  • "always": Always show signs for both positive and negative numbers
  • "exceptZero": Show signs for positive and negative numbers, but not zero
  • "negative": Show signs for negative numbers only, excluding negative zero

Pass the signDisplay option in the options object when creating a formatter.

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

Hide the minus sign completely

Use signDisplay: 'never' to hide all signs and display only absolute values.

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

formatter.format(-100);
// "100"

formatter.format(100);
// "100"

formatter.format(-0);
// "0"

This setting strips the sign from all numbers, making -100 and 100 format identically. Negative zero formats as "0" without a sign.

Use this option when displaying magnitudes where the direction does not matter, such as absolute change values in data visualizations, distance calculations, or error margins.

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"]

Show the minus sign for negative numbers only

The signDisplay: 'auto' option is the default behavior. It shows signs for negative numbers but not positive numbers.

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

formatter.format(-100);
// "-100"

formatter.format(100);
// "100"

formatter.format(-0);
// "-0"

Notice that negative zero displays as "-0" with this option. JavaScript distinguishes between positive zero and negative zero, which can occur in certain mathematical operations.

Use signDisplay: 'negative' to hide the sign for negative zero while keeping it for other negative numbers.

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

formatter.format(-100);
// "-100"

formatter.format(100);
// "100"

formatter.format(-0);
// "0"

The negative option treats negative zero as a special case and formats it without a sign. This prevents confusing displays in contexts where the distinction between positive and negative zero does not matter to users.

Show signs for all numbers except zero

Use signDisplay: 'exceptZero' to show signs for both positive and negative numbers, but omit the sign when the value is exactly zero.

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"

Positive numbers display with a plus sign. Zero values, whether positive or negative, display without any sign.

This option works well for displaying changes or deltas where zero means no change. Showing "+0" or "-0" would be confusing, but showing "0" makes the meaning clear.

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"]

Show signs for all numbers

Use signDisplay: 'always' to show signs for all numbers, including positive numbers and zero.

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"

This setting adds a plus sign to positive numbers and positive zero. Negative zero keeps its minus sign, making the distinction visible.

Use this option when you need to emphasize direction for all values, such as temperature changes, elevation changes, or financial gains and losses.

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 sign display with currency formatting

The signDisplay option works with all formatting styles, including currency formatting. When combined with currencySign: 'accounting', you can create formats that follow accounting conventions.

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

formatter.format(-1234.56);
// "($1,234.56)"

Accounting notation wraps negative amounts in parentheses instead of using a minus sign. This convention makes negative numbers more visually distinct in financial reports.

You can combine accounting notation with different signDisplay values.

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"

With signDisplay: 'always', positive amounts show a plus sign while negative amounts still use parentheses. With signDisplay: 'never', both positive and negative amounts display without signs or parentheses.

When to use each sign display option

Choose your signDisplay value based on what your numbers represent and how users will interpret them.

Use signDisplay: 'auto' for standard number formatting where negative numbers need clear identification. This is the default and works well for prices, counts, measurements, and most general-purpose number displays.

Use signDisplay: 'never' when displaying absolute values or magnitudes where direction does not matter. This works well for distance calculations, error margins, absolute change values, and data visualizations that show magnitude without direction.

Use signDisplay: 'negative' when you want standard negative number formatting but need to avoid displaying negative zero. This prevents confusing "-0" displays in mathematical or scientific contexts where the distinction between positive and negative zero is not meaningful to users.

Use signDisplay: 'exceptZero' when displaying changes or deltas where zero means no change. This makes gains and losses clear while avoiding confusing "+0" or "-0" displays. Temperature changes, stock price movements, and performance metrics benefit from this option.

Use signDisplay: 'always' when direction matters for all values and you want to emphasize both increases and decreases. Temperature changes, elevation differences, and financial performance reports often use this format to make positive and negative values equally explicit.

// 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"

The signDisplay option gives you precise control over how positive and negative numbers appear in your application. Choose the value that best communicates meaning to your users based on the context and purpose of each number you display.