[JavaScript]숫자 포맷 설정

JavaScript에서 숫자에 콤마 또는 포맷을 설정하는 방법을 소개합니다.

 

목차

1. Intl.NumberFormat 함수
2. toLocaleString 함수
3. 참고

---

Intl.NumberFormat 함수

Intl.NumberFormat 함수는 숫자의 형식을 설정하는 함수로 지정된 지역의 통화 또는 백분율을 표시하는데 사용할 수 있습니다.

 

Intl.NumberFormat 함수의 형식은 다음과 같으며, 지역을 설정하는 첫 번째 매개변수(locales)와 숫자를 다양하게 표현할 수 있는 두 번째 매개변수(options)가 존재합니다.

new Intl.NumberFormat([locales[, options]]);

locales(생략 가능)

- 지역을 설정할 수 있습니다.

- 'en-IN', 'ja-JP', 'en-US', 'ko-KR' 등

 

options(생략 가능)

- 포맷 스타일을 설정할 수 있습니다.

 

다음은 Intl.NumberFormat 함수를 사용하여 아래의 값을 출력하는 코드입니다.

• Intl.NumberFormat 함수의 반환 타입
• 미국 및 영어 형식을 사용하여 천 단위 콤마
• 미국 및 영어 형식을 사용하여 통화 형식으로 출력

console.log(typeof(new Intl.NumberFormat('en-US').format(100000))); // string

console.log(new Intl.NumberFormat('en-US').format(100000)); // 100,000

console.log(new Intl.NumberFormat('en-US',
  { style: 'currency', currency: 'USD' }
).format(100000)); // $100,000.00

---

toLocaleString 함수

toLocaleString 함수는 이름에서 유추할 수 있듯이 특정 값을 지정된 지역에서 사용하는 표현 방식으로 변환 후 String 타입으로 반환하는 함수입니다.

 

toLocaleString 함수는 Number 타입 이외에도 Date, Array, Object 타입에도 사용할 수 있지만, Number 타입에서 사용한 경우만 소개합니다.

 

다음은 toLocaleString 함수의 반환 타입을 확인하는 코드입니다.

var testNum = 10000;

console.log(typeof(testNum)); // number

console.log(typeof(testNum.toLocaleString())); // string

console.log(typeof(testNum)); // number

 

위 예제에서 알 수 있듯이 toLocaleString 함수는 String 타입을 반환하며, 원래 변수의 타입이 변경되지는 않습니다.

 

다음은 첫 번째 매개변수에 지역을 설정하는 코드입니다.

var testNum = 10000;

console.log(testNum); // 10000

console.log(testNum.toLocaleString('ko-KR')); // 10,000

console.log(testNum.toLocaleString('ar-EG')); // ١٠٬٠٠٠

 

두 번째 매개변수는 화폐 단위 또는 숫자 단위와 같은 여러 옵션들을 설정할 수 있습니다.

 

다음은 숫자를 지정된 지역으로 변환 후 통화 형식으로 설정한 코드입니다.

var number = 123456.789;

console.log(number.toLocaleString('ko-KR', { style: 'currency', currency: 'KOR' }));
// KOR 123,456.79

console.log(number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }));
// ￥123,457

---

참고

Intl.NumberFormat 함수와 toLocaleString 함수에서 작성되는 파라미터는 아래 사이트를 참고해주시길 바랍니다.

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat

Intl.NumberFormat() constructor - JavaScript | MDN