양수에 플러스 부호를 표시하는 방법

소개

날씨 앱에서 온도 변화를 보여주는 5와 같은 숫자를 표시할 때, 사용자는 이것이 5도의 절대 온도를 나타내는지 또는 플러스 5도의 변화를 나타내는지 구분할 수 없습니다. 플러스 기호가 없으면 모호함이 생깁니다. +5와 같이 플러스 기호를 명시적으로 표시함으로써, 이 값이 중립적인 측정값이 아닌 증가를 나타낸다는 것을 전달할 수 있습니다.

이러한 구분은 변화, 차이 또는 델타를 표시할 때 중요합니다. 주식 가격 변동, 계좌 잔액 조정, 점수 차이, 온도 변화 모두 변화의 방향을 명확히 하는 명시적인 플러스 기호의 혜택을 받습니다. JavaScript의 Intl.NumberFormat은 플러스 및 마이너스 기호가 나타나는 시기를 제어하는 signDisplay 옵션을 제공합니다.

기본적으로 숫자가 표시되는 방식

기본적으로 JavaScript는 음수에 대해서만 마이너스 기호를 표시합니다. 양수와 0은 기호 없이 표시됩니다.

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

console.log(formatter.format(42));
// 출력: "42"

console.log(formatter.format(-42));
// 출력: "-42"

console.log(formatter.format(0));
// 출력: "0"

이 기본 동작은 가격, 수량 또는 측정값과 같은 절대값에 잘 작동합니다. 그러나 변화나 차이를 보여줄 필요가 있을 때, 플러스 기호가 없으면 양수 값이 모호해집니다.

일일 온도 변화를 표시하는 경우를 생각해보세요. 명시적인 기호 없이는 사용자들은 3과 5와 같은 숫자를 보게 되는데, 이는 변화가 아닌 절대 온도를 의미할 수 있습니다. +3과 +5와 같은 명시적인 기호를 사용하면 의미가 명확해집니다.

signDisplay를 사용하여 플러스 기호 표시하기

Intl.NumberFormat의 signDisplay 옵션은 숫자에 대한 기호를 표시할 시기를 제어합니다. signDisplay를 "always"로 설정하면 플러스와 마이너스 기호를 모두 표시합니다.

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

console.log(formatter.format(42));
// 출력: "+42"

console.log(formatter.format(-42));
// 출력: "-42"

console.log(formatter.format(0));
// 출력: "+0"

이제 양수는 플러스 기호와 함께 표시되고, 음수는 마이너스 기호와 함께 표시되며, 0은 플러스 기호와 함께 표시됩니다. 이 형식은 기호가 의미를 가지는 변화를 표시하는 데 적합합니다.

모든 signDisplay 값 이해하기

'signDisplay' 옵션은 다섯 가지 값을 허용합니다. 각 값은 양수, 음수 및 0 값의 부호를 처리하는 방식에 따라 특정 목적을 수행합니다.

기본 부호 동작을 위한 auto 값

'"auto"' 값은 기본 동작입니다. 음수 및 음의 0에 대해서는 마이너스 부호를 표시하지만, 양수나 양의 0에는 부호를 표시하지 않습니다.

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

console.log(formatter.format(100));
// 출력: "100"

console.log(formatter.format(-100));
// 출력: "-100"

console.log(formatter.format(0));
// 출력: "0"

부호가 없는 것이 양수를 의미하는 절대값을 표시할 때 '"auto"'를 사용하세요. 이는 가격, 수량 및 측정값에 대한 표준 형식입니다.

모든 부호를 표시하는 always 값

'"always"' 값은 양수, 음수 및 0을 포함한 모든 숫자에 부호를 표시합니다.

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

console.log(formatter.format(100));
// 출력: "+100"

console.log(formatter.format(-100));
// 출력: "-100"

console.log(formatter.format(0));
// 출력: "+0"

0이 변화 없음을 나타내는 변경사항이나 델타를 표시할 때 '"always"'를 사용하세요. 0에 플러스 부호를 붙이면 0이 누락된 값이 아닌 중립적인 값임을 명확히 합니다.

0의 부호를 숨기는 exceptZero 값

'"exceptZero"' 값은 양수와 음수에 부호를 표시하지만 0에는 부호를 생략합니다.

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

console.log(formatter.format(100));
// 출력: "+100"

console.log(formatter.format(-100));
// 출력: "-100"

console.log(formatter.format(0));
// 출력: "0"

0이 양수 및 음수 값과 시각적으로 구분되어야 하는 특별한 상태를 나타낼 때 '"exceptZero"'를 사용하세요. 예를 들어, 0이 변화가 없음을 의미하는 점수 변화를 표시할 때 사용합니다.

음수 값에만 마이너스 기호 표시

'"negative"' 값은 음수 0을 제외한 음수에만 마이너스 기호를 표시합니다. 양수와 0은 기호 없이 표시됩니다.

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

console.log(formatter.format(100));
// 출력: "100"

console.log(formatter.format(-100));
// 출력: "-100"

console.log(formatter.format(-0));
// 출력: "0"

양수 값과 0을 중립적으로 처리하면서 음수 값을 강조하고 싶을 때 '"negative"'를 사용하세요. 이는 음수 값이 부채를 나타내는 계좌 잔액에 적합합니다.

never 값으로 모든 기호 숨기기

'"never"' 값은 음수에도 기호 없이 숫자를 표시합니다.

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

console.log(formatter.format(100));
// 출력: "100"

console.log(formatter.format(-100));
// 출력: "100"

console.log(formatter.format(0));
// 출력: "0"

부호에 관계없이 숫자의 절대값을 표시해야 할 때 '"never"'를 사용하세요. 이는 방향이 이미 색상이나 아이콘과 같은 다른 방법으로 전달된 경우 크기를 표시하는 데 유용합니다.

각 signDisplay 옵션을 사용하는 경우

숫자가 나타내는 의미와 사용자가 이를 해석해야 하는 방식에 따라 'signDisplay' 값을 선택하세요.

'"always"'는 부호가 방향을 나타내는 변화, 차이 또는 델타에 사용하세요. 온도 변화, 주가 변동, 점수 차이는 값이 증가했는지 감소했는지 보여주기 위해 명시적인 부호가 필요합니다.

'"exceptZero"'는 0이 변화가 없음을 나타내고 시각적으로 중립적이어야 하는 변화에 사용하세요. 이는 0이 증가도 감소도 아닌 특별한 경우로 두드러지게 합니다.

'"auto"'는 숫자가 변화가 아닌 양이나 측정값을 나타내는 절대값에 사용하세요. 가격, 거리, 무게, 개수는 기본 부호 표시로 작동합니다.

'"negative"'는 음수가 특별한 주의를 요구하지만 양수는 정상인 값에 사용하세요. 계좌 잔액과 이익 계산은 종종 부채를 강조하면서 양수 잔액을 표준으로 취급합니다.

'"never"'는 방향이 별도로 전달되는 절대 크기에 사용하세요. 색상이나 아이콘이 이미 양수 또는 음수를 나타내는 경우, 부호를 제거하면 중복 정보를 방지할 수 있습니다.

통화와 함께 플러스 기호 표시하기

통화 형식은 signDisplay와 함께 작동하여 계정 변경 및 거래 금액을 명시적인 기호와 함께 표시합니다.

const formatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  signDisplay: "always"
});

console.log(formatter.format(250.50));
// 출력: "+$250.50"

console.log(formatter.format(-75.25));
// 출력: "-$75.25"

console.log(formatter.format(0));
// 출력: "+$0.00"

이 형식은 거래가 계정에서 돈을 추가했는지 또는 제거했는지 명확하게 보여줍니다. 플러스 기호는 입금을 암시적이 아닌 명시적으로 표시합니다.

통화 형식을 exceptZero와 결합하여 변화가 없는 상태와 양수 또는 음수 거래를 구분할 수 있습니다.

const formatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  signDisplay: "exceptZero"
});

console.log(formatter.format(250.50));
// 출력: "+$250.50"

console.log(formatter.format(-75.25));
// 출력: "-$75.25"

console.log(formatter.format(0));
// 출력: "$0.00"

이제 0은 기호 없이 나타나므로 실제 이익이나 손실과 시각적으로 구분됩니다.

백분율과 함께 플러스 기호 표시하기

백분율 변화는 값이 증가했는지 감소했는지 보여주기 위해 명시적인 기호가 필요한 경우가 많습니다.

const formatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  signDisplay: "always",
  minimumFractionDigits: 1,
  maximumFractionDigits: 1
});

console.log(formatter.format(0.0523));
// 출력: "+5.2%"

console.log(formatter.format(-0.0341));
// 출력: "-3.4%"

console.log(formatter.format(0));
// 출력: "+0.0%"

이 형식은 성장률, 이자율 또는 성능 변화를 표시하는 데 적합합니다. 플러스 기호는 사용자가 추론하도록 두는 대신 긍정적인 성장을 명시적으로 나타냅니다.

0이 의미 있는 컨텍스트에서 백분율 변화를 표시할 때는 exceptZero를 사용하여 0을 시각적으로 중립적으로 만듭니다.

const formatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  signDisplay: "exceptZero",
  minimumFractionDigits: 1,
  maximumFractionDigits: 1
});

console.log(formatter.format(0.0523));
// 출력: "+5.2%"

console.log(formatter.format(0));
// 출력: "0.0%"

기호 없는 0은 변화가 없었음을 명확하게 나타냅니다.

signDisplay와 소수점 자릿수 결합하기

signDisplay 옵션은 모든 다른 숫자 서식 옵션과 함께 작동합니다. 부호 표시를 제어하면서 소수점 자릿수, 반올림 및 천 단위 구분 기호를 제어할 수 있습니다.

const formatter = new Intl.NumberFormat("en-US", {
  signDisplay: "always",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

console.log(formatter.format(1234.5));
// 출력: "+1,234.50"

console.log(formatter.format(-1234.5));
// 출력: "-1,234.50"

이 조합은 양수와 음수 모두에 대해 명시적인 부호를 표시하면서 일관된 소수점 자릿수를 보장합니다.

또한 큰 변화를 표시하기 위해 signDisplay를 간결 표기법과 결합할 수도 있습니다.

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

console.log(formatter.format(1500000));
// 출력: "+1.5M"

console.log(formatter.format(-850000));
// 출력: "-850K"

간결한 형식은 큰 숫자를 읽기 쉽게 만들고 부호는 변화의 방향을 보여줍니다.

기억해야 할 사항

Intl.NumberFormat의 signDisplay 옵션은 서식이 지정된 숫자에 플러스 및 마이너스 부호가 나타나는 시기를 제어합니다. 모든 숫자에 명시적인 부호를 표시하려면 "always", 0에서 부호를 숨기려면 "exceptZero", 기본 동작에는 "auto", 마이너스 부호만 표시하려면 "negative", 모든 부호를 숨기려면 "never"를 사용하세요.

숫자가 변화를 나타내는지 절대값을 나타내는지, 그리고 0이 특별한 시각적 처리가 필요한지에 따라 적절한 signDisplay 값을 선택하세요. 애플리케이션에 필요한 정확한 형식을 만들기 위해 signDisplay를 통화, 백분율 및 소수점 자릿수와 같은 다른 서식 옵션과 결합하세요.