JavaScript - 숫자 3자리마다 콤마(,) 넣는 방법

By JS | Last updated: April 09, 2022

Javascriptexamples

자바스크립트에서 숫자를 출력할 때, 3자리마다 콤마를 찍고 출력하는 방법을 소개합니다. 구글링해보면 정규식을 이용하여 3자리 마다 콤마를 넣거나, toLocaleString()로 특정 국가의 숫자 단위로 출력하여 콤바를 넣는 방식을 많이 사용하고 있습니다. 그 외에, for 반복문을 이용하여 직접 구현하는 방법도 있습니다.

1. 정규식을 이용하여 3자리마다 콤마 넣기

다음과 같이 정규식을 이용하여 3자리마다 콤마를 넣을 수 있습니다.

let price = 1000000;
let result = price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
console.log(result);

price = 1000000.123;
result = price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
console.log(result);

Output:

1,000,000
1,000,000.123

2. toLocaleString()을 이용하여 3자리마다 콤마 넣기

toLocaleString()는 인자로 전달한 Locale의 표현 방식으로 숫자를 출력합니다. 인자를 전달하지 않으면 Default locale이 사용됩니다.

미국이나 한국은 3자리마다 콤마를 넣습니다. 따라서 Locale en-US나 ko-KR을 인자로 전달하면 3자리마다 콤마가 들어간 문자열을 얻을 수 있습니다. 주의할 점은 Locale에 따라 결과가 달라질 수 있다는 것입니다. Locale ar-EG는 아랍어인데, 출력되는 문자열을 보시면 아라비아 숫자로 표현되지 않습니다.

const price = 1000000;

let result = price.toLocaleString();
console.log(result);

result = price.toLocaleString('en-US');
console.log(result);

result = price.toLocaleString('ko-KR');
console.log(result);

result = price.toLocaleString('ar-EG');
console.log(result);

Output:

1,000,000
1,000,000
1,000,000
١٬٠٠٠٬٠٠٠

그리고 위의 예제들은 아래와 같이 Number 타입의 toLocaleString() 함수를 사용하는 것이기 때문에, 문자열 타입 객체에 toLocaleString()를 호출해도 콤마가 입력되지 않습니다.

interface Number {
  /**
   * Converts a number to a string by using the current or specified locale.
   * @param locales A locale string or array of locale strings that contain one or more language or locale tags. If you include more than one locale string, list them in descending order of priority so that the first entry is the preferred locale. If you omit this parameter, the default locale of the JavaScript runtime is used.
   * @param options An object that contains one or more properties that specify comparison options.
   */
  toLocaleString(locales?: string | string[], options?: Intl.NumberFormatOptions): string;
}

3. for 반복문으로 직접 함수 구현하여 콤마 넣기

다음과 같이 반복문으로 숫자를 순회하면서 3자리마다 콤마를 넣을 수 있습니다. 함수 안에서는 문자열로 변환하여 콤마를 넣기 때문에, 리턴 값은 문자열이 됩니다.

function insertCommas(n) {
  // get stuff before the dot
  let s1 = n.toString();
  var d = s1.indexOf('.');
  var s2 = d === -1 ? s1 : s1.slice(0, d);

  // insert commas every 3 digits from the right
  for (var i = s2.length - 3; i > 0; i -= 3)
    s2 = s2.slice(0, i) + ',' + s2.slice(i);

  // append fractional part
  if (d !== -1)
    s2 += s1.slice(d);

  return s2;
}


let result = insertCommas(1000000);
console.log(result);

result = insertCommas('1000000');
console.log(result);

result = insertCommas(1000000.123);
console.log(result);

result = insertCommas('1000000.123');
console.log(result);

Output:

1,000,000
1,000,000
1,000,000.123
1,000,000.123
javascript
Loading script...

Related Posts

codechachaCopyright ©2019 codechacha