퍼센트 기호로 백분율 형식을 지정하는 방법
Intl.NumberFormat에서 퍼센트 스타일을 사용하여 로케일에 적합한 형식으로 숫자를 백분율로 표시
소개
백분율은 완료 진행 상황 표시부터 이자율 및 할인 금액 표시까지 다양한 애플리케이션에서 나타납니다. 숫자와 퍼센트 기호를 연결하는 간단한 접근 방식은 기본적인 경우에는 작동하지만, 다양한 언어와 지역에서 백분율을 형식화하는 방식을 고려하지 못합니다. 터키어에서는 퍼센트 기호가 %50과 같이 숫자 앞에 나타납니다. 프랑스어에서는 50 %처럼 숫자와 퍼센트 기호 사이에 공백이 있습니다. 아랍어는 표준 % 기호 대신 특수 퍼센트 문자를 사용합니다.
JavaScript의 Intl.NumberFormat API는 이러한 형식 차이를 자동으로 처리합니다. style 옵션을 "percent"로 설정하면 로케일별 코드를 작성하지 않고도 모든 로케일에 대해 올바르게 형식화된 백분율을 얻을 수 있습니다.
로케일별로 백분율 형식이 다른 이유
퍼센트 기호 위치와 간격 규칙은 로케일마다 다릅니다. 영어는 퍼센트 기호를 공백 없이 숫자 바로 뒤에 배치합니다. 프랑스어는 퍼센트 기호 앞에 공백을 추가합니다. 터키어는 퍼센트 기호를 숫자 앞에 배치합니다. 이러한 변형은 각 언어의 자연스러운 읽기 패턴과 관례를 반영합니다.
형식 차이는 기호 배치를 넘어 확장됩니다. 일부 로케일은 퍼센트 기호에 다른 문자를 사용합니다. 아랍어는 ASCII 퍼센트 기호 대신 ٪ (U+066A)를 사용합니다. 소수점 구분 기호와 천 단위 구분 기호도 일반 숫자 형식과 마찬가지로 로케일에 따라 다릅니다.
문자열 연결로 백분율 형식을 하드코딩하면 모든 사용자가 단일 로케일의 형식을 보도록 강제합니다. 프랑스 사용자가 50 % 대신 50%를 보면 부자연스러운 형식을 경험합니다. 터키 사용자가 %50을 예상할 때 50%를 보면 같은 문제에 직면합니다. Intl API는 각 로케일에 맞는 올바른 형식 규칙을 적용하여 이 문제를 해결합니다.
숫자를 백분율로 포맷팅하기
Intl.NumberFormat의 style 옵션은 숫자를 일반 숫자, 통화, 백분율 또는 단위로 포맷팅할지 제어합니다. 숫자를 백분율로 포맷팅하려면 style을 "percent"로 설정하세요.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent"
});
console.log(formatter.format(0.75));
// 출력: "75%"
console.log(formatter.format(0.05));
// 출력: "5%"
console.log(formatter.format(1.5));
// 출력: "150%"
포맷터는 자동으로 입력값에 100을 곱하고 퍼센트 기호를 추가합니다. 이는 포맷터에 소수 값을 전달한다는 의미입니다. 0.75 값은 75%가 됩니다. 1.5 값은 150%가 됩니다.
이러한 소수 입력 규칙은 수학과 대부분의 프로그래밍 계산에서 백분율이 작동하는 방식과 일치합니다. 성장률이나 완료 비율과 같은 백분율을 계산할 때, 결과는 일반적으로 0과 1 사이의 소수 값입니다. 이 값을 먼저 백분율로 변환하지 않고 직접 포맷터에 전달할 수 있습니다.
소수 입력 값 이해하기
백분율 포맷터는 1.0이 100%를 나타내는 소수 입력을 예상합니다. 이 설계 선택은 코드에서 백분율이 계산되는 방식과 일치합니다.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent"
});
// 완료 백분율 계산
const completed = 75;
const total = 100;
const ratio = completed / total;
console.log(formatter.format(ratio));
// 출력: "75%"
// 성장률 계산
const oldValue = 1000;
const newValue = 1250;
const growth = (newValue - oldValue) / oldValue;
console.log(formatter.format(growth));
// 출력: "25%"
completed를 total로 나누면 0.75가 됩니다. 이를 직접 포맷터에 전달하면 75%로 표시됩니다. 성장률을 원래 값에 대한 변화의 비율로 계산하면 0.25가 됩니다. 포맷터는 이를 25%로 표시합니다.
이 접근 방식은 개발자가 포맷팅 전에 100을 곱하여 75% 대신 7500%와 같은 값이 나오는 일반적인 오류를 방지합니다. 포맷터가 곱셈을 처리하므로 코드에서는 자연스러운 소수 표현으로 작업할 수 있습니다.
0-1 범위 외의 값 처리하기
백분율은 0%와 100% 사이의 값으로만 제한되지 않습니다. 0 미만의 값은 음수 백분율을 나타냅니다. 1.0을 초과하는 값은 100%보다 큰 백분율을 나타냅니다.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent"
});
console.log(formatter.format(-0.15));
// 출력: "-15%"
console.log(formatter.format(2.5));
// 출력: "250%"
console.log(formatter.format(0.0025));
// 출력: "0%"
음수 값은 마이너스 기호와 함께 형식이 지정됩니다. 이는 감소, 손실 또는 마이너스 성장률을 표시할 때 유용합니다. 1.0보다 큰 값은 100%를 초과하는 백분율로 형식이 지정되며, 이는 전년 대비 성장률이나 새 값이 기준선을 초과하는 비교에서 흔히 사용됩니다.
매우 작은 값은 기본 정밀도 설정으로 인해 0%로 반올림될 수 있습니다. 0.25%를 나타내는 값 0.0025는 백분율의 기본 최대 소수 자릿수가 0이기 때문에 0%로 표시됩니다. 다음 수업에서는 이러한 작은 백분율을 정확하게 표시하기 위해 소수점 자릿수를 제어하는 방법을 다룹니다.
다양한 로케일에서 백분율 형식 지정하기
백분율 형식은 지정한 로케일에 맞게 조정됩니다. 각 로케일은 기호 배치, 간격 및 기호에 대한 고유한 규칙을 적용합니다.
const enFormatter = new Intl.NumberFormat("en-US", {
style: "percent"
});
console.log(enFormatter.format(0.5));
// 출력: "50%"
const frFormatter = new Intl.NumberFormat("fr-FR", {
style: "percent"
});
console.log(frFormatter.format(0.5));
// 출력: "50 %"
const trFormatter = new Intl.NumberFormat("tr-TR", {
style: "percent"
});
console.log(trFormatter.format(0.5));
// 출력: "%50"
const arFormatter = new Intl.NumberFormat("ar-SA", {
style: "percent"
});
console.log(arFormatter.format(0.5));
// 출력: "٪50"
영어는 숫자 바로 뒤에 퍼센트 기호를 배치합니다. 프랑스어는 퍼센트 기호 앞에 공백을 추가합니다. 터키어는 숫자 앞에 퍼센트 기호를 배치합니다. 아랍어는 아랍어 퍼센트 기호를 사용하고 오른쪽에서 왼쪽으로 텍스트 방향을 따릅니다.
이러한 차이점은 로케일 매개변수에 따라 자동으로 발생합니다. 다양한 로케일을 처리하기 위한 조건부 로직을 작성할 필요가 없습니다. 사용자의 로케일로 포맷터를 생성하면 해당 로케일에 맞는 올바른 출력이 생성됩니다.
백분율의 소수점 자릿수 제어하기
기본적으로 백분율 형식은 소수점 자릿수를 표시하지 않습니다. 0.755와 같은 값은 반올림 후 76%로 표시됩니다. minimumFractionDigits와 maximumFractionDigits 옵션을 사용하여 소수점 자릿수를 제어할 수 있습니다.
const defaultFormatter = new Intl.NumberFormat("en-US", {
style: "percent"
});
console.log(defaultFormatter.format(0.755));
// 출력: "76%"
const oneDecimalFormatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 1,
maximumFractionDigits: 1
});
console.log(oneDecimalFormatter.format(0.755));
// 출력: "75.5%"
const twoDecimalFormatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
console.log(twoDecimalFormatter.format(0.755));
// 출력: "75.50%"
minimumFractionDigits 옵션은 포맷터가 최소한 지정된 수의 소수점 자릿수를 표시하도록 보장하며, 필요한 경우 뒤에 0을 추가합니다. maximumFractionDigits 옵션은 소수점 자릿수를 제한하고, 필요한 경우 값을 반올림합니다.
두 값을 동일하게 설정하면 모든 백분율에 대해 일관된 형식을 보장합니다. 이는 모든 백분율을 시각적으로 정렬하려는 표와 차트에서 유용합니다.
다음 수업에서는 소수점 자릿수 제어에 대해 더 깊이 다루며, 후행 0을 처리하고 매우 작은 백분율을 정확하게 표시하는 방법을 포함합니다.
백분율과 부호 표시 결합하기
백분율 형식은 signDisplay 옵션과 함께 작동하여 양수 백분율에 대해 플러스 부호를 명시적으로 표시합니다. 이는 부호가 방향을 나타내는 변화율이나 성장률을 표시할 때 유용합니다.
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%"
signDisplay 옵션은 이전 수업에서 다루었습니다. 백분율 형식과 결합하면 백분율이 증가인지 감소인지를 명확히 합니다. 명시적인 플러스 부호가 없으면 양수 백분율은 이득과 손실이 모두 표시되는 상황에서 모호할 수 있습니다.
0을 백분율로 포맷팅하기
0은 기본적으로 0%로 포맷팅됩니다. 0을 처리하는 방법은 0이 변화 없음, 값 없음 또는 의미 있는 측정값을 나타내는지에 따라 달라집니다.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent"
});
console.log(formatter.format(0));
// Output: "0%"
const withSignFormatter = new Intl.NumberFormat("en-US", {
style: "percent",
signDisplay: "exceptZero"
});
console.log(withSignFormatter.format(0.05));
// Output: "+5%"
console.log(withSignFormatter.format(0));
// Output: "0%"
signDisplay: "exceptZero"를 사용하면 양수 및 음수 백분율에는 부호를 표시하지만 0에는 부호를 생략합니다. 이렇게 하면 0이 변화 없음과 같은 중립 상태를 나타낼 때 시각적으로 구분됩니다.
백분율 포맷팅을 사용해야 하는 경우
백분율 포맷팅은 자연스럽게 백분율로 표현되는 비율, 요율 또는 비례를 표시할 때 사용합니다. 일반적인 사용 사례로는 완료 진행률, 이자율, 할인 금액, 성장률, 성공률 및 확률 값이 있습니다.
로케일에 관계없이 특정 위치에 퍼센트 기호가 나타나야 할 때는 백분율 포맷팅을 사용하지 마세요. 디자인상 퍼센트 기호가 시각적 일관성을 위해 항상 오른쪽에 나타나야 한다면, 대신 문자열 연결을 사용하세요. 그러나 이는 국제화 정확성을 희생합니다.
또한 이미 100을 곱한 값으로 작업할 때는 백분율 포맷팅을 피하세요. 데이터가 75가 75%를 의미하는 정수로 백분율을 저장하는 경우, 포맷팅하기 전에 100으로 나누거나 퍼센트 기호를 수동으로 추가하여 일반 숫자 포맷팅을 사용하세요.
백분율 포맷터 정밀도 이해하기
백분율 포맷팅의 기본 정밀도는 소수점 이하 0자리입니다. 이는 입력 값에 따라 정밀도를 조정하는 일반 숫자 포맷팅과 다릅니다. 백분율 포맷터는 소수 자릿수 옵션을 명시적으로 설정하지 않는 한 값을 정수 백분율로 반올림합니다.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent"
});
console.log(formatter.format(0.755));
// Output: "76%"
console.log(formatter.format(0.754));
// Output: "75%"
console.log(formatter.format(0.001));
// Output: "0%"
값은 가장 가까운 정수 백분율로 반올림됩니다. 0.755 값은 76%로 반올림됩니다. 0.754 값은 75%로 반올림됩니다. 0.001과 같은 매우 작은 값은 0%로 반올림됩니다.
작은 백분율이나 소수 백분율을 표시해야 하는 경우 최대 소수 자릿수를 늘리세요. 다음 수업에서는 정밀도 제어에 대해 자세히 다룹니다.