숫자 한국어로 표시하는 함수

쇼핑몰 화면에서,, 쿠폰 할인 금액을 숫자가 아니라 한글로 표시가 되도록 디자인이 되어있었다.

쿠폰 금액은 디비에서 불러오는 값으로 숫자로 된 금액이였으면 여러 군데에 사용할 거같아서 공통 함수로 만들기로 결정

 

초반에는 gpt의 도움을 받고 틀을 만들었다

gpt가 계속 틀린 함수를 만들어줘서 나중에는 내가 아예 만들었음.

 

급하게 만들다보니 코드가 좀 길어진 아쉬움이 있음..

 

const formatNumberWithUnit = (number) => {
  const units = ["", " 십", " 백", "천", "만", "십만", "백만", "천만", "억"];
  const unitCount = units.length;

  if (number < 1000) {
    return String(number);
  }

  let formattedNumber = "";
  let unitIndex = 0;

  while (number > 0) {
    const remainder = number % 10;
    number = Math.floor(number / 10);

    if (remainder > 0) {
      if (unitIndex > 4 && unitIndex % 4 === 1 && remainder === 1) {
        formattedNumber = units[unitIndex] + formattedNumber;
      } else {
        formattedNumber = remainder + units[unitIndex] + formattedNumber;
      }
    }

    unitIndex++;
    if (unitIndex === unitCount) {
      break;
    }
  }

  if (formattedNumber.startsWith("1") && unitIndex > 4) {
    formattedNumber = formattedNumber.substring(1);
  }

  return formattedNumber || "0";
};

 

- 화살표 함수 방식 사용

- 'number'는 매개변수

- const units = ["", " 십", " 백", "천", "만", "십만", "백만", "천만", "억"];

 -> 숫자를 한국어로 읽을 때 사용하는 단위들을 배열로 정의

- if (number < 1000) { return String(number); }

 -> 입력된 숫자가 1000 미만이면 해당 숫자를 문자열로 변환하여 반환

- while (number > 0) { ... }

 -> 숫자가 0보다 클 동안 반복문을 실행

 -> 반복문 안에서는 숫자를 10으로 나눈 나머지를 구하고, 숫자를 10으로 나누어 업데이트

 -> 나머지가 0보다 클 경우, 해당 나머지와 그에 해당하는 단위를 문자열 앞에 추가

- if (formattedNumber.startsWith("1") && unitIndex > 4) { ... }

 -> 만들어진 문자열이 "1"로 시작하고, 단위 인덱스가 4보다 클 경우, 문자열의 첫 번째 문자를 제거함

 -> '만' 이상의 단위에서 '일'을 생략하기 위한 처리

- return formattedNumber || "0";

 -> 변환된 문자열을 반환, 만약 변환된 문자열이 없다면 "0"을 반환

 

formatNumberWithUnit(150000);

// 결과 = 십오만