천 단위 구분 기호로 숫자 형식 지정하는 방법
JavaScript를 사용하여 로케일에 적합한 그룹화 기호로 큰 숫자 표시하기
소개
큰 숫자는 시각적 구분 없이 읽기 어렵습니다. 1234567라는 숫자는 백만인지 천만인지 판단하기 위해 신중하게 세어야 합니다. 구분 기호를 추가하면 1,234,567가 되어 즉시 약 백만으로 인식할 수 있습니다.
국가마다 숫자 그룹을 구분하는 기호가 다릅니다. 미국인은 쉼표를 사용하고, 독일인은 마침표를 사용하며, 프랑스어 사용자는 공백을 사용합니다. 전 세계 사람들이 사용하는 애플리케이션에서 숫자를 표시할 때는 각 사용자의 기대에 맞게 숫자 형식을 지정해야 합니다.
JavaScript는 이를 자동으로 처리하기 위해 Intl.NumberFormat API를 제공합니다. 이 레슨에서는 천 단위 구분 기호가 어떻게 작동하는지, 로케일에 따라 왜 다른지, 그리고 모든 언어나 지역에 맞게 숫자를 올바르게 형식화하는 방법을 설명합니다.
천 단위 구분 기호란
천 단위 구분 기호는 큰 숫자를 읽기 쉽게 만들기 위해 숫자 그룹 사이에 삽입되는 기호입니다. 대부분의 로케일에서 숫자는 오른쪽에서 왼쪽으로 세 자리씩 그룹화됩니다. 1234567라는 숫자는 쉼표 구분 기호를 사용하여 1,234,567가 됩니다.
"천 단위 구분 기호"라는 용어는 세 자리마다 구분 기호가 나타나는 가장 일반적인 사용 사례에서 유래했습니다. 그러나 동일한 메커니즘이 십만, 백만, 십억 등 모든 숫자 그룹화에 적용됩니다.
구분 기호가 없으면 숫자가 함께 이어져 신중하게 세어야 합니다. 구분 기호가 있으면 숫자의 크기를 빠르게 식별할 수 있습니다. 이러한 시각적 그룹화는 읽기 오류를 줄이고 이해도를 향상시킵니다.
천 단위 구분 기호가 로케일에 따라 다른 이유
국가마다 숫자를 작성하는 규칙이 다르게 확립되었습니다. 이러한 규칙은 지역 인쇄 관행, 교육 시스템, 문화적 선호도에 따라 독립적으로 발전했습니다.
미국, 영국, 호주와 같은 영어권 국가에서는 쉼표가 천 단위 구분 기호로 사용됩니다. 백만이라는 숫자는 1,000,000로 표시됩니다.
독일, 이탈리아, 스페인, 포르투갈을 포함한 많은 유럽 국가에서는 마침표가 천 단위 구분 기호로 사용됩니다. 같은 숫자가 1.000.000로 표시됩니다.
프랑스와 많은 프랑스어권 지역에서는 공백이 천 단위 구분 기호로 사용됩니다. 숫자는 1 000 000로 표시됩니다.
스위스에서는 아포스트로피가 천 단위 구분 기호로 사용됩니다. 숫자는 1'000'000로 표시됩니다.
인도와 같은 일부 국가에서는 다른 그룹화 패턴을 사용합니다. 인도 숫자 체계는 처음 세 자리를 그룹화한 다음 이후 숫자를 두 자리씩 그룹화합니다. 백만은 lakh 체계를 사용하여 10,00,000로 표시됩니다.
특정 구분 기호 문자를 하드코딩하면 모든 사용자가 동일한 규칙을 따른다고 가정하게 됩니다. 이는 다른 지역 사용자가 애플리케이션을 사용하기 어렵게 만듭니다.
Intl.NumberFormat을 사용하여 천 단위 구분 기호 추가하기
Intl.NumberFormat 생성자는 로케일별 규칙을 적용하는 숫자 포맷터를 생성합니다. 첫 번째 인수로 로케일 식별자를 전달한 다음 숫자와 함께 format() 메서드를 호출합니다.
const formatter = new Intl.NumberFormat('en-US');
console.log(formatter.format(1234567));
// Output: "1,234,567"
이는 천 단위 구분 기호로 쉼표를 사용하는 미국 영어용 포매터를 생성합니다. format() 메서드는 숫자를 적절한 구분 기호가 삽입된 문자열로 변환합니다.
로케일 식별자를 변경하여 동일한 숫자를 다른 로케일에 맞게 포맷할 수 있습니다.
const usFormatter = new Intl.NumberFormat('en-US');
console.log(usFormatter.format(1234567));
// Output: "1,234,567"
const deFormatter = new Intl.NumberFormat('de-DE');
console.log(deFormatter.format(1234567));
// Output: "1.234.567"
const frFormatter = new Intl.NumberFormat('fr-FR');
console.log(frFormatter.format(1234567));
// Output: "1 234 567"
각 포맷터는 해당 로케일의 규칙을 적용합니다. 독일 포맷터는 마침표를 사용하고, 프랑스 포맷터는 공백을 사용하며, 미국 포맷터는 쉼표를 사용합니다. 각 로케일이 어떤 기호를 사용하는지 알 필요가 없습니다. API가 이러한 세부 사항을 자동으로 처리합니다.
사용자의 로케일에 맞게 숫자 포맷하기
특정 로케일을 하드코딩하는 대신 브라우저에서 사용자가 선호하는 언어를 사용할 수 있습니다. navigator.language 속성은 사용자의 최우선 언어 기본 설정을 반환합니다.
const userLocale = navigator.language;
const formatter = new Intl.NumberFormat(userLocale);
console.log(formatter.format(1234567));
// Output varies by user's locale
// For en-US: "1,234,567"
// For de-DE: "1.234.567"
// For fr-FR: "1 234 567"
이 접근 방식은 사용자가 수동으로 로케일을 선택할 필요 없이 각 사용자의 기대에 따라 숫자를 표시합니다. 브라우저가 언어 기본 설정을 제공하고, Intl API가 적절한 형식 규칙을 적용합니다.
또한 선호하는 언어의 전체 배열을 전달하여 폴백 동작을 활성화할 수 있습니다.
const formatter = new Intl.NumberFormat(navigator.languages);
console.log(formatter.format(1234567));
API는 배열에서 지원하는 첫 번째 로케일을 사용합니다. 이는 사용자의 최우선 기본 설정을 사용할 수 없을 때 더 나은 폴백 처리를 제공합니다.
기본 그룹화 동작 이해하기
기본적으로 Intl.NumberFormat는 그룹화의 이점을 얻을 수 있을 만큼 충분히 큰 모든 숫자에 천 단위 구분 기호를 적용합니다. 네 자리 이상의 숫자는 일반적으로 구분 기호를 받지만 이는 로케일에 따라 다릅니다.
const formatter = new Intl.NumberFormat('en-US');
console.log(formatter.format(123));
// Output: "123"
console.log(formatter.format(1234));
// Output: "1,234"
console.log(formatter.format(12345));
// Output: "12,345"
console.log(formatter.format(123456));
// Output: "123,456"
123와 같은 작은 숫자는 구분 기호가 필요하지 않으며 구분 기호 없이 표시됩니다. 1234부터 시작하는 숫자는 그룹화가 가독성을 향상시키기 때문에 구분 기호를 받습니다.
API는 로케일 규칙에 따라 구분 기호가 유용한 시점을 자동으로 결정합니다. 각 숫자를 형식화하기 전에 크기를 수동으로 확인할 필요가 없습니다.
천 단위 구분 기호를 사용한 소수 형식화
Intl.NumberFormat API는 숫자의 정수 부분과 소수 부분을 모두 처리합니다. 천 단위 구분 기호는 정수 부분에 나타나며 소수점과 소수 자릿수는 로케일 규칙을 따릅니다.
const usFormatter = new Intl.NumberFormat('en-US');
console.log(usFormatter.format(1234567.89));
// Output: "1,234,567.89"
const deFormatter = new Intl.NumberFormat('de-DE');
console.log(deFormatter.format(1234567.89));
// Output: "1.234.567,89"
독일어 형식은 두 규칙을 모두 반대로 사용한다는 점에 주목하세요. 마침표는 정수 부분에서 천 단위 구분 기호로 사용되고, 쉼표는 소수 부분의 소수 구분 기호로 사용됩니다. Intl API는 로케일에 따라 두 측면을 모두 올바르게 처리합니다.
매우 큰 숫자 다루기
숫자가 커질수록 천 단위 구분 기호가 점점 더 중요해집니다. 구분 기호가 없으면 7자리, 8자리 또는 9자리 숫자를 한눈에 정확하게 읽는 것이 거의 불가능합니다.
const formatter = new Intl.NumberFormat('en-US');
console.log(formatter.format(1234567890));
// Output: "1,234,567,890"
console.log(formatter.format(9876543210));
// Output: "9,876,543,210"
포맷터는 3자리마다 구분 기호를 삽입하여 10억 단위의 숫자도 읽기 쉽게 만듭니다. 이 자동 그룹화는 구분 기호 위치를 수동으로 계산할 필요 없이 모든 크기의 숫자에 대해 작동합니다.
성능을 위한 포맷터 재사용
새로운 Intl.NumberFormat 인스턴스를 생성하려면 로케일 데이터를 로드하고 옵션을 처리해야 합니다. 동일한 로케일과 설정으로 여러 숫자를 포맷해야 하는 경우 포매터를 한 번 생성하고 재사용하십시오.
const formatter = new Intl.NumberFormat('en-US');
const numbers = [1234, 5678, 91011, 121314];
numbers.forEach(number => {
console.log(formatter.format(number));
});
// Output:
// "1,234"
// "5,678"
// "91,011"
// "121,314"
이 접근 방식은 각 숫자마다 새 포맷터를 생성하는 것보다 효율적입니다. 수백 또는 수천 개의 값이 있는 배열을 포맷할 때 성능 차이가 두드러집니다.
템플릿에서 숫자 포맷하기
사용자에게 숫자를 표시하는 모든 곳에서 Intl.NumberFormat를 사용할 수 있습니다. 여기에는 HTML 템플릿에 포맷된 숫자 삽입, 테이블에 값 표시 또는 대시보드에 통계 표시가 포함됩니다.
const formatter = new Intl.NumberFormat(navigator.language);
const totalUsers = 1234567;
const activeUsers = 891234;
document.getElementById('total-users').textContent = formatter.format(totalUsers);
document.getElementById('active-users').textContent = formatter.format(activeUsers);
포맷된 문자열은 다른 문자열 값과 동일하게 작동합니다. 텍스트 콘텐츠, 속성 또는 사용자에게 정보를 표시하는 다른 컨텍스트에 삽입할 수 있습니다.