자바스크립트로 3자리(천단위) 마다 콤마 찍기

자바스크립트로 3자리(천단위) 마다 콤마 찍기

숫자를 출력할 때 네자리 이상이라면 컴마를 통해 천단위를 표시하는것이 좋습니다. 

1000000원 보다는 1,000,000원이 훨씬 더 가독성이 높기 때문입니다. 

 

언어마다 표시하는 다양한 방법이 존재하는데 Javascript를 통해 구현하는 방법을 알아보겠습니다. 

 

방법1: 정규표현식

<h3>정규표현식</h3>
<script>
const myNumber = 1234567890.12345;
let result1 = myNumber.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
document.write("결과1 : "+ result1);
</script>

방법2 : toLocaleString() 함수

<h3>toLocaleString() 함수</h3>
<script>
let result2 = myNumber.toLocaleString();
document.write("결과2 : "+ result2 +"<br>");

let result3 = myNumber.toLocaleString('ko-KR');
document.write("결과3 : "+ result3 +"<br>");

let result4 = myNumber.toLocaleString('ko-KR', {maximumFractionDigits:4});
document.write("결과4 : "+ result4 +"<br>");
</script>

 

설명

• toLocaleString() 함수 사용시 myNumber는 반드시 Number 타입이어야 합니다. 
• String 타입인 경우 에러가 발생됩니다. 
• 결과2 : 기본 옵션인 경우 Local 환경에 맞춰서 반환합니다. 
• 결과3 : locale 을 설정할 수 있습니다. (en-US , ja-JP , zh-CN 등)
• 결과4 : maximumFractionDigits 옵션이 없을때는 소수 이하 3자리가 기본이고, 그 외에는 지정한만큼 표시됩니다. 

방법3 : 사용자 정의 함수

<h3>사용자 정의 함수</h3>

<script>
function setComma(str) {
    //.으로 문자열을 분리
    var strArr = str.toString().split(".");
    //[0]은 정수부이므로 길이를 구함
    var stop = strArr[0].length;
    var retValue = '';
    //정수부의 길이만큼 루프
    for(var i=0 ; i<stop ; i++) {   
        if((i%3) == 0 && i != 0){
            //i가 0일때를 제외하고 3의 배수일때 콤마를 삽입
            retValue = strArr[0].charAt((stop - i) -1) + "," + retValue;
        } 
        else{
            //그 외에는 한자리씩 숫자를 연결 
            retValue = strArr[0].charAt((stop - i) -1) + retValue; 
        }
    }
    //마지막에 소수부인 [1]을 연결한 후 반환 
    return retValue +'.'+ strArr[1]; 
}

document.write("결과5 : "+ setComma(myNumber) +"<br>");
</script>

 

설명

• 세월이 좋아져서 지금은 지원되는 함수가 너무나도 많아졌지만, 예전에는 개발자가 한땀 한땀 구현해서 사용했었죠 ㅎㅎ
• 편리한 세상에 굳이 이렇게 개고생해서 만드는게 좋을까 생각하시겠지만, 실무에서는 여러분이 직접 구현해야 하는 경우가 더 많습니다..^^*
• 코드설명은 주석을 참조해주세요. 문자열의 길이만큼 반복하고 3의 배수가 될 때 콤마를 추가해주는 형식입니다.