Contents
see List작성일 2014. 12. 31.
JavaScript 천단위 콤마 찍기
숫자에 천단위마다 콤마를 추가하여 가독성을 높이는 방법입니다.
정규표현식 사용
// 기본 방법
var number = 1234567890;
var formatted = number.toString().replace(/(d)(?=(?:d{3})+(?!d))/g, "$1,");
// 결과: "1,234,567,890"
toLocaleString() 사용 (권장)
var number = 1234567890;
var formatted = number.toLocaleString(); // "1,234,567,890"
// 소수점 포함
var decimal = 1234567.89;
decimal.toLocaleString(); // "1,234,567.89"
// 특정 로케일 지정
number.toLocaleString("ko-KR"); // 한국 형식
number.toLocaleString("en-US"); // 미국 형식
다양한 구현 방법
// 함수로 만들기
function numberWithCommas(x) {
return x.toString().replace(/B(?=(d{3})+(?!d))/g, ",");
}
// 사용
numberWithCommas(1234567); // "1,234,567"
// 소수점 처리 포함
function formatNumber(num) {
var parts = num.toString().split(".");
parts[0] = parts[0].replace(/B(?=(d{3})+(?!d))/g, ",");
return parts.join(".");
}
formatNumber(1234567.89); // "1,234,567.89"
Intl.NumberFormat 사용
var formatter = new Intl.NumberFormat("ko-KR");
formatter.format(1234567890); // "1,234,567,890"
// 통화 형식
var currencyFormatter = new Intl.NumberFormat("ko-KR", {
style: "currency",
currency: "KRW"
});
currencyFormatter.format(1234567890); // "uffe61,234,567,890"
// 소수점 자릿수 지정
var decimalFormatter = new Intl.NumberFormat("ko-KR", {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
decimalFormatter.format(1234567.8); // "1,234,567.80"
콤마 제거 (숫자로 변환)
var formatted = "1,234,567,890";
// 콤마 제거
var number = parseInt(formatted.replace(/,/g, ""));
// 또는
var number = Number(formatted.replace(/,/g, ""));
jQuery 플러그인 방식
$.fn.formatNumber = function() {
return this.each(function() {
var num = $(this).text();
$(this).text(Number(num).toLocaleString());
});
};
// 사용
$(".number").formatNumber();javascript
| No | 작성일 | Title |
|---|---|---|
| 2921 | 2026. 05. 31. | 브라우저 중복 탭 작업 제어: BroadcastChannel과 Web Locks로 자동 저장 충돌 막기 |
| 2866 | 2026. 05. 23. | Node.js 운영 추적 로그 설계: AsyncLocalStorage로 요청 ID와 장애 원인 연결하기 |
| 2787 | 2026. 05. 15. | Node.js fetch 타임아웃·재시도 표준 패턴: AbortSignal로 장애 전파 막기 |
| 2589 | 2026. 04. 23. | ES2026 JavaScript 신기능 완전 가이드: using/await using, Array.fromAsync, Error.isError, Math.sumPrecise 실전 적용 |
| 2490 | 2026. 04. 14. | ES2025/ES2026 완벽 정리: Iterator Helpers, Temporal API, using 키워드 실전 가이드 |
| 2469 | 2026. 04. 13. | ES2026 완벽 가이드: Temporal API, using/await using, Array/Set 신기능 총정리 |
| 2449 | 2026. 04. 12. | ES2025/ES2026 JavaScript 신기능 완벽 정리: Temporal API부터 using 키워드까지 |
| 2425 | 2026. 04. 11. | Node.js 24 LTS 핵심 신기능 완벽 가이드 - V8 13.6, Permission Model, URLPattern |
| 2389 | 2026. 04. 09. | ES2025 핵심 신규 기능 총정리 - Set 연산, Iterator Helpers, Temporal API까지 |
| 2368 | 2026. 04. 08. | ES2025/ES2026 완벽 정리: Temporal API, Resource Management, 새 문법 총정리 |