자바스크립트에서 숫자를 출력할 때, 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
Loading script...
Related Posts
- JavaScript - 빈 문자열 확인, 2가지 방법
- JavaScript - 날짜/시간 비교, 3가지 방법
- JavaScript - 랜덤 문자열 생성, 2가지 방법
- JavaScript - 마지막 문자 제거, 4가지 방법
- JavaScript - 문자열 공백 제거, 3가지 방법
- JavaScript - 배열을 문자열로 변환, 3가지 방법
- JavaScript - 여러 줄 문자열, 3가지 방법
- JavaScript - 객체를 문자열로 변환, 2가지 방법
- JavaScript - 문자열의 첫번째 문자 가져오기, 4가지 방법
- JavaScript - 문자열의 마지막 문자 가져오기, 4가지 방법
- JavaScript - 배열 맨 앞에 요소 추가/제거, 2가지 방법
- JavaScript - 2차원 배열을 1차원 배열로 변환, 2가지 방법
- JavaScript - 현재 시간 Timestamp 가져오기
- JavaScript - 대소문자 변환 (LowerCase, UpperCase)
- JavaScript - 문자열 바꾸기(replace, 정규식 치환)
- JavaScript - setTimeout()으로 함수 실행 지연
- JavaScript - 'try...catch'로 예외 처리 방법
- JavaScript - 문자열을 날짜(Date)로 변환하는 방법
- JavaScript - 배열에서 중복 제거, 4가지 방법
- JavaScript - Float을 Integer로 변환, 3가지 방법
- JavaScript - 문자열 비교 방법, 5가지
- JavaScript - 문자열에서 문자 또는 단어 추출, 4가지 방법
- JavaScript - 문자열 뒤집기, 거꾸로 출력
- JavaScript - 배열의 마지막 요소 가져오기
- JavaScript - 배열에서 최대, 최소 값 찾기
- JavaScript - 소수점 자리수 올림, 내림, 반올림, 제거 방법
- JavaScript - 숫자 3자리마다 콤마(,) 넣는 방법
- JavaScript - 타입 확인 방법 (typeof)
- JavaScript - 빈 배열인지 확인 (Empty Array)
- JavaScript - 배열 길이 확인, 길이 변경 (Array.length)
- JavaScript - 문자열에서 숫자만 추출
- JavaScript - 특정 문자열의 포함 여부 확인 (includes, 정규표현식)
- JavaScript - 배열 합치기 (concat, spread, push)
- JavaScript - 문자열에서 특정 문자 위치 찾기 (indexOf, lastIndexOf)
- JavaScript - 현재 날짜, 시간 가져오기
- JavaScript - 배열 정렬 방법 (오름차순, 내림차순)