숫자, 용량 관련 유용한 Pipe 공유

안녕하세요, 명동섞어찌개입니다.

이번에 모바일 화면을 개발하다가, 숫자를 표기할 때 

1,000 -> 1k 

1,000 MB -> 1GB 

이런식으로 줄여서 표현해야 할 일이 있어서 해당 파이프 만든 것을 공유하려고 합니다.

 

1. 단위 표현 Pipe

@Pipe({
    name: 'thousandSuff'
})
export class ThousandSuffixesPipe implements PipeTransform {

    transform(input: any, args?: any): any {
        var exp, rounded,
            suffixes = ['k', 'M', 'G', 'T', 'P', 'E'];

        if (Number.isNaN(input)) {
            return null;
        }
        if (input < 1000) {
            return input;
        }
        exp = Math.floor(Math.log(input) / Math.log(1000));

        return (input / Math.pow(1000, exp)).toFixed(args) + ' <small class="sign">' + suffixes[exp - 1] + '</small>';
    }
}

사용예시:

<div class="num" [innerHTML]="transmissionAmount | filesizeMobile"></div>

 

2. 용량 표현 Pipe

@Pipe({
    name: 'filesizeMobile'
})
export class FileSizeMobilePipe implements PipeTransform {
    transform(size: any, extension: string = '') {
        let suffixes = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];

        if (Number.isNaN(size) || size === null || size === undefined) {
            return 0 + ' <small class="sign">MB</small>';
        }

        let _size = CommonUtils.isString(size) ? Number.parseInt(size) : size;
        if (_size < 1000) {
            return _size + ' <small class="sign">bytes</small>';
        }

        let exp = Math.floor(Math.log(_size) / Math.log(1000));
        let res = (_size / Math.pow(1000, exp)).toFixed(2) + ' <small class="sign">' + suffixes[exp - 1] + '</small>';

        return res;
    }
}

이번에 개발한 서비스의 경우 기본 용량 표시 단위는 MB 라서 숫자가 없거나 0 이면 0 MB 로 보여주게 했는데 일반적인 경우라면 bytes 로 표현해주는게 맞겠지요.

res 의 .toFixed 이거는 소수점 아래 몇 자리까리 보여주는지의 숫자입니다. 저 파이프를 쓰면 11.99 MB 이런식으로 표기해줍니다. 소수점 아래 자리를 표시하기 싫으면 toFixed(0) 으로 해주면 됩니다. 

사용예시:

<div class="num" [innerHTML]="transmissionAmount | filesizeMobile"></div>