[nuxt/vue filter] 숫자 3자리(천자리) 마다 콤마 찍으면서 소수점 처리하기

vue filter 숫자 콤마와 소수점

자바스크립트에서 천 자리마다 콤마를 찍어줘야 하는 경우가 많다.

숫자에다가 천 자리마다 콤마를 찍기 위해서는 정규식을 이용해야 한다.

Vue에서는 Filter를 이용해서 숫자 3 자리 마자 콤마를 찍는 게 가능하다.

 

 

example.vue

<template>
    <div>
        {{price | numberFormat(2)}}
    </div>
</template>
<script>
    export default {
        data() {
            return {
                price: 342345.10923
            }
        },
        filters: {
            numberFormat: (value, numFix) => {
                value = parseFloat(value);
                if (!value) return '0';
                return value.toFixed(numFix).replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ',');
            },
        },
    }
</script>

예시 코드이다.

vue filter를 이용해서 numberFormat이라는 filter를 만들어준다.

두 번째 인자로 toFixed를 이용해서 소수점을 잘라준다.

나의 경우 2를 넣어서 소수점을 2자리까지 표시해준다.

 

price에 들어간 342345.10923이라는 숫자가 vue filter를 통해서

소수점이 2자리까지 잘리고 그 이후 정규식을 이용해서 3자리마다 콤마를 찍어주게 된다.

 

결과화면

이처럼 간단하게 vue filter 기능을 이용해서 콤마를 찍어주는 게 가능하다.