Javascript - 숫자에 세자리마다 콤마 붙이기

Javascript나 JQuery를 사용하여 페이지에 숫자를 출력해주어야 되는 경우를 자주 만나게 되실 텐데요~

 

보통 DB에서 숫자를 받아오거나 또는 산술 연산 결과를 화면에 찍어주게 되는데, 단순히 숫자만을 찍어주는 것보다는 3자리 단위마다 콤마(,)를 찍어주게 되면 훨씬 가독성이 좋아집니다. (숫자 천단위마다 콤마 찍기)

 

-> 352930203 (3억5천2백9십3만2백3)

 

-> 352,930,203 

 

 

어떤게 보기 쉽고, 잘 읽혀지시나요?^^

거의 대부분의 경우 두 번째가 쉽게 읽혀집니다. 

 

 

그래서 대부분의 웹 서비스(특히 일반 사용자들이 많고, 숫자를 자주 표기하는 서비스)는 숫자를 표시할 때, 3자리마다 콤마로 찍어서 표시하여 주는 경우가 대부분인데요.

 

그럼 콤마는 텍스트인데, 숫자를 어떻게 구분하여 텍스트인 콤마를 사이사이에 넣어주는 것일까요? 간단하게 처리하는 방법이 없을까요?

사실 숫자는 산술 연산이나 비교 연산 시에서 숫자로써 의미가 있을 뿐이고, 최종적으로 화면에 출력되는 숫자는 텍스트로 보셔도 무방합니다.

 

그렇기 때문에 숫자에 콤마를 붙이는 방법은 단순히 숫자를 텍스트로 변환하고, 3자리마다 콤마를 삽입해 주는 작업만 해 주면 됩니다.^^

 

 

 

방법1. (방법1 코드는 여러 블로그에서 많이 참조되어 사용되고 있는 코드입니다.)

 

 * 소스 코드 내에 이해를 돕기 위한 주석을 작성하였습니다.

 * 코드 하단에도 추가 이해를 돕기 위한 코드 설명을 작성하였습니다.

 

function AddComma(data_value) {

 

    var txtNumber = '' + data_value;    // 입력된 값을 문자열 변수에 저장합니다.

 

    if (isNaN(txtNumber) || txtNumber == "") {    // 숫자 형태의 값이 정상적으로 입력되었는지 확인합니다.
        alert("숫자만 입력 하세요");
        return;
    }

    else {
        var rxSplit = new RegExp('([0-9])([0-9][0-9][0-9][,.])');    // 정규식 형태 생성
        var arrNumber = txtNumber.split('.');    // 입력받은 숫자를 . 기준으로 나눔. (정수부와 소수부분으로 분리)
        arrNumber[0] += '.'; // 정수부 끝에 소수점 추가

 

        do {
            arrNumber[0] = arrNumber[0].replace(rxSplit, '$1,$2'); // 정수부에서 rxSplit 패턴과 일치하는 부분을 찾아 replace 처리
        } while (rxSplit.test(arrNumber[0])); // 정규식 패턴 rxSplit 가 정수부 내에 있는지 확인하고 있다면 true 반환. 루프 반복.

 

        if (arrNumber.length > 1) { // txtNumber를 마침표(.)로 분리한 부분이 2개 이상이라면 (즉 소수점 부분도 있다면)
            return arrNumber.join(''); // 배열을 그대로 합칩. (join 함수에 인자가 있으면 인자를 구분값으로 두고 합침)
        }
        else { // txtNumber 길이가 1이라면 정수부만 있다는 의미.
            return arrNumber[0].split('.')[0]; // 위에서 정수부 끝에 붙여준 마침표(.)를 그대로 제거함.
        }
    }
}

 

 * data_value 는 콤마를 붙일 숫자 텍스트입니다.

 

 * var rxSplit = RegExp('([0-9])([0-9][0-9][0-9][,.])') 정규식 패턴을 생성합니다.

   - [0-9] 는 0에서 9사이의 값 중에 하나가 올 수 있음.

   - [,.] 는 콤마(,) 또는 마침표(.) 중 하나가 올 수 있음

   - () 는 여러 개의 식을 하나로 묶기 위해서 사용 ([0-9][0-9][0-9][,.]) 는 xxx, or xxx. 형태의 값이 나오는 패턴. (x는 숫자 하나)

   - ([0-9])([0-9][0-9][0-9][,.]) 는 결국 xxxx, xxxx. 의 패턴을 의미함 (x는 숫자 하나) 굳이 하위식(괄호()) 2개로 분리하여 숫자를 표기한 이유는 그 사이에 콤마을 삽입하기 위함.

 

 * arrNumber[0] = arrNumber[0].replace(rxSplit, '$1,$2');

  - 정수부에서 rxSplit(패턴 : '([0-9])([0-9][0-9][0-9][,.])')과 일치하는 부분을 찾아서 $1 과 $2로 대체.

    여기서 $1 과 $2 는 패턴의 1번 하위식, 2번 하위식을 의미. 하위식은 괄호 () 부분을 의미함. 즉 ([0-9]) = $1, ([0-9][0-9][0-9][,.]) = $2 를 뜻함.

    $1과 $2 사이에 콤마가 있으므로 숫자 4개가 연속하고, 끝에 콤마(,) 또는 마침표(.) 의 패턴을 가지는 숫자인 경우 X,XXX 형태로 대체(Replace) 함.

 

 

 <참고> 자세한 정규 표현식 문법은 여기를 참조하세요~

   참조 URL : http://ko.wikipedia.org/wiki/%EC%A0%95%EA%B7%9C_%ED%91%9C%ED%98%84%EC%8B%9D

 

뭔가 코드가 난해하기도 하고, 정규식 패턴도 나오고, 조금 어려워 보이실 수도 있습니다.

하지만, 하나하나 코드를 분석해 보시면 어떻게 처리가 되는지 크게 어렵지 않게 이해하실 수 있습니다.

 

일단 코드는 잘 동작합니다만. 방법 2번을 보시게 되신다면 내가 왜 이 코드를 보고 있었나 하실 수도 있겠습니다.^^

그래도 다양한 함수 사용법에 대해 알 수 있었고, 특히 정규식에 대한 이해는 중요합니다.

 

 

 

방법2.

 

function AddComma(data_value) {

return Number(data_value).toLocaleString('en');

}

 

 

 참 쉽죠~ 간단합니다. 위에서 십여줄에 작성하여 얻어내었던 결과를 단 한줄로 처리하였습니다.

 

 * toLocaleString 은 Number 타입의 내장 함수이며, 인자로 들어온 지역 값에 따른 숫자 표기 방식을 적용하여, 문자열로 반환하는 역할을 합니다. 'en'은 영어권 국가의 숫가 표기 방식을 사용하겠다는 것을 지정한 것입니다. 미국이나 영어권 국가에서는 숫자를 표기할 때, 3자리마다 숫자를 끊어 콤마를 삽입하여 사용합니다.

 

 

 * 만약 지역 값을 입력하지 않고 호출하는 경우, 해당 시스템의 지역 값에 따라서 숫자가 표기되는데, 시스템에 따라서 뒤에 소수점 2자리가 붙는 경우가 있습니다.

 - Number("12345").toLocaleString('en'); ===> 12,345.00

 

 이럴 때에는 단순히 소수점을 날려버리는 코드만 추가해 주시면 됩니다. (방법1에서도 가장 마지막 라인에서 사용한 방법입니다.)

 - Number(data_value).toLocaleString('en').split(".")[0] ===> 12,345

 

 숫자가 아닌, Date 타입도 toLocaleString 함수를 제공하는데, 이 때에는 함수 인자값에 해당하는 지역의 Date 표기 형식의 값을 반환해줍니다.