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 |
|---|---|---|
| 1180 | 2016. 11. 28. | [ AngularJS ] angularJs jquery selector |
| 1141 | 2016. 11. 01. | [ AngularJS ] ng-if 의 경우 상위 디렉브를 생성한다. |
| 1139 | 2016. 10. 21. | [ javascript ] 반응형 웹에서 PC 버전보기 구현 |
| 1076 | 2016. 09. 09. | [ AngularJS ] promise then 사용 |
| 1075 | 2016. 09. 07. | [ AngularJS ] 형제 태그 ng-repeat |
| 1074 | 2016. 09. 07. | [ AngularJS ] 의 이벤트 전파 |
| 1041 | 2016. 08. 18. | [ AngularJS ] json parsing spring ajax (and $$hashKey error ) |
| 1040 | 2016. 08. 18. | [ AngularJS ] select option ng-options |
| 1039 | 2016. 08. 18. | [ AngularJS ] ng-repeat 에서 ng-model 사용시 제대로 작동안할때 |
| 1038 | 2016. 08. 16. | [ AngularJS ] 어느 위치에서나 scope 에 접근하기 (전역,지역) |