통화 형식 지정에서 플러스 및 마이너스 기호를 제어하는 방법
JavaScript에서 통화 금액을 형식화할 때 양수 및 음수 기호를 표시하거나 숨기려면 signDisplay 옵션을 사용하세요
소개
은행 앱에서 $500과 같은 거래 금액을 표시할 때, 사용자는 이것이 입금인지 출금인지 구분할 수 없습니다. 플러스나 마이너스 기호가 없으면 모호함이 생깁니다. +$500 또는 -$500과 같이 표시함으로써 거래 방향을 명확하게 전달할 수 있습니다.
금융 애플리케이션은 통화 금액과 함께 기호가 표시되는 방식에 대한 정확한 제어가 필요합니다. 거래 내역은 입금과 출금을 명시적인 기호와 함께 표시합니다. 손익 계산서는 이익과 손실을 명확한 양수 및 음수 표시기와 함께 표시합니다. 계좌 잔액 변동은 돈이 계좌로 들어왔는지 나갔는지 보여주기 위해 가시적인 기호가 필요합니다. JavaScript의 Intl.NumberFormat은 형식화된 통화와 함께 플러스 및 마이너스 기호가 나타나는 시기를 정확히 제어하기 위한 signDisplay 옵션을 제공합니다.
통화가 기본적으로 형식화되는 방식
기본적으로 Intl.NumberFormat은 음수 통화 금액에는 마이너스 기호를 표시하고 양수 금액에는 기호를 표시하지 않습니다.
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD"
});
console.log(formatter.format(250.50));
// 출력: "$250.50"
console.log(formatter.format(-75.25));
// 출력: "-$75.25"
console.log(formatter.format(0));
// 출력: "$0.00"
이 기본 동작은 가격과 계좌 잔액을 표시하는 데 적합합니다. 그러나 거래 금액이나 재정적 변화를 보여줄 때, 양수 값에 플러스 기호가 없으면 방향이 불분명해집니다.
signDisplay를 사용하여 통화 기호 제어하기
'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"
이제 양수 금액은 플러스 기호와 함께 표시되어 입금과 이익이 암시적이 아닌 명시적으로 표시됩니다.
통화에 대한 signDisplay 값 이해하기
signDisplay 옵션은 다섯 가지 값을 허용합니다. 각 값은 금융 표시에서 특정 목적을 수행합니다.
표준 통화 형식을 위한 auto 값
"auto" 값은 기본 동작입니다. 음수 금액에는 마이너스 기호를 표시하지만 양수 금액에는 기호를 표시하지 않습니다.
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
signDisplay: "auto"
});
console.log(formatter.format(1000));
// 출력: "$1,000.00"
console.log(formatter.format(-500));
// 출력: "-$500.00"
console.log(formatter.format(0));
// 출력: "$0.00"
"auto"는 가격, 계좌 잔액 및 음수 금액은 식별이 필요하지만 양수 금액은 가정되는 기타 절대 통화 값을 표시할 때 사용합니다.
모든 거래 방향을 표시하기 위한 always 값
"always" 값은 양수, 음수 및 0을 포함한 모든 금액에 대해 기호를 표시합니다.
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
signDisplay: "always"
});
console.log(formatter.format(1000));
// 출력: "+$1,000.00"
console.log(formatter.format(-500));
// 출력: "-$500.00"
console.log(formatter.format(0));
// 출력: "+$0.00"
"always"는 거래 내역, 손익 계산서 및 모든 항목에 대해 자금 이동 방향이 중요한 계정 활동 피드에 사용합니다. 명시적인 플러스 기호는 양수 금액이 입금, 이익 또는 유입 자금을 나타냄을 명확히 합니다.
실제 변화를 강조하기 위한 exceptZero 값
"exceptZero" 값은 양수 및 음수 금액에 대해 기호를 표시하지만 0에 대해서는 기호를 생략합니다.
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
signDisplay: "exceptZero"
});
console.log(formatter.format(1000));
// 출력: "+$1,000.00"
console.log(formatter.format(-500));
// 출력: "-$500.00"
console.log(formatter.format(0));
// 출력: "$0.00"
"exceptZero"는 0이 변화 없음을 나타내는 잔액 변화를 표시할 때 사용합니다. 이는 0을 실제 이익이나 손실과 시각적으로 구분합니다. 트레이딩 플랫폼 및 투자 앱은 이 형식을 사용하여 가격 변동 및 포트폴리오 가치 변화를 표시합니다.
부채를 강조하기 위한 음수 값
"negative" 값은 음수 금액에만 마이너스 기호를 표시하며, 음수 0은 제외합니다. 양수 금액과 0은 기호 없이 표시됩니다.
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
signDisplay: "negative"
});
console.log(formatter.format(1000));
// Output: "$1,000.00"
console.log(formatter.format(-500));
// Output: "-$500.00"
console.log(formatter.format(0));
// Output: "$0.00"
"negative"는 음수 금액이 부채나 초과 인출을 나타내어 강조가 필요한 계좌 잔액에 사용합니다. 플러스 기호가 없으면 양수 잔액은 정상으로 취급하면서 음수 잔액에 주의를 끌게 됩니다.
절대 금액을 표시하기 위한 never 값
"never" 값은 음수 값에도 기호 없이 통화 금액을 표시합니다.
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
signDisplay: "never"
});
console.log(formatter.format(1000));
// Output: "$1,000.00"
console.log(formatter.format(-500));
// Output: "$500.00"
console.log(formatter.format(0));
// Output: "$0.00"
"never"는 방향이 다른 방식으로 전달되는 절대 금액을 표시할 때 사용합니다. 거래 목록이 차변과 대변에 대해 별도의 열을 사용하거나 색상 코딩이 양수와 음수를 나타낼 때, 기호를 제거하면 중복 정보를 방지할 수 있습니다.
signDisplay와 회계 스타일 결합하기
통화 형식은 음수 금액을 괄호로 표시하는 회계 표기법을 지원합니다. 이 형식을 활성화하려면 currencySign을 "accounting"으로 설정하세요.
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
currencySign: "accounting"
});
console.log(formatter.format(1000));
// Output: "$1,000.00"
console.log(formatter.format(-500));
// Output: "($500.00)"
회계 형식은 마이너스 기호 대신 괄호로 음수 금액을 감쌉니다. 이 관례는 재무 보고서, 회계 소프트웨어 및 비즈니스 명세서에서 나타납니다.
다양한 signDisplay 값과 회계 표기법을 결합하여 음수 금액은 괄호를 사용하면서 양수 금액의 표시 방식을 제어할 수 있습니다.
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
currencySign: "accounting",
signDisplay: "always"
});
console.log(formatter.format(1000));
// Output: "+$1,000.00"
console.log(formatter.format(-500));
// Output: "($500.00)"
console.log(formatter.format(0));
// Output: "+$0.00"
signDisplay: "always"를 사용하면 양수 금액은 플러스 기호를 표시하고 음수 금액은 계속해서 괄호를 사용합니다. 이 형식은 이익과 손실 모두 명확한 식별이 필요한 손익 계산서에 적합합니다.
signDisplay: "exceptZero"를 사용하면 0은 기호 없이 표시되고 양수와 음수 금액은 각각의 표시기를 사용합니다.
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
currencySign: "accounting",
signDisplay: "exceptZero"
});
console.log(formatter.format(1000));
// Output: "+$1,000.00"
console.log(formatter.format(-500));
// Output: "($500.00)"
console.log(formatter.format(0));
// Output: "$0.00"
이 조합은 실제 변화를 강조하면서 0을 시각적으로 중립적으로 만듭니다.
signDisplay가 통화 표시 모드와 함께 작동하는 방식
통화 형식은 통화 자체에 대해 세 가지 표시 모드를 지원합니다. currencyDisplay 옵션은 통화를 기호, 코드 또는 이름으로 표시할지 제어합니다.
signDisplay 옵션은 모든 통화 표시 모드에서 일관되게 작동합니다.
const symbol = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
currencyDisplay: "symbol",
signDisplay: "always"
});
console.log(symbol.format(100));
// 출력: "+$100.00"
const code = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
currencyDisplay: "code",
signDisplay: "always"
});
console.log(code.format(100));
// 출력: "+USD 100.00"
const name = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
currencyDisplay: "name",
signDisplay: "always"
});
console.log(name.format(100));
// 출력: "+100.00 US dollars"
통화가 어떻게 표시되는지에 관계없이 부호는 적절한 위치에 나타납니다. 이는 다양한 통화 형식에서 일관된 부호 가시성을 보장합니다.
부호 위치는 로케일에 따라 다름
다양한 로케일은 통화 기호에 상대적으로 다른 위치에 부호를 배치합니다. JavaScript는 이러한 로케일별 규칙을 자동으로 처리합니다.
const enUS = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
signDisplay: "always"
});
console.log(enUS.format(100));
// 출력: "+$100.00"
console.log(enUS.format(-100));
// 출력: "-$100.00"
const frFR = new Intl.NumberFormat("fr-FR", {
style: "currency",
currency: "EUR",
signDisplay: "always"
});
console.log(frFR.format(100));
// 출력: "+100,00 €"
console.log(frFR.format(-100));
// 출력: "-100,00 €"
미국 영어에서는 부호가 통화 기호 앞에 나타납니다. 프랑스어에서는 부호가 숫자 앞에 나타나고 통화 기호는 뒤에 옵니다. 포맷터는 signDisplay 선택을 존중하면서 이러한 로케일 규칙을 준수합니다.
일부 로케일은 signDisplay: "always"를 사용하더라도 양수 부호와 음수 부호의 위치를 다르게 배치합니다.
const nlNL = new Intl.NumberFormat("nl-NL", {
style: "currency",
currency: "EUR",
signDisplay: "always"
});
console.log(nlNL.format(100));
// 출력: "+€ 100,00"
console.log(nlNL.format(-100));
// 출력: "-€ 100,00"
JavaScript는 지정한 부호 가시성을 유지하면서 각 로케일에 대한 적절한 형식 규칙을 따르는 출력을 보장합니다.
통화 기호 제어를 위한 실제 사용 사례
다양한 금융 컨텍스트에서는 서로 다른 기호 표시 전략이 필요합니다.
거래 내역
뱅킹 앱과 결제 플랫폼은 자금이 입출금되는 각 항목을 보여주는 거래 목록을 표시합니다. 모든 거래 방향을 명시적으로 표시하려면 signDisplay: "always"를 사용하세요.
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
signDisplay: "always"
});
const transactions = [
{ description: "Salary deposit", amount: 3500 },
{ description: "Rent payment", amount: -1200 },
{ description: "Grocery store", amount: -85.50 },
{ description: "Refund", amount: 25 }
];
transactions.forEach(transaction => {
console.log(`${transaction.description}: ${formatter.format(transaction.amount)}`);
});
// Output:
// Salary deposit: +$3,500.00
// Rent payment: -$1,200.00
// Grocery store: -$85.50
// Refund: +$25.00
명시적인 기호는 각 거래가 계좌 잔액을 증가시켰는지 감소시켰는지 명확하게 보여줍니다.
손익 계산서
재무 보고서는 명확한 양수 및 음수 표시기로 이익과 손실을 보여줍니다. 전문적인 재무제표를 위해 회계 표기법과 함께 signDisplay: "always"를 사용하세요.
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
currencySign: "accounting",
signDisplay: "always"
});
const financials = {
revenue: 150000,
expenses: -95000,
netIncome: 55000
};
console.log(`Revenue: ${formatter.format(financials.revenue)}`);
// Output: Revenue: +$150,000.00
console.log(`Expenses: ${formatter.format(financials.expenses)}`);
// Output: Expenses: ($95,000.00)
console.log(`Net Income: ${formatter.format(financials.netIncome)}`);
// Output: Net Income: +$55,000.00
이 형식은 이익과 손실을 모두 명확하게 표시하면서 회계 관행을 따릅니다.
잔액 변동 지표
투자 플랫폼과 트레이딩 앱은 계정 가치가 시간에 따라 어떻게 변화했는지 보여줍니다. 실제 변화를 강조하면서 변화가 없는 경우를 시각적으로 중립적으로 표시하려면 signDisplay: "exceptZero"를 사용하세요.
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
signDisplay: "exceptZero"
});
const changes = [
{ period: "Today", change: 125.50 },
{ period: "This week", change: -45.75 },
{ period: "This month", change: 0 },
{ period: "This year", change: 1850 }
];
changes.forEach(item => {
console.log(`${item.period}: ${formatter.format(item.change)}`);
});
// Output:
// Today: +$125.50
// This week: -$45.75
// This month: $0.00
// This year: +$1,850.00
0은 기호 없이 표시되어 변화가 없는 기간으로 두드러지게 보입니다.
계좌 잔액
뱅킹 앱은 현재 계좌 잔액을 표시하며, 음수 값은 당좌대월을 나타냅니다. 양수 잔액은 정상으로 처리하면서 부채를 강조하기 위해 signDisplay: "negative"를 사용하세요.
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
signDisplay: "negative"
});
const accounts = [
{ name: "Checking", balance: 2500 },
{ name: "Savings", balance: 15000 },
{ name: "Credit Card", balance: -850 }
];
accounts.forEach(account => {
console.log(`${account.name}: ${formatter.format(account.balance)}`);
});
// 출력:
// Checking: $2,500.00
// Savings: $15,000.00
// Credit Card: -$850.00
마이너스 기호는 음수 잔액에 주의를 끌게 하는 반면, 양수 잔액은 기호 없이 표시됩니다.
가격 비교 절대 차이
쇼핑 앱과 가격 비교 도구는 옵션 간 가격 차이를 보여줍니다. 방향이 중요하지 않은 절대 가격 차이를 표시할 때는 signDisplay: "never"를 사용하세요.
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
signDisplay: "never"
});
const comparisons = [
{ item: "Laptop A vs B", difference: -150 },
{ item: "Phone X vs Y", difference: 75 },
{ item: "Tablet M vs N", difference: -25 }
];
comparisons.forEach(comp => {
console.log(`${comp.item}: ${formatter.format(comp.difference)} difference`);
});
// 출력:
// Laptop A vs B: $150.00 difference
// Phone X vs Y: $75.00 difference
// Tablet M vs N: $25.00 difference
모든 금액은 양수 값으로 표시되어 어떤 옵션이 더 비싼지와 관계없이 차이의 크기를 보여줍니다.
signDisplay와 소수점 정밀도 결합하기
'signDisplay' 옵션은 모든 다른 통화 형식 옵션과 함께 작동합니다. 소수 자릿수, 반올림 및 부호 표시를 함께 제어할 수 있습니다.
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
signDisplay: "always",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
console.log(formatter.format(1234.5));
// 출력: "+$1,234.50"
console.log(formatter.format(-89.1));
// 출력: "-$89.10"
이는 모든 금액에 대해 명시적인 부호를 표시하면서 일관된 소수점 정밀도를 보장합니다.
과학적 또는 재무 계산을 위해 signDisplay를 최소 및 최대 유효 자릿수와 결합할 수도 있습니다.
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
signDisplay: "always",
minimumSignificantDigits: 3,
maximumSignificantDigits: 3
});
console.log(formatter.format(1234.567));
// 출력: "+$1,230"
console.log(formatter.format(-0.0456));
// 출력: "-$0.0456"
포맷터는 지정한 부호 표시 동작을 유지하면서 유효 자릿수 규칙을 적용합니다.
기억해야 할 사항
Intl.NumberFormat의 signDisplay 옵션은 형식화된 통화 금액에 플러스 및 마이너스 기호가 표시되는 시기를 제어합니다. 모든 금액에 명시적 기호를 표시하려면 "always", 0에서는 기호를 숨기려면 "exceptZero", 기본 동작에는 "auto", 마이너스 기호만 표시하려면 "negative", 모든 기호를 숨기려면 "never"를 사용하세요.
재무 컨텍스트에 따라 적절한 signDisplay 값을 선택하세요. 거래 내역에는 모든 금액에 명시적 기호가 필요합니다. 잔액 변경 표시기는 0을 시각적으로 중립적으로 만드는 것이 좋습니다. 계좌 잔액은 음수 값만 강조하는 것이 효과적입니다. 가격 비교에는 종종 기호 없는 절대값이 필요합니다.
signDisplay를 회계 표기법, 통화 표시 모드 및 소수점 정밀도 옵션과 결합하여 금융 애플리케이션에 필요한 정확한 통화 형식을 만드세요. JavaScript는 기호 표시 기본 설정을 존중하면서 로케일별 기호 위치를 자동으로 처리합니다.