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 |
|---|---|---|
| 2045 | 2025. 11. 30. | TypeScript 타입 시스템 완벽 가이드 |
| 2044 | 2025. 11. 30. | React 18 새 기능 - Concurrent Features |
| 1864 | 2022. 07. 27. | [vue3] vue3 setup 에서 자식 컴포넌트 메소드(함수) 호출하기 |
| 1848 | 2022. 06. 11. | [ vuejs ] router 데이터 전달방식 |
| 1847 | 2022. 06. 11. | [ vuejs ] this.$router.push 혹은 link-to 를 setup() 에서 구현 |
| 1846 | 2022. 06. 10. | [ vuejs3 , spring-boot ] 웹개발은 어떻게 구성해야 하는가 |
| 1825 | 2022. 05. 24. | [ vuejs ] 부모,자식 요소의 메소드 호출 |
| 1421 | 2018. 12. 06. | [ angualrjs ] ajax header 포함시켜 $http 사용하기 |
| 1381 | 2017. 11. 30. | 문자열을 숫자로 바꾸는 방법 parseInt 와 Number 비교 |
| 1220 | 2017. 03. 28. | [ AngularJs] bootstrap nav dropdown |