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: 10 months ago

Test name	Executions per second
1. Intl 일반적인 케이스 (8개 숫자 한번에 처리)	320645.0 Ops/sec
2. Regex 일반적인 케이스 (8개 숫자 한번에 처리)	491861.0 Ops/sec
3. Intl Virtual scroll 케이스 (30개 한번에 처리)	73782.2 Ops/sec
4. Regex Virtual scroll 케이스 (30개 한번에 처리)	113219.0 Ops/sec
5. Intl 전체 리스트 케이스 (100개 한번에 처리)	23785.0 Ops/sec
6. Regex 전체 리스트 케이스 (100개 한번에 처리)	27193.3 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); }

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

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

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

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

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

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

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