[Javascript] 숫자 단위에 맞춰 쉼표, 서수 표현, 단위 이니셜 추가하기

숫자 단위에 맞춰 쉼표, 서수 표현, 단위 이니셜 추가하기

웹에서 숫자를 표시하다 보면 단위나 상황에 따라 후처리를 해주는 경우가 종종 있습니다.
예를 들면 천 단위가 넘어가는 금액을 '1000000＄'와 같이 쓴다면 가독성도 떨어지고 조금 부족해 보입니다.

 

자바스크립트를 이용해 숫자에 아래처럼 여러 가지 효과를 주는 코드를 공유하겠습니다.😊

• 쉼표 추가하기
• 서수로 표현하기
• 단위 이니셜 추가하기

 

쉼표 추가하기

const numberWithCommas = (number) => {
    if (typeof number !== 'number') {
        throw new Error('Input must be a number.');
    }

    return number.toLocaleString(); 
    // 브라우저의 언어 설정에 따라 숫자 포맷팅을 수행합니다.
};

// 예시 사용
const formattedNumber = numberWithCommas(1234567);
console.log(formattedNumber); // 출력: "1,234,567"

 

서수로 표현하기

const ordinalSuffix = (number) => {
    if (typeof number !== 'number') {
        throw new Error('Input must be a number.');
    }
    
    const j = number % 10,
        k = number % 100;

    if (j === 1 && k !== 11) {
        return `${number}st`;
    }
    if (j === 2 && k !== 12) {
        return `${number}nd`;
    }
    if (j === 3 && k !== 13) {
        return `${number}rd`;
    }
    return `${number}th`;
};

// 예시 사용
console.log(ordinalSuffix(1));  // 출력: "1st"
console.log(ordinalSuffix(22)); // 출력: "22nd"
console.log(ordinalSuffix(333)); // 출력: "333rd"
console.log(ordinalSuffix(104)); // 출력: "104th"

 

단위 이니셜 추가하기

const numberWithAbbreviations = (value, precision = 1) => {
    if (typeof number !== 'number') {
        throw new Error('Input must be a number.');
    }
    
    const suffixes = ["", "K", "M", "B", "T", "Q"];
    const suffixNum = Math.floor(("" + value).length / 3);

    let shortValue =
        parseFloat(
            (value / Math.pow(1000, suffixNum))
            .toPrecision(precision)
        );

    if (shortValue % 1 !== 0) {
        shortValue = shortValue.toFixed(precision);
    }

    return shortValue + suffixes[suffixNum];
};

// 예시 사용
const formattedNumber = numberWithAbbreviations(1234567);
console.log(formattedNumber); // 출력: "1.2M"

 

도움이 되어드렸다면 구독 / 좋아요 부탁드립니다.👏🏻

감사합니다.🙂