Angular에서 파이프를 사용한 숫자 형식 지정
DecimalPipe 파이프를 사용하여
숫자를 형식 지정할 수 있습니다. 파이프의 첫 번째 매개변수에는
정수 부분의 최소 자릿수를 전달합니다.
두 번째 매개변수에는 소수 부분의 최소 자릿수를
지정합니다. 세 번째 선택적 매개변수에는 소수 부분의 최대 자릿수를 설정합니다.
파이프 이름이 DecimalPipe임에도 불구하고,
호출할 때는 다음과 같이 작성합니다: number.
실제로 사용해 봅시다. 컴포넌트 클래스에 다음 숫자를 설정합니다:
export class AppComponent {
num: number = 18;
}
예제
정수 부분이 두 자리 숫자가 되도록 출력해 봅시다.
이때 소수 부분의 최소 자릿수는 1이 되도록 합니다:
<div>{{ num | number:'2.1' }}</div>
코드 실행 결과:
<div>18.0</div>
예제
이제 소수 부분에 두 자리 숫자가 표시되도록 설정해 봅시다:
<div>{{ num | number:'2.2' }}</div>
코드 실행 결과:
<div>18.00</div>
예제
새로운 숫자를 설정해 봅시다:
export class AppComponent {
num: number = 18.67899;
}
HTML 템플릿에서 소수 부분에 최대 두 자리 숫자만 표시되도록 출력해 봅시다:
<div>{{ num | number:'2.1-2' }}</div>
코드 실행 결과:
<div>18.68</div>
예제
이제 정수 부분이 세 자리 숫자가 되도록 형식을 지정하고, 소수 부분에는 다섯 자리 숫자가 표시되도록 해 봅시다:
<div>{{ num | number:'3.5-6' }}</div>
코드 실행 결과:
<div>018.67899</div>
예제
소수 부분의 최소 자릿수를 숫자에 설정된 자릿수보다 많게 지정해 봅시다. 이 경우 여섯 자리 숫자를 출력합니다:
<div>{{ num | number:'3.6-8' }}</div>
코드 실행 결과를 보면,
DecimalPipe 파이프가 소수 부분에 0을
추가한 것을 확인할 수 있습니다:
<div>018.678990</div>
실습 문제
다음 숫자가 주어졌습니다:
num: number = 15;
다음 형식으로 형식을 지정하세요:
'015.000'
다음 숫자가 주어졌습니다:
num: number = 12.345;
다음 형식으로 형식을 지정하세요:
'0012.345'
다음 숫자가 주어졌습니다:
num: number = 12.345;
다음 형식으로 형식을 지정하세요:
'12.3'
다음 숫자가 주어졌습니다:
num: number = 12.345;
다음 형식으로 형식을 지정하세요:
'012.34500'
다음 숫자가 주어졌습니다:
num: number = -7.261;
다음 형식으로 형식을 지정하세요:
'-007.3'
다음 숫자가 주어졌습니다:
num: number = 100.261923;
다음 형식으로 형식을 지정하세요:
'100.9226130'
다음 숫자가 주어졌습니다:
num: number = 100.926613;
다음 형식으로 형식을 지정하세요:
'0100.93'
