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 |
|---|---|---|
| 360 | 2016. 05. 31. | [ bootstrap ] bootstrap modal multi modal wheel and focus not work |
| 359 | 2016. 05. 03. | [ javascript ] 이벤트 전파 |
| 357 | 2016. 04. 16. | [ datatable ] jquery datatable and editor exemple 사용법 예 |
| 312 | 2015. 07. 02. | [ jquery ] 선택된 라디오 박스 값 이름으로 가져오기 |
| 305 | 2015. 06. 16. | [ dynatree ] dynatree 함수들 |
| 286 | 2015. 05. 30. | [ javascript ] 운영체제 비트 확인하기 |
| 275 | 2015. 05. 04. | [ jquery ] dynatree option 옵션들 |
| 269 | 2015. 04. 08. | [ javascript ] jquery 에서 ajax 로 배열 넘기기 |
| 268 | 2015. 04. 08. | [ javascript ] jquery map() 을 이용하여 여러 폼값을 배열로 만들기. |
| 267 | 2015. 04. 08. | [ javascript ] jquery 로 해당 객체들중에 대상 선택하여 인덱스값 가져오기 |