본문으로 건너뛰기
yceffort
PostsSeriesTagsAbout🧪 Research
EN

Tweaks

theme
accent palette
film grain
minimal mode
BACK TO INDEX
◆ ESSAY
--min
--year
KOoriginal

mailMail icongithubtwitter
yceffort
•
© 2026
•
https://yceffort.kr
BACK TO INDEX
◆ ESSAY

Javascript Regex 숫자를 comma와 함께 Formatting 하기

avatar
yceffort
2020-03-17 · 2분
2min
2020year
KOoriginal
javascriptregex

regex를 활용해서 숫자에 , 를 찍어서 formatting을 해보자.

1. 첫번째 시도

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

인터넷에 가장 많이 떠돌아 다니는 해결책으로, 아쉽게도 소수점에 대한 대응이 되지 않는다.

'1111.1111111'.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
// 1,111.1,111,111

2. 두번째 시도

function formatNumber(number) {
  return number.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ',')
}
'1111.1111111'.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ',')
// 1,111.1111111

이게 성공하는 줄 알고, test 도 넘어가길래 실제로 써보았더니 앱에서 오류가 나기 시작했다. ㅠ.ㅠ

'1111.1111111'.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ',')
// SyntaxError: Invalid regular expression: invalid group specifier name

이와 관련된 posting은 여기 여기에서 찾아볼 수 있었다.

x(?<=y) x(?<!y)는 각각 lookbehind 문법으로, 아쉽게도 사파리와 익스플로러에서는 지원하지 않는다.. (감사합니다.)

따라서 아쉽게도, 순수 regex로 모든 브라우저 환경을 지원하면서 대체 하기는 무리인듯 하다.

3. (지금까지의) 정답

function formatNumber(x) {
  var parts = x.toString().split('.')
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  return parts.join('.')
}

언젠가 더 좋은 방법을 찾기를 바라며 (...)

관련 글

  • #turbopack#nextjs#bundler

    Next.js turbopack에서 싱글톤이 두 개가 됐다: scope hoisting 버그와 순환 import

    Next.js 16 turbopack 프로덕션 빌드에서 모듈 스코프 싱글톤이 런타임에 두 개가 됐다. 같은 동기 구간에서 조건 판정이 뒤집히고, 응답이 도착해도 타임아웃이 나는 증상을 번들 산출물로 추적한 기록. scope hoisting의 부분 병합, 순환 import, 이미 고쳐져 있던 upstream 버그, 그리고 뒤늦게 돌린 단일 변수 실험까지.

    2026-08-19·28분
  • #javascript#animation#web-animations-api

    number-flow를 구형 브라우저로 이식하기: 다섯 가지 결정과 두 가지 번복

    number-flow가 애니메이션을 켜는 최소 버전은 Chrome 125, Safari 17.2다. 이 하한을 Chrome 66과 WebKit 16.4까지 내리는 포크를 만들면서 내린 결정들과, 뒤집게 된 판단 두 가지, 그리고 자동 강등을 포기한 Safari 버그 조사의 기록.

    2026-08-11·44분
  • #nodejs#security#javascript

    Node.js vm 모듈의 함정: 샌드박스가 아닌 이유

    집필 중인 Node.js Deep Dive의 5.2장(vm 모듈의 함정) 일부를 미리 공개합니다.

    2026-02-27·25분
  • #nodejs#javascript

    Node.js Deep Dive (가제) 베타 리더를 모십니다.

    많관부22

    2026-02-19·5분

새 글을 놓치고 싶지 않으시다면 RSS로 구독해 주세요.

RSS 구독 →

yceffort — 프론트엔드 엔지니어입니다. 발표·기술 자문·기고 문의는 이곳에서 받고 있습니다.

← Back to the blogIssue on GitHub →