자바스크립트 숫자 천단위 콤마 처리 방법 정리

웹 페이지에서 금액이나 수량처럼 큰 숫자를 출력할 때는 가독성을 높이기 위해 천 단위로 콤마(,)를 찍는 처리가 필요합니다.
자바스크립트에서는 내장 메서드 또는 정규식을 통해 쉽게 처리할 수 있지만, 각 방식에 따라 장단점이 존재합니다.
이번 글에서는 자바스크립트 숫자에 천 단위 콤마를 넣는 다양한 방법과 실무 활용 팁까지 함께 정리해 보겠습니다.

1. 숫자 포맷팅이 필요한 이유

1000000 → 1,000,000으로 표현 시 가독성 향상
가격, 통계, 주문 수량 등에서 사용자 경험 개선
숫자가 아닌 문자열로 포맷되므로 출력 전용 처리임을 인지해야 함

실무에서는 출력은 콤마 적용, 계산은 원본 숫자를 사용하는 방식이 일반적입니다.

2. toLocaleString()을 활용한 콤마 처리

가장 간단하고 직관적인 방법은 toLocaleString() 메서드를 활용하는 것입니다.

const num = 1234567890;
const formatted = num.toLocaleString(); // "1,234,567,890"

지역(locale)에 맞는 숫자 포맷으로 자동 변환
소수점 처리도 가능 (toLocaleString('en-US', { maximumFractionDigits: 2 }))
반환값은 문자열

✅ 실무에서는 가격, 통계 출력에 가장 널리 사용되는 방법입니다.

3. 정규표현식으로 직접 구현하기

보다 커스터마이징된 처리를 원할 경우 정규식을 사용할 수 있습니다.

function addComma(number) {
  return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

addComma(9876543210); // "9,876,543,210"

\B: 단어 경계가 아닌 위치
(?=(\d{3})+(?!\d)): 뒤에서부터 3자리마다 위치 지정

🔍 정규식 방식은 정확한 제어가 가능하지만, 코드 이해도가 필요합니다.

4. 콤마 제거 및 숫자 역변환 방법

콤마가 포함된 문자열을 다시 숫자로 변환할 때는 replace()를 활용해 콤마를 제거한 후 Number() 또는 parseInt()로 형변환합니다.

const str = '1,234,567';
const num = parseInt(str.replace(/,/g, '')); // 1234567

/g 플래그는 모든 콤마를 전역 제거
문자열 그대로 연산하면 NaN 발생 가능하므로 숫자로 변환 필수

5. 실무 적용 시 유의할 점

숫자 출력 시에는 toLocaleString()으로 시각화
입력값 처리 시 콤마 제거 후 숫자로 변환하는 전처리 필요
API 통신 시에는 원본 숫자 값만 보내야 함
소수점 이하 처리도 주의: 반올림, 자리수 고정 필요 시 toFixed()와 조합

🧠 국제화를 고려한다면 toLocaleString('ko-KR'), toLocaleString('en-US')처럼 지역 설정을 명시하는 것이 바람직합니다.

✅ 마무리

자바스크립트 숫자에 천 단위 콤마를 적용하는 방법은 UI 가독성을 높이는 기본 요소입니다.
toLocaleString()은 빠르고 편리하며, 정규식은 더 정밀한 제어가 필요한 상황에 적합합니다.
숫자 입력, 출력, 저장의 각 흐름에서 적절한 형 변환과 콤마 처리 로직을 구분해서 사용하는 것이 실무의 핵심입니다.

기록기록