Javascript 숫자에 천단위로 콤마(,) 넣기

쉽게 숫자에 천단위에 콤마를 넣는 방법입니다.

Intl.NumberFormat() 사용
var number = 1234567890.123456;

// 브라우저의 Local에 따라 표시
console.log(new Intl.NumberFormat().format(number));

// 한국 Local로 표시
console.log(new Intl.NumberFormat('ko-KR').format(number));

// 독일 Local로 표시
// 독일의 경우 천단위에 "."을 소숫점을 ","로 표시함.
console.log(new Intl.NumberFormat('de-DE').format(number));

// 천단위 와 소숫점 자리(5자리) 표시
// "0"을 5자리까지 채우지는 않음
console.log(new Intl.NumberFormat(undefined, { maximumFractionDigits: 5}).format(number));
 

Number.prototype.toLocalString() 사용
// 브라우저의 Local에 따라 표시
console.log(number.toLocaleString());

활용

 const handleChange = (e) => {
        const { name, value } = e.target;
        if (name === '이름') {
          setName(value);
        } else if (name === '가격') {
          const rawValue = value.replace(/[^0-9]/g, '');
          const formattedValue = new Intl.NumberFormat().format(rawValue);
          setPrice(formattedValue);
        }
      };

Intl.NumberFormat().format()은 JavaScript의 내장 객체인 Intl.NumberFormat의 format() 메서드를 사용하는 것입니다.

Intl.NumberFormat 객체는 숫자를 형식화하는 데 사용됩니다. format() 메서드는 숫자 값을 받아 해당 지역에 맞는 형식으로 포맷된 문자열을 반환합니다.

예를 들어, 다음과 같이 사용할 수 있습니다:

const rawValue = '10000';
const formattedValue = new Intl.NumberFormat().format(rawValue);
console.log(formattedValue); // 출력: "10,000" (예시는 한국 기준)