[JS] 숫자를 한글로 표시하기

GitHub - hyukson/hangul-util: 한글 관련 자바스크립트 유틸 라이브러리입니다.

'hangul-util' 라이브러리 코드를 기반으로 작성된 포스트입니다.

 

formatNumber(123456789);
// 1억 2345만 6789

formatNumberAll(123456789);
// 일억 이천삼백사십오만 육천칠백팔십구

 

예제 코드

 

4자리 대상 (전체코드)

const thousandUnits = ["", "만", "억", "조", "경", "해"];

// 배열 쪼개기
function chunkAtEnd(value = "", n = 1) {
  const result = [];

  for (let end = value.length; end > 0; end -= n) {
    result.push(value.substring(Math.max(0, end - n), end));
  }

  return result;
}

// 4자리씩 숫자로 변환
function formatNumber(number) {
  return chunkAtEnd(String(number), 4)
    .reduce((acc, item, index) => {
      const unit = thousandUnits[index] ?? "";

      if (!Number(item)) {
        return acc;
      }

      return `${Number(item)}${unit} ${acc}`;
    }, "")
    .trim();
}

 

모든 숫자 대상 (전체코드)

const numberUnits = ["", "일", "이", "삼", "사", "오", "육", "칠", "팔", "구"];
const tenUnits = ["", "십", "백", "천"];
const thousandUnits = ["", "만", "억", "조", "경", "해"];

// 배열 쪼개기
function chunkAtEnd(value = "", n = 1) {
  const result = [];

  for (let end = value.length; end > 0; end -= n) {
    result.push(value.substring(Math.max(0, end - n), end));
  }

// 모든 숫자 바꾸기
function formatNumberAll(number) {
  return chunkAtEnd(String(number), 4)
    .reduce((acc, item, index) => {
      if (!Number(item)) {
        return acc;
      } 
    
      let numberUnit = "";

      const zeroNum = item.padStart(4, "0");

      for (let i = 0; i < 4; i++) {
        const number = Number(zeroNum[i]);

        if (number) {
          const unit = tenUnits[3 - i];

          numberUnit += `${unit && number === 1 ? "" : numberUnits[number]}${unit}`;
        }
      }
    
      const thousandUnit = thousandUnits[index] ?? "";

      return `${numberUnit}${thousandUnit} ${acc}`;
    }, "")
    .trim();
}

 

코드풀이

// 배열 쪼개기
function chunkAtEnd(value = "", n = 1) {
  const result = [];

  for (let end = value.length; end > 0; end -= n) {
    result.push(value.substring(Math.max(0, end - n), end));
  }

  return result;
}

먼저 숫자를 한글로 바꾸기 위해서는 4자리씩 나눠주는 작업이 필요합니다.

 

chunkAtEnd('12345678', 4);
// ['5678', '1234']

 

chunkAtEnd 함수를 제작하여 뒤에서부터 4자리씩 나눠줍니다.

 

const thousandUnits = ["", "만", "억", "조", "경", "해"];

// 4자리씩 숫자로 변환
function formatNumber(number) {
  return chunkAtEnd(String(number), 4)
    .reduce((acc, item, index) => {
      const unit = thousandUnits[index] ?? "";

      if (!Number(item)) {
        return acc;
      }

      return `${Number(item)}${unit} ${acc}`;
    }, "")
    .trim();
}

chunkAtEnd() 함수로 4자리씩 나눔에 숫자에 차례대로 단위를 붙여줍니다.

 

const unit = thousandUnits[index] ?? "";

if (!Number(item)) {
  return acc;
}

return `${Number(item)}${unit} ${acc}`;

4자리씩 숫자를 미리 나누었기 때문에 '', '만', '억', '조'... 단위가 될 것입니다.

 

값이 0일 때는 뒤에 단위를 붙여주지 않습니다.

 

모든 숫자 대상

const numberUnits = ["", "일", "이", "삼", "사", "오", "육", "칠", "팔", "구"];
const tenUnits = ["", "십", "백", "천"];
const thousandUnits = ["", "만", "억", "조", "경", "해"];

모든 숫자를 한글로 대체해야 하기에 한글 텍스트 배열을 미리 정의해 둡니다.

 

// 모든 숫자 바꾸기
function formatNumberAll(number) {
  return chunkAtEnd(String(number), 4)
    .reduce((acc, item, index) => {
      if (!Number(item)) {
        return acc;
      } 
    
      const zeroNum = item.padStart(4, "0");
      let numberUnit = "";

      for (let i = 0; i < 4; i++) {
        const number = Number(zeroNum[i]);

        if (number) {
          const unit = tenUnits[3 - i];

          numberUnit += `${
            unit && number === 1 ? "" : numberUnits[number]
          }${unit}`;
        }
      }
    
      const thousandUnit = thousandUnits[index] ?? "";

      return `${numberUnit}${thousandUnit} ${acc}`;
    }, "")
    .trim();
}

4자리씩 나눈 숫자를 모두 한글로 바꾸기 위해서 다시 한번 반복문을 돌려줍니다.

 

const zeroNum = item.padStart(4, "0");
let numberUnit = "";

for (let i = 0; i < 4; i++) {
  const number = Number(zeroNum[i]);

  if (number) {
    const unit = tenUnits[3 - i];

    numberUnit += `${
      unit && number === 1 ? "" : numberUnits[number]
    }${unit}`;
  }
}

4개의 숫자를 잘라서 numberUnits 배열에 담긴 index에 맞게 한글을 매칭해 줍니다.

 

padStart() 메서드를 통해서 무조건 4자리 숫자로 형식을 맞춰줍니다.

 

const thousandUnit = thousandUnits[index] ?? "";

return `${numberUnit}${thousandUnit} ${acc}`;

각 숫자에 맞게 한글로 바꿔주고, 문자뒤에 알맞은 단위를 붙여주는 작업을 반복해 줍니다.