Angular 파이프를 사용한 통화 형식 지정
CurrencyPipe 파이프를 사용하면 통화 출력 형식을 지정할 수 있습니다.
파이프의 첫 번째 매개변수로 ISO 4217 표준에 따른 통화 코드가 전달됩니다
(기본값은 USD입니다). 두 번째 매개변수에서는 통화 표시 방식을 설정합니다.
이 매개변수는 다음 값을 가질 수 있습니다: 'code' (통화 코드),
'symbol' (통화 기호), 'symbol-narrow' (여러 통화 기호를 가진 국가의 경우),
'string' (임의 문자열 출력용). 세 번째 선택적 매개변수에서는
DecimalPipe 파이프와 유사한 숫자 형식을 지정할 수 있습니다.
네 번째 선택적 매개변수로는 사용할 로케일의 코드를 지정할 수 있습니다:
<div>{{ value | number : 통화 코드 : 통화 표시 방식 : 숫자 형식 : 로케일 코드 }}</div>
예제
예제를 통해 파이프의 동작을 살펴보겠습니다.
이를 위해 컴포넌트 클래스에 특정 통화로 된 급여를 포함하는
다음과 같은 salary 속성을 정의하겠습니다:
export class AppComponent {
salary: number = 867.564;
}
예제
우리의 숫자를 통화로 변환해 보겠습니다:
<div>{{ salary | currency }}</div>
코드 실행 결과:
<div>$867.56</div>
예제
이제 러시아 루블로 통화 표시 방식을 지정해 보겠습니다:
<div>{{ salary | currency:'RUB':'code' }}</div>
코드 실행 결과:
<div>RUB867.56</div>
예제
숫자 옆에 러시아 루블 기호를 출력해 보겠습니다:
<div>{{ salary | currency:'RUB':'symbol-narrow' }}</div>
코드 실행 결과:
<div>₽867.56</div>
예제
이제 소수 부분이 4자리인 숫자로 출력해 보겠습니다:
<div>{{ salary | currency:'RUB':'symbol':'2.4-5' }}</div>
코드 실행 결과:
<div>RUB867.5640</div>
예제
통화 표시에 다음 문자열을 추가해 보겠습니다:
<div>{{ salary | currency:'RUB':'this is a new currency - ' }}</div>
코드 실행 결과:
<div>this is a new currency - 867.56</div>
실습 문제
주어진 숫자:
salary: number = 134.89;
다음 형식으로 포맷하세요:
'$134.89'
주어진 숫자:
salary: number = 134.89;
다음 형식으로 포맷하세요:
'€134.89'
주어진 숫자:
salary: number = 134.89;
다음 형식으로 포맷하세요:
'$134.890'
주어진 숫자:
salary: number = 134.89;
다음 형식으로 포맷하세요:
'$0,134.8900'
주어진 숫자:
salary: number = 134.89;
다음 형식으로 포맷하세요:
'this currency is changed 134.89'
