JavaScript / 숫자 천 단위 쉼표 넣기·제거하기와 입력 검증
JavaScript 숫자에 천 단위 구분 기호를 표시할 때는 toLocaleString("ko-KR") 또는 Intl.NumberFormat("ko-KR")을 사용합니다. 쉼표가 있는 입력을 계산용 숫자로 바꾸려면 먼저 허용할 입력 형식과 쉼표 위치를 검사한 뒤 쉼표를 제거하고 Number()로 변환하세요. 표시 문자열과 계산용 값은 별도로 다뤄야 합니다.
숫자를 천 단위로 표시하기
로캘은 언어·지역의 숫자 표시 규칙을 지정합니다. 한국어 ko-KR에서는 쉼표를 묶음 구분 기호로 사용하지만, 다른 로캘에서는 기호가 달라질 수 있습니다. 로캘을 생략하면 실행 환경의 기본값이 적용됩니다. 같은 옵션으로 여러 숫자를 표시한다면 포맷터 객체를 재사용할 수 있습니다.
console.log((1234567.89).toLocaleString('ko-KR')); // 1,234,567.89
const formatter = new Intl.NumberFormat('ko-KR');
console.log(formatter.format(1234567.89)); // 1,234,567.89
console.log(typeof formatter.format(1234567.89)); // string포맷 결과는 문자열이라 그대로 더하거나 곱하는 계산에 쓰면 안 됩니다. MDN의 Number.toLocaleString() 문서에서 로캘별 동작을 확인할 수 있습니다.
소수 자릿수와 통화 형식
소수 자릿수를 고정하려면 최소·최대 자릿수를 함께 지정합니다. 최대 자릿수를 넘어서는 부분은 표시 과정에서 반올림됩니다. 원래 숫자 변수가 수정되는 것은 아닙니다. 금액을 표시할 때는 style: "currency"와 통화 코드를 지정하면 통화별 표시 규칙을 적용할 수 있습니다.
const decimal = new Intl.NumberFormat('ko-KR', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
console.log(decimal.format(1234.5)); // 1,234.50
const won = new Intl.NumberFormat('ko-KR', {
style: 'currency', currency: 'KRW'
});
console.log(won.format(1234567)); // 원화 통화 형식으로 표시일반 숫자 형식의 기본 최대 소수 자릿수는 3입니다. 원하는 정밀도와 반올림 방식을 요구 사항에 맞게 선택하세요. 금융 계산에 부동소수점 Number를 그대로 사용하는 것은 별도의 정밀도 검토가 필요합니다. MDN의 NumberFormat 옵션 문서에서 기본 자릿수와 반올림을 확인할 수 있습니다.
쉼표를 제거하기 전에 입력 형식 검사하기
replace(/,/g, "")는 쉼표를 모두 지우지만 결과는 여전히 문자열입니다. "12,34"처럼 잘못 묶인 값도 단순 치환하면 1234가 되므로, 값을 받아들이기 전에 형식을 확인해야 합니다. 모든 숫자가 아닌 문자를 지우는 방식은 부호와 소수점을 훼손할 수 있습니다.
const text = '1,234,567.89';
const plain = text.replace(/,/g, '');
console.log(plain, typeof plain); // 1234567.89 string
console.log(Number(plain)); // 1234567.89아래 실습은 앞뒤 공백, 선택적 부호, 정수부와 선택적 소수부를 받습니다. 쉼표가 있으면 첫 묶음은 1~3자리이고 뒤 묶음은 정확히 3자리여야 합니다. 공백·통화 기호·다른 지역의 구분 기호는 받지 않습니다. 숫자로 변환한 후 유한성도 검사하고, 안전한 범위를 벗어난 정수는 거부합니다.
전체 예제: 입력 검사와 표시 분리
아래 코드를 number-grouping.html로 저장해 브라우저에서 엽니다. 초기값은 계산용 숫자 1234567.89와 표시 문자열 1,234,567.89로 나옵니다. -12,345.6과 0은 허용되지만 12,34, 1,234,, 빈 값, 원화 기호가 붙은 값은 거부됩니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>천 단위 쉼표 표시와 제거</title>
</head>
<body>
<h1>천 단위 쉼표 표시와 입력 검사</h1>
<label for="value">쉼표가 있거나 없는 십진수</label>
<input id="value" type="text" value="1,234,567.89">
<button id="format" type="button">검사하고 표시</button>
<pre id="output" aria-live="polite"></pre>
<script>
const formatter = new Intl.NumberFormat('ko-KR', {
useGrouping: true,
maximumFractionDigits: 10
});
const input = document.querySelector('#value');
const output = document.querySelector('#output');
function parseGroupedDecimal(raw) {
const text = raw.trim();
const pattern = /^[+-]?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/;
if (!pattern.test(text)) return null;
const value = Number(text.replace(/,/g, ''));
if (!Number.isFinite(value)) return null;
if (Number.isInteger(value) && !Number.isSafeInteger(value)) return null;
return value;
}
function show() {
const value = parseGroupedDecimal(input.value);
if (value === null) {
output.textContent = '쉼표 위치와 숫자 범위를 확인하세요.';
return;
}
output.textContent = `계산용 숫자: ${value}\n표시 문자열: ${formatter.format(value)}`;
}
document.querySelector('#format').addEventListener('click', show);
show();
</script>
</body>
</html>검증 함수는 실패 시 null을 반환하므로 유효한 숫자 0과 실패를 구분할 수 있습니다. 정수 입력의 안전한 범위를 넘으면 정확한 자릿수를 보존할 수 없으므로 거부합니다. 소수도 이진 부동소수점 Number로 표현되어 원래 입력한 끝 0이나 모든 십진 자릿수를 보존하지 않습니다.
다른 로캘의 표시 문자열을 이 정규식으로 파싱하지 마세요. 예를 들어 독일식 1.234,56은 이 실습의 입력 형식과 다릅니다. Intl.NumberFormat은 표시 도구이며 역변환용 범용 파서를 제공하지 않으므로 입력 형식은 서비스가 별도로 정해야 합니다. 정수의 안전한 범위는 MDN의 Number.isSafeInteger() 문서에서 확인할 수 있습니다.
