JavaScript 숫자 포맷팅

웹 애플리케이션에서 숫자를 사용자에게 보여줄 때는 가독성을 높이기 위해 적절한 포맷팅이 필요합니다. 이번 포스트에서는 JavaScript로 숫자를 포맷팅하는 실용적인 함수들을 소개합니다.

1. numberWithCommas - 천 단위 구분자 추가

numberWithCommas 함수는 숫자에 천 단위 구분자(쉼표)를 추가하여 가독성을 높입니다.

const numberWithCommas = (x , falsyChar=null) => {
  if (!x) return falsyChar!==null ? falsyChar : x;
  const _x = x.toString().split('.');
  _x[0] = _x[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  return _x.join('.');
};

기본 사용법

// 기본 사용
numberWithCommas(1000); 
// "1,000"

numberWithCommas(1234567); 
// "1,234,567"

// 소수점 포함
numberWithCommas(1234567.89); 
// "1,234,567.89"

// 0 처리
numberWithCommas(0); 
// "0"

// null/undefined 처리
numberWithCommas(null, '-'); 
// "-"

numberWithCommas(''); 
// ""

활용 예시

// 가격 표시
const price = 1500000;
const formattedPrice = `₩${numberWithCommas(price)}`;
// "₩1,500,000"

// 통계 데이터 표시
const totalUsers = 1234567;
const display = `총 사용자: ${numberWithCommas(totalUsers)}명`;
// "총 사용자: 1,234,567명"

// 그리드 셀 포맷터
formatter: ({value}) => {
  return numberWithCommas(value) || '-';
}

실전 활용 패턴

// 통화 포맷팅
const formatCurrency = (amount, symbol = '₩') => {
  return `${symbol}${numberWithCommas(amount)}`;
};

formatCurrency(1500000); 
// "₩1,500,000"

// 백분율과 함께
const formatPercentage = (value, percent) => {
  return `${numberWithCommas(value)} (${percent}%)`;
};

formatPercentage(1234567, 12.5); 
// "1,234,567 (12.5%)"

2. floatFormatter - 정수/소수 구분 처리

floatFormatter 함수는 정수는 정수로, 소수는 소수로 깔끔하게 표시합니다.

const floatFormatter = (qty) => {
	let _qty = Number(qty);
	if(Number.isInteger(_qty)){
		return parseInt(_qty);
	}else{
		return _qty;
	}
};

기본 사용법

// 정수는 정수로
floatFormatter(23); 
// 23

floatFormatter(23.0); 
// 23

// 소수는 그대로
floatFormatter(23.5); 
// 23.5

floatFormatter(23.000001); 
// 23.000001

// 문자열도 처리
floatFormatter('23.5'); 
// 23.5

활용 예시

// 계산 결과 표시
const result = calculateTotal();
const display = floatFormatter(result);
// 정수면 "100", 소수면 "100.5"

// 수량 입력 필드
const quantity = parseFloat(input.value);
const formatted = floatFormatter(quantity);
// 사용자가 "10.0" 입력해도 "10"으로 표시

// 그리드 셀 포맷터
formatter: ({value}) => {
  return floatFormatter(value);
}

실전 활용 패턴

// 계산기 애플리케이션
const calculate = (a, b, operator) => {
  let result;
  switch(operator) {
    case '+': result = a + b; break;
    case '-': result = a - b; break;
    case '*': result = a * b; break;
    case '/': result = a / b; break;
  }
  return floatFormatter(result);
};

calculate(10, 3, '/'); 
// 3.3333333333333335 (소수는 그대로)

calculate(10, 2, '/'); 
// 5 (정수는 정수로)

두 함수 조합 활용

1. 가격 표시 (천 단위 구분자 + 정수/소수 처리)

const formatPrice = (price) => {
  const formatted = floatFormatter(price);
  return numberWithCommas(formatted);
};

formatPrice(1500000.5); 
// "1,500,000.5"

formatPrice(1500000); 
// "1,500,000"

2. 통계 대시보드

const formatStat = (value, decimals = 0) => {
  const rounded = decimals > 0 
    ? value.toFixed(decimals) 
    : floatFormatter(value);
  return numberWithCommas(rounded);
};

formatStat(1234567.89, 2); 
// "1,234,567.89"

formatStat(1234567); 
// "1,234,567"

3. 그리드 셀 포맷터 조합

// 금액 컬럼
{
  name: 'price',
  formatter: ({value}) => {
    if (!value) return '-';
    return `₩${numberWithCommas(floatFormatter(value))}`;
  }
}

// 수량 컬럼
{
  name: 'quantity',
  formatter: ({value}) => {
    return numberWithCommas(floatFormatter(value));
  }
}

성능 최적화 팁

1. 메모이제이션

const memoizedFormat = (() => {
  const cache = new Map();
  return (value) => {
    if (cache.has(value)) {
      return cache.get(value);
    }
    const formatted = numberWithCommas(value);
    cache.set(value, formatted);
    return formatted;
  };
})();

2. 배치 포맷팅

const formatNumbers = (numbers) => {
  return numbers.map(num => numberWithCommas(num));
};

const largeDataset = Array.from({length: 10000}, (_, i) => i * 1000);
const formatted = formatNumbers(largeDataset);

마무리

numberWithCommas와 floatFormatter 함수를 적절히 활용하면 사용자에게 보기 좋은 숫자 형식으로 데이터를 표시할 수 있습니다. 특히 대시보드, 통계 화면, 금융 애플리케이션에서 필수적인 함수들입니다.