How to show plus sign for positive numbers

Introduction

When you display a number like 5 on a weather app showing temperature change, users cannot tell whether this represents an absolute temperature of 5 degrees or a change of plus 5 degrees. The missing plus sign creates ambiguity. By explicitly showing the plus sign as +5, you communicate that the value represents an increase rather than a neutral measurement.

This distinction matters when displaying changes, differences, or deltas. Stock price changes, account balance adjustments, score differences, and temperature variations all benefit from explicit plus signs that clarify the direction of change. JavaScript's Intl.NumberFormat provides the signDisplay option to control when plus and minus signs appear.

How numbers display by default

By default, JavaScript only shows a minus sign for negative numbers. Positive numbers and zero display without any sign.

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"

This default behavior works well for absolute values like prices, quantities, or measurements. However, when you need to show a change or difference, the absence of a plus sign makes positive values ambiguous.

Consider displaying daily temperature changes. Without explicit signs, users see numbers like 3 and 5, which could mean absolute temperatures rather than changes. With explicit signs like +3 and +5, the meaning becomes clear.

Using signDisplay to show plus signs

The signDisplay option in Intl.NumberFormat controls when to display signs for numbers. Set signDisplay to "always" to show both plus and minus signs.

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"

Now positive numbers display with a plus sign, negative numbers display with a minus sign, and zero displays with a plus sign. This format works well for displaying changes where the sign carries meaning.

Understanding all signDisplay values

The signDisplay option accepts five values. Each value serves a specific purpose depending on how you want to handle signs for positive, negative, and zero values.

auto value for default sign behavior

The "auto" value is the default behavior. It shows the minus sign for negative numbers including negative zero, but no sign for positive numbers or positive zero.

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"

Use "auto" when displaying absolute values where the absence of a sign implies a positive value. This is the standard format for prices, counts, and measurements.

always value to show all signs

The "always" value displays signs for all numbers, including positive, negative, and zero.

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"

Use "always" when displaying changes or deltas where zero represents no change. The plus sign on zero clarifies that zero is a neutral value rather than a missing value.

exceptZero value to hide zero's sign

The "exceptZero" value displays signs for positive and negative numbers but omits the sign for zero.

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"

Use "exceptZero" when zero represents a special state that should be visually distinct from positive and negative values. For example, when showing score changes where zero means no change occurred.

negative value to show only minus signs

The "negative" value displays the minus sign for negative numbers only, excluding negative zero. Positive numbers and zero display without signs.

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"

Use "negative" when you want to highlight negative values while treating positive values and zero neutrally. This works well for account balances where negative values represent debt.

never value to hide all signs

The "never" value displays numbers without any signs, even for negative numbers.

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"

Use "never" when you need to display the absolute value of a number regardless of its sign. This is useful for displaying magnitudes where the direction has already been communicated through other means like color or icons.

When to use each signDisplay option

Choose the signDisplay value based on what the number represents and how users need to interpret it.

Use "always" for changes, differences, or deltas where the sign indicates direction. Temperature changes, stock price movements, and score differences need explicit signs to show whether values increased or decreased.

Use "exceptZero" for changes where zero represents no change and should be visually neutral. This helps zero stand out as a special case that means neither increase nor decrease.

Use "auto" for absolute values where the number represents a quantity or measurement rather than a change. Prices, distances, weights, and counts work with the default sign display.

Use "negative" for values where negative numbers require special attention but positive numbers are normal. Account balances and profit calculations often highlight debts while treating positive balances as standard.

Use "never" for absolute magnitudes where the direction is communicated separately. When color or icons already indicate positive or negative, removing the sign prevents redundant information.

Showing plus signs with currency

Currency formatting works with signDisplay to show account changes and transaction amounts with explicit signs.

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"

This format clearly shows whether a transaction added or removed money from an account. The plus sign makes deposits explicit rather than implied.

You can combine currency formatting with exceptZero to distinguish no change from positive or negative transactions.

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"

Now zero appears without a sign, making it visually distinct from actual gains or losses.

Showing plus signs with percentages

Percentage changes frequently need explicit signs to show whether values increased or decreased.

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

This format works well for displaying growth rates, interest rates, or performance changes. The plus sign explicitly indicates positive growth rather than leaving users to infer it.

When displaying percentage changes in contexts where zero is meaningful, use exceptZero to make zero visually 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%"

The zero without a sign clearly indicates no change occurred.

Combining signDisplay with decimal places

The signDisplay option works with all other number formatting options. You can control decimal places, rounding, and thousands separators while also controlling sign display.

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"

This combination ensures consistent decimal places while showing explicit signs for both positive and negative values.

You can also combine signDisplay with compact notation for displaying large changes.

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"

The compact format makes large numbers readable while the sign shows direction of change.

What to remember

The signDisplay option in Intl.NumberFormat controls when plus and minus signs appear in formatted numbers. Use "always" to show explicit signs for all numbers, "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 whether your numbers represent changes or absolute values, and whether zero needs special visual treatment. Combine signDisplay with other formatting options like currency, percentages, and decimal places to create the exact format your application needs.