큰 숫자를 읽기 쉽게 만들기 위해 일반적으로 천 단위마다 콤마(,)같은 구분자를 추가한다. 천 단위 구분은 한국을 포함한 많은 국가에서 표준으로 사용하는 숫자 표기법이다.
자바스크립트에선 Number.toLocaleString() 혹은 Intl.NumberFormat 메서드를 이용하면 구분자를 추가할 수 있다. 참고로 이 메서드들은 기본적으로 실행 환경의 로케일 설정을 따르기 때문에 로케일에 따라 결과가 달라질 수도 있다. 예를 들어 독일 로케일(de-DE)은 천 단위 구분자로 온점(.)을 사용하고, 소수점 구분자로 콤마(,)를 사용한다. — 참고 노트
const number = 123456.789;
// 로케일을 지정하지 않으면 기본 로케일(navigator.language)을 따른다
Intl.NumberFormat().format(number); // '123,456.789'
// 미국, 한국 등의 나라는 천 단위 구분자로 콤마(,)를 사용하고 소수점 구분자로 점(.)을 사용한다
Intl.NumberFormat("ko-KR").format(number); // '123,456.789'
// 독일은 천 단위 구분자로 점(.)을 사용하고 소수점 구분자로 콤마(,)를 사용한다
Intl.NumberFormat("de-DE").format(number); // '123.456,789'
// 로케일을 지정하지 않으면 기본 로케일(navigator.language)을 따른다
number.toLocaleString(); // '123,456.789'
// 미국, 한국 등의 나라는 천 단위 구분자로 콤마(,)를 사용하고 소수점 구분자로 점(.)을 사용한다
number.toLocaleString("ko-KR"); // '123,456.789'
// 독일은 천 단위 구분자로 점(.)을 사용하고 소수점 구분자로 콤마(,)를 사용한다
number.toLocaleString("de-DE"); // '123.456,789'
한편, 정규식을 이용해서 천 단위 구분자를 추가할 수도 있는데, 동작 방식을 이해하려면 단어 경계, 전방 탐색, 부정 전방 탐색 등의 개념을 알고 있어야 한다. 아래 내용을 통해 자세히 알아보자.
'1234567'.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ","); // '1,234,567'
\\B : 단어 경계가 아닌 위치(?=...) : 전방 탐색(\\d{3})+ : 3개의 숫자로 이뤄진 그룹이 한 번 이상 반복(?!...) : 부정 전방 탐색<aside> <img src="/icons/search_gray.svg" alt="/icons/search_gray.svg" width="40px" /> 참고 내용
\\w 단어 문자 : 알파벳 대소문자, 숫자, 언더스코어(_)\\W 비단어 문자 : 단어 문자가 아닌 모든 문자 (온점, 콤마, 공백 등)
</aside>\\b 메타 문자는 단어 경계를 나타내며, 단어 문자(\\w)와 비단어 문자(\\W) 사이의 위치를 가리킨다. 즉, 단어의 시작이나 끝을 나타낸다(앞/뒤에 다른 단어 문자가 없는 위치). 예를 들어 hello world. 문자열의 단어 경계는 아래와 같다(수직선 | 으로 표기한 곳).
|hello| |world|.
아래 예시의 정규식은 \\b 메타 문자를 이용해 cat 앞/뒤에 다른 단어 문자가 없는 위치를 찾고 있다.
const reg = /\\bcat\\b/;
// cat 앞/뒤에 단어 문자가 없으므로 매칭
"I have a cat.".match(reg); // ['cat', index: 9, ...]
// cat 뒤에 단어 문자가 있으므로 매칭 안됨
"The catalog is here.".match(reg); // null
첫 번째 문장 I have a cat. 에서 cat 뒤에 온점(.)이 있지만, 온점은 단어 문자가 아니므로 단어 경계로 간주한다. 두 번째 문장의 catalog는 cat 뒤에 단어 문자 a가 있으므로 매칭되지 않는다.
반대로 \\B 메타 문자는 비단어 경계를 나타내며, 단어 경계가 아닌 위치를 찾는다. \\b 단어 경계가 가리키는 곳을 제외한 나머지 부분을 나타내기 때문에 아래 위치를 모두 포함한다.