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

소개

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

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

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

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

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"

이 기본 동작은 가격, 수량 또는 측정값과 같은 절대값에 적합합니다. 그러나 변화나 차이를 표시해야 할 때 플러스 기호가 없으면 양수 값이 모호해집니다.

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

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

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

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"

이제 양수는 더하기 기호와 함께 표시되고, 음수는 빼기 기호와 함께 표시되며, 0은 더하기 기호와 함께 표시됩니다. 이 형식은 기호가 의미를 전달하는 변화를 표시하는 데 적합합니다.

모든 signDisplay 값 이해하기

signDisplay 옵션은 다섯 가지 값을 허용합니다. 각 값은 양수, 음수 및 0 값에 대한 기호를 처리하는 방법에 따라 특정 목적을 제공합니다.

기본 기호 동작을 위한 auto 값

"auto" 값은 기본 동작입니다. 음의 0을 포함한 음수에 대해서는 빼기 기호를 표시하지만 양수 또는 양의 0에 대해서는 기호를 표시하지 않습니다.

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"

기호가 없으면 양수 값을 의미하는 절댓값을 표시할 때 "auto"를 사용하세요. 이는 가격, 개수 및 측정값의 표준 형식입니다.

모든 기호를 표시하는 always 값

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

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"

0이 변화 없음을 나타내는 변화 또는 델타를 표시할 때 "always"를 사용하세요. 0의 플러스 기호는 0이 누락된 값이 아닌 중립 값임을 명확히 합니다.

0의 기호를 숨기는 exceptZero 값

"exceptZero" 값은 양수 및 음수에 대해 기호를 표시하지만 0에 대해서는 기호를 생략합니다.

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"

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

빼기 기호만 표시하는 negative 값

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

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"

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

모든 기호를 숨기는 never 값

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

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"

기호와 관계없이 숫자의 절댓값을 표시해야 하는 경우 "never"를 사용하세요. 이는 색상이나 아이콘과 같은 다른 수단을 통해 방향이 이미 전달된 크기를 표시하는 데 유용합니다.

각 signDisplay 옵션을 사용하는 경우

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

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

0이 변화 없음을 나타내며 시각적으로 중립적이어야 하는 변화에는 "exceptZero"를 사용하세요. 이는 0이 증가도 감소도 아닌 특수한 경우로 돋보이도록 도와줍니다.

숫자가 변화가 아닌 수량이나 측정값을 나타내는 절댓값에는 "auto"를 사용하세요. 가격, 거리, 무게 및 개수는 기본 기호 표시와 함께 작동합니다.

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

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

통화에 플러스 기호 표시하기

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

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"

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

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

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"

이제 0은 기호 없이 표시되어 실제 이익이나 손실과 시각적으로 구별됩니다.

백분율에 플러스 기호 표시하기

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

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

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

0이 의미 있는 컨텍스트에서 백분율 변경 사항을 표시할 때 exceptZero를 사용하여 0을 시각적으로 중립적으로 만드세요.

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

기호가 없는 0은 변경이 발생하지 않았음을 명확하게 나타냅니다.

signDisplay와 소수 자릿수 결합하기

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

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"

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

또한 signDisplay를 압축 표기법과 결합하여 큰 변경 사항을 표시할 수 있습니다.

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"

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

기억해야 할 사항

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

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