Run results for: commaizeNumber (Intl.NumberFormat vs Regex)

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Browser: Chrome 137

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

2. Regex 일반적인 케이스 (8개 숫자 한번에 처리)

492K/s

1. Intl 일반적인 케이스 (8개 숫자 한번에 처리)

321K/s

4. Regex Virtual scroll 케이스 (30개 한번에 처리)

113K/s

3. Intl Virtual scroll 케이스 (30개 한번에 처리)

74K/s

6. Regex 전체 리스트 케이스 (100개 한번에 처리)

27K/s

5. Intl 전체 리스트 케이스 (100개 한번에 처리)

24K/s

View exact numbers

Test name	Executions per second
✓ 2. Regex 일반적인 케이스 (8개 숫자 한번에 처리)	491,861 Ops/sec
1. Intl 일반적인 케이스 (8개 숫자 한번에 처리)	320,645 Ops/sec
4. Regex Virtual scroll 케이스 (30개 한번에 처리)	113,219 Ops/sec
3. Intl Virtual scroll 케이스 (30개 한번에 처리)	73,782 Ops/sec
6. Regex 전체 리스트 케이스 (100개 한번에 처리)	27,193 Ops/sec
5. Intl 전체 리스트 케이스 (100개 한번에 처리)	23,785 Ops/sec

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

// Intl.NumberFormat 기반 구현 
function commaizeNumberIntl(value) {
    const num = typeof value === 'string' ? parseFloat(value.replace(/,/g, '')) : value;

    if (isNaN(num)) {
        return String(value);
    }

    return getNumberFormatter('ko-KR').format(num);
}

/**
 * locale 문자열을 key 로 쓰는 캐시.
 */
const numberFormatterCache = new Map();

function getNumberFormatter(locale) {
    const key = locale;

    let formatter = numberFormatterCache.get(key);
    if (!formatter) {
        formatter = new Intl.NumberFormat(locale);
        numberFormatterCache.set(key, formatter);
    }
    return formatter;
}


// 정규식 기반 구현 
function commaizeNumberRegex(value) {
    const numStr = String(value);
    const decimalPointIndex = numStr.indexOf('.');
    const commaizeRegExp = /(\d)(?=(\d\d\d)+(?!\d))/g;

    return decimalPointIndex > -1 ?
        numStr.slice(0, decimalPointIndex).replace(commaizeRegExp, '$1,') + numStr.slice(decimalPointIndex) :
        numStr.replace(commaizeRegExp, '$1,');
}

// Test Case A: 일반 페이지 (8개 숫자 한번에 처리)
const normalPageNumbers = [1234, 56789, 123456, 9876, 543210, 87654, 321098, 765432];

// Test Case B: Virtual scroll (30개 한번에 처리)  
const virtualScrollNumbers = Array.from({length: 30}, (_, i) => Math.floor(Math.random() * 10000000));

// Test Case C: 주식 서비스 업데이트 (100개 한번에 처리)
const stockNumbers = Array.from({length: 100}, (_, i) => Math.floor(Math.random() * 1000000000));

Tests:

1. Intl 일반적인 케이스 (8개 숫자 한번에 처리)
for (const num of normalPageNumbers) { commaizeNumberIntl(num); }
2. Regex 일반적인 케이스 (8개 숫자 한번에 처리)
for (const num of normalPageNumbers) { commaizeNumberRegex(num); }
3. Intl Virtual scroll 케이스 (30개 한번에 처리)
for (const num of virtualScrollNumbers) { commaizeNumberIntl(num); }
4. Regex Virtual scroll 케이스 (30개 한번에 처리)
for (const num of virtualScrollNumbers) { commaizeNumberRegex(num); }
5. Intl 전체 리스트 케이스 (100개 한번에 처리)
for (const num of stockNumbers) { commaizeNumberIntl(num); }
6. Regex 전체 리스트 케이스 (100개 한번에 처리)
for (const num of stockNumbers) { commaizeNumberRegex(num); }