음수의 마이너스 부호를 표시하거나 숨기는 방법은 무엇인가요?

소개

컨텍스트에 따라 음수를 다르게 표현해야 합니다. 온도 변화를 보여주는 대시보드는 방향을 나타내기 위해 명시적인 플러스 및 마이너스 기호가 필요합니다. 크기를 표시하는 차트는 절댓값만 중요하므로 기호를 완전히 숨겨야 합니다. 재무 보고서는 마이너스 기호 대신 음수 금액을 괄호로 묶는 회계 규칙을 따릅니다.

JavaScript의 Intl.NumberFormat API는 형식화된 숫자에서 부호가 표시되는 시점을 제어하는 signDisplay 옵션을 제공합니다. 이 옵션을 사용하면 음수, 양수 및 0에 대한 부호 표시를 정밀하게 제어할 수 있습니다.

JavaScript가 기본적으로 음수를 형식화하는 방법

기본적으로 Intl.NumberFormat는 음수에는 마이너스 부호를 표시하고 양수에는 부호를 표시하지 않습니다.

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

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

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

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

이 기본 동작은 대부분의 경우에 잘 작동하지만, 사용 사례에서 다른 기호 처리가 필요한 경우 재정의할 수 있습니다.

signDisplay 옵션으로 기호 표시 제어

signDisplay 옵션은 부호가 표시되는 시점을 제어하는 다섯 가지 값을 허용합니다:

"auto": 음의 0을 포함한 음수에만 부호 표시 (기본값)
"never": 부호를 표시하지 않음
"always": 양수와 음수 모두에 항상 부호 표시
"exceptZero": 양수와 음수에는 부호를 표시하지만 0에는 표시하지 않음
"negative": 음의 0을 제외한 음수에만 부호 표시

포매터를 생성할 때 옵션 객체에 signDisplay 옵션을 전달하세요.

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

마이너스 기호를 완전히 숨기기

모든 부호를 숨기고 절댓값만 표시하려면 signDisplay: 'never'를 사용하세요.

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

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

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

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

이 설정은 모든 숫자에서 부호를 제거하여 -100와 100가 동일하게 형식화되도록 합니다. 음의 0은 부호 없이 "0"로 형식화됩니다.

데이터 시각화의 절대 변화 값, 거리 계산 또는 오차 범위와 같이 방향이 중요하지 않은 크기를 표시할 때 이 옵션을 사용하세요.

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

음수에만 마이너스 부호 표시

signDisplay: 'auto' 옵션은 기본 동작입니다. 음수에는 부호를 표시하지만 양수에는 표시하지 않습니다.

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

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

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

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

이 옵션을 사용하면 음의 0이 "-0"로 표시됩니다. JavaScript는 특정 수학 연산에서 발생할 수 있는 양의 0과 음의 0을 구분합니다.

음의 0에 대한 부호는 숨기면서 다른 음수에 대해서는 유지하려면 signDisplay: 'negative'를 사용하세요.

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

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

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

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

negative 옵션은 음수 0을 특수한 경우로 처리하여 부호 없이 형식화합니다. 이는 양수 0과 음수 0 사이의 구분이 사용자에게 중요하지 않은 맥락에서 혼란스러운 표시를 방지합니다.

0을 제외한 모든 숫자에 부호 표시

양수와 음수 모두에 부호를 표시하되, 값이 정확히 0일 때는 부호를 생략하려면 signDisplay: 'exceptZero'를 사용하세요.

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"

양수는 플러스 부호와 함께 표시됩니다. 양수든 음수든 0 값은 부호 없이 표시됩니다.

이 옵션은 0이 변화 없음을 의미하는 변화 또는 델타를 표시할 때 잘 작동합니다. "+0" 또는 "-0"를 표시하면 혼란스럽지만, "0"를 표시하면 의미가 명확해집니다.

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

모든 숫자에 부호 표시

양수와 0을 포함한 모든 숫자에 부호를 표시하려면 signDisplay: 'always'를 사용하세요.

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"

이 설정은 양수와 양수 0에 플러스 부호를 추가합니다. 음수 0은 마이너스 부호를 유지하여 구분이 가능합니다.

온도 변화, 고도 변화 또는 재무 손익과 같이 모든 값에 대해 방향을 강조해야 할 때 이 옵션을 사용하세요.

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

부호 표시와 통화 형식 결합

signDisplay 옵션은 통화 형식을 포함한 모든 형식 스타일과 함께 작동합니다. currencySign: 'accounting'와 결합하면 회계 규칙을 따르는 형식을 만들 수 있습니다.

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

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

회계 표기법은 마이너스 부호를 사용하는 대신 음수 금액을 괄호로 묶습니다. 이 규칙은 재무 보고서에서 음수를 시각적으로 더 명확하게 구분합니다.

회계 표기법을 다양한 signDisplay 값과 결합할 수 있습니다.

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"

signDisplay: 'always'를 사용하면 양수 금액은 플러스 기호를 표시하고 음수 금액은 여전히 괄호를 사용합니다. signDisplay: 'never'를 사용하면 양수와 음수 금액 모두 부호나 괄호 없이 표시됩니다.

각 부호 표시 옵션을 사용해야 하는 경우

숫자가 나타내는 내용과 사용자가 해석하는 방식에 따라 signDisplay 값을 선택하세요.

음수를 명확하게 식별해야 하는 표준 숫자 형식에는 signDisplay: 'auto'를 사용하세요. 이는 기본값이며 가격, 개수, 측정값 및 대부분의 범용 숫자 표시에 적합합니다.

방향이 중요하지 않은 절댓값이나 크기를 표시할 때는 signDisplay: 'never'를 사용하세요. 이는 거리 계산, 오차 범위, 절대 변화 값 및 방향 없이 크기를 표시하는 데이터 시각화에 적합합니다.

표준 음수 형식을 원하지만 음수 0 표시를 피해야 할 때는 signDisplay: 'negative'를 사용하세요. 이는 양수 0과 음수 0의 구분이 사용자에게 의미가 없는 수학적 또는 과학적 컨텍스트에서 혼란스러운 "-0" 표시를 방지합니다.

0이 변화 없음을 의미하는 변화 또는 델타를 표시할 때는 signDisplay: 'exceptZero'를 사용하세요. 이는 혼란스러운 "+0" 또는 "-0" 표시를 피하면서 이익과 손실을 명확하게 합니다. 온도 변화, 주가 변동 및 성과 지표에 이 옵션이 유용합니다.

모든 값에 대해 방향이 중요하고 증가와 감소를 모두 강조하려면 signDisplay: 'always'를 사용하세요. 온도 변화, 고도 차이 및 재무 성과 보고서는 양수와 음수 값을 동등하게 명시적으로 표시하기 위해 이 형식을 자주 사용합니다.

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

signDisplay 옵션은 애플리케이션에서 양수와 음수가 표시되는 방식을 정밀하게 제어할 수 있게 합니다. 표시하는 각 숫자의 컨텍스트와 목적에 따라 사용자에게 의미를 가장 잘 전달하는 값을 선택하세요.