가격 3자리수 마다 콤마 표시

정규표현식 사용

정규표현식을 한 문장으로 정의하면 문자열에서 특정한 문자를 찾아내는 도구다

function priceToString(price) {
    return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

설명

replace()

'검색 후 바꾸기'를 수행한다

첫 번째 인자로는 정규표현식을 받고,
/\B(?=(\d{3})+(?!\d))/g

두 번째 인자로는 치환하려는 문자열을 받는다
','

문자열에서 찾고자 하는 대상을 검색해서 이를 치환하려는 문자열로 변경 후 변경된 값을 리턴한다

let pattern = /c/;
let str = 'code';
str.replace(pattern, 'C');
// str 안에서 pattern 을 검색한 후 'C' 로 변경하여 그 결과를 리턴합니다.
// 여기서는 'Code'가 반환된다

첫번째 인자 뜯어보기

/\B(?=(\d{3})+(?!\d))/g

정규표현식 규칙을 슬래시(/)로 감싸 사용한다
/\B(?=(\d{3})+(?!\d))/g

\B(?=(\d{3})+(?!\d))

\b
work boundery : 앞문자\b뒷문자
\b를 중심으로 앞에 문자를 넣을 경우 앞에 일치하는 단어를 찾고
뒤에 넣으면 뒤에 일치하는 단어를 찾는다.

\B
not work boundery
단어에서 \b에 일치하지 않는 문자

(?=(\d{3})+(?!\d))

(?=) 는
검색하려는 문자열에 (?=여기) 에 일치하는 문자가 있어야 (?=여기) 앞의 문자열을 반환한다

(\d{3})+(?!\d)

\d 의 d 는 digit 을 의미하며 0 ~ 9 사이의 숫자 하나를 검색한다
[0-9] 와 동일하다

{3}

{ } 는
*, *?, +, +? 의 확장판으로 생각할 수 있다
{ }는 직접 숫자를 넣어서 연속되는 개수를 설정할 수 있다
{3}은 연속되는 3개의 숫자를 말한다

+

+ 도 * 와 같은 방식으로 작동하며, 다만 + 바로 앞의 문자가 1번 이상 나타나는 경우를 검색한다는 점이 *과 다를 뿐이다

?!\d

(?!) 는
(?=) 의 부정이다

g

g 는
global 의 약자로, g 를 붙이면 검색된 모든 결과를 리턴한다