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

소개

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

자바스크립트의 Intl.NumberFormat API는 형식화된 숫자에서 부호가 표시되는 시기를 제어하는 signDisplay 옵션을 제공합니다. 이 옵션을 통해 음수, 양수 및 0의 부호 표시 여부를 정밀하게 제어할 수 있습니다.

자바스크립트가 기본적으로 음수를 형식화하는 방법

기본적으로 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" 또는 "-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'는 방향이 중요하지 않은 절대값이나 크기를 표시할 때 사용합니다. 이는 거리 계산, 오차 범위, 절대 변화값 및 방향 없이 크기만 보여주는 데이터 시각화에 적합합니다.

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

signDisplay: 'exceptZero'는 0이 변화 없음을 의미하는 변화량이나 델타를 표시할 때 사용합니다. 이는 증가와 감소를 명확히 하면서 혼란스러운 "+0" 또는 "-0" 표시를 피합니다. 온도 변화, 주가 변동, 성능 지표는 이 옵션의 혜택을 받습니다.

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

// 표준 가격: auto 사용 (기본값)
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(-50);
// "-$50.00"

// 절대 가격 차이: never 사용
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  signDisplay: 'never'
}).format(-50);
// "$50.00"

// 가격 변화: exceptZero 사용
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  signDisplay: 'exceptZero'
}).format(50);
// "+$50.00"

// 온도 변화: always 사용
new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'celsius',
  signDisplay: 'always'
}).format(3);
// "+3°C"

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