[javascript] 숫자에 자릿수 구분 콤마(,) 넣기

지난 시간에는 숫자 체크에 대해 알아보았습니다. 아래 링크에서 확인하세요.

2016/04/10 - [개발/javascript,jQuery] - [javascript] 숫자 체크 (isNaN, jQuery.isNumeric, 정규식)

이번 시간에는 숫자에 3자리마다(천 단위) 자릿수 구분 콤마(,)를 넣어보도록 합시다.

그냥 숫자의 자릿수 구분을 넣는게 아니고, 지난 시간에 숫자체크를 해봤으니까 입력된 값이 숫자일 경우에만 세자리마다 자릿수 구분 콤마를 넣도록 합시다.

formatNumber( value )

formatNumber( value ) 에서 value가 숫자이면 3자리마다 자릿수 구분 콤마(,)를 넣고, 숫자가 아니라면 원래 값을 그대로 반환합니다.

굳이 값을 체크해서 숫자일 경우에 자릿수 구분값을 넣을 필요가 없습니다.

또 해당값을 숫자로 변환하려면 getNumeric( value ) 로 하면 자릿수 구분이 없는 순수 숫자로 변환된 값을 받을 수 있습니다.

이전 시간에 설명드린것처럼 isNumeric( value ) 하면 숫자인지 체크할 수 있습니다.

getNumeric(value, opt) isNumeric(value, opt) formatNumber(value, opt) 에서 opt는 안넣어도 되며 아래 설명을 참고하세요.

opt=1 또는 안넣으면 모든 10진수와 자릿수 구분기호가 있는 숫자도 숫자로 인식함.

opt=2 는 플러스/마이너스 부호가 있으면 숫자로 인식 안함.

opt=3 는 플러스/마이너스 부호, 자릿수 구분 기호가 있으면 숫자로 인식 안함.

opt=4 는 숫자로만 구성된 경우에만 숫자로 인식

function isNumeric(num, opt){
  num = String(num).replace(/^\s+|\s+$/g, "");
  if(typeof opt == "undefined" || opt == "1"){
    var regex = /^[+\-]?(([1-9][0-9]{0,2}(,[0-9]{3})*)|[0-9]+){1}(\.[0-9]+)?$/g;
  }else if(opt == "2"){
    var regex = /^(([1-9][0-9]{0,2}(,[0-9]{3})*)|[0-9]+){1}(\.[0-9]+)?$/g;
  }else if(opt == "3"){
    var regex = /^[0-9]+(\.[0-9]+)?$/g;
  }else{
    var regex = /^[0-9]$/g;
  }
  if( regex.test(num) ){
    num = num.replace(/,/g, "");
    return isNaN(num) ? false : true;
  }else{ return false;  }
}

function getNumeric(str, opt){
  if(isNumeric(str, opt)){
    str = String(str).replace(/^\s+|\s+$/g, "").replace(/,/g, "");
    return Number(str);
  }else{
    return str;
  }
}

function formatNumber(str, opt){
  var rstr = "", sign = "";
  if(isNumeric(str, opt)){
    str = String(getNumeric(str, opt));
    if(str.substr(0, 1) == "-" ){
      sign = "-";
      str = str.substr(1);
    }
    var arr = str.split(".");
    for(var ii = 0 ; ii < arr[0].length ; ii++){
      if( ii % 3 == 0 && ii > 0){
        rstr = arr[0].substring(arr[0].length-ii,arr[0].length-ii-1) + "," + rstr;
      }else{
        rstr = arr[0].substring(arr[0].length-ii,arr[0].length-ii-1) + rstr;
      }
    }
    rstr = sign + rstr;
    return arr.length > 1 ? rstr + "." + arr[1] : rstr;
  }else{
    return str;
  }
}

활용예제

isNumeric( "+1,235,000.722" ) // true
isNumeric( "+1,235,000.722", 2 ) // false
isNumeric( "1,235,000.722", 2 ) // true
isNumeric( "1,235,000.722", 3 ) // false
isNumeric( "1235000.722", 3 ) // true
isNumeric( "1235000.722", 4 ) // false
isNumeric( "1235000", 4 ) // true
isNumeric( "가2342나다라232233사아" ) // false
isNumeric( "abc2212223defghi" ) // false

getNumeric( "1,235,000.722" ) // 1235000.722
getNumeric( "-6,529,000.428" ) // -6529000.428
getNumeric( "59,240,000" ) // 59240000
getNumeric( "가2342나다라232233사아" ) // 가2342나다라232233사아
getNumeric( "abc2212223defghi" ) // abc2212223defghi

formatNumber( "+1235000.722" ) // 1,235,000.722
formatNumber( "-6529000.428" ) // -6,529,000.428
formatNumber( "59240000" ) // 59,240,000
formatNumber( "가2342나다라232233사아" ) // 가2342나다라232233사아
formatNumber( "abc2212223defghi" ) // abc2212223defghi