Ajax로 읽어온 데이터 중에 숫자 데이터를 화면에 알맞게 포맷팅해서 보여줘야 할 일이 생겼는데, 이미 숫자를 포맷팅해주는 라이브러리가 있지 않을까 해서 찾아봤더니, 역시나 간단하게 사용할 수 있는 라이브러리가 있다. jquery-number 라는 라이브러로 jquery 기반의 숫자 포맷팅 기능을 제공한다. 다운로드는 https://github.com/teamdf/jquery-number 에서 받을 수 있다.
사용방법은 간단하다. 다음의 형식 중 한 가지를 사용하면 된다. 모두 세 자리 단위마다 콤마를 삽입한다.
- $.number(숫자): 소수점 이하는 제거한 결과 문자열을 생성한다.
- $.number(숫자, 소수자리): 소수점 이하 지정한 자리까지 포함한 문자열을 생성한다.
- $(실렉터).number(숫자): 실렉터로 선택된 태그의 값으로 숫자를 포맷팅한 결과를 사용한다. 소수점 이하는 제거된다.
- $(실렉터).number(숫자, 소수자리): 실렉터로 선택된 태그의 값으로 숫자를 포맷팅한 결과를 사용한다. 소수점 이하는 지정한 자리까지 포함된다.
- $(실렉터).number(true): 실렉터로 선택된 태그의 값을 포맷팅한다. 소수점 이하는 제거된다.
- $(실렉터).number(true, 소수자리): 실렉터로 선택된 태그의 값을 포맷팅한다. 소수점 이하는 지정한 자리까지 포함된다.
아래 코드는 예제 코드이다.
<script src="/js/jquery/jquery-1.9.1.min.js"></script>
<script src="/js/jquery/jquery.number.min.js"></script>
<script>
// 자바스크립트 숫자를 문자열로 포맷팅
var num = 12345.6789;
var a = $.number(num); // "12,345"
var b = $.number(num, 3); // "12,345.67"
// jquery 실렉터로 선택된 태그의 text 값으로 포맷팅한 결과를 설정
$("#someSelector").number(1003.1034); // <span id='someSelector'>1,003</span>
$("#anySelector").number(1003.1034, 1); // <span id='anySelector'>1003.1</span>
// jquery 실렉터로 선택된 태그의 숫자 값을 포맷팅
$(".myNumber").number(true); // <span class='myNumber'>12,345</span>
$(".youNumber").number(true, 2); // <span class='youNumber'>12,345.67
</script>
<span id='someSelector'></span>
<span id='anySelector'></span>
<span class='myNumber'>12345.6788</span>
<span class='youNumber'>12345.6788</span>