Angular 筆記 - Pipe 管線元件：currency

currency 貨幣

把數字轉換成金額字串的格式，使用方法如下：

{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}

傳入的值 | currency[:貨幣格式[:貨幣指示器 [:數字呈現選項 [:本地化格式]]]]

currencyCode 貨幣格式

• 型別為 string。
• 預設格式為美金 USD。
• currency 貨幣格式採用 ISO4217 的貨幣程式碼。

display 是否顯示貨幣代碼

• 型別為 string、boolean。
• code: 貨幣程式碼（如 USD）。
• symbol(default): 展示貨幣符號（如 \$）。
• symbol-narrow: 使用區域的窄化符號，它包括兩個符號。 比如，加拿大元的符號是 CA$，而其窄化符號是 $。如果該區域沒有窄化符號，則使用它的標準符號。
• String: 使用指定的字串值代替貨幣程式碼或符號。 比如，空字串將會去掉貨幣程式碼或符號。

digitsInfo 數字呈現樣式

• 型別為 string。
• {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}。
• minIntegerDigits：在小數點前的最小位數。預設為 1。
• minFractionDigits：小數點後的最小位數。預設為 0。
• maxFractionDigits：小數點後的最大為數，預設為 3。
• 若沒有提供則會根據 ISO 4217 規則判別。

locale 本地化

• 型別為 string。
• 要使用的本地化格式程式碼。 如果未提供，則使用 LOCALE_ID 的值，預設為 en-US。 應用設定地區（locale）可參考官網文件

預設值是 undefined。
台幣是 TWD。

HTML

<div>
  <p>預設為美金：{{a | currency}}</p>
  <p>改為新台幣：{{a | currency:'TWD'}}</p>
  <p>顯示貨幣格式碼： {{a | currency:'TWD':'code'}}</p>
  <p>小數點前四位，小數點後兩位： {{a | currency:'TWD':'symbol':'4.2-2'}}</p>
  <p>改為窄化符號 NT$： {{a | currency:'TWD':'symbol-narrow':'4.2-2'}}</p>
  <p>改成日本貨幣：{{a | currency:'TWD':'symbol':'3.1-5':'jp'}}</p>
</div>

TS

a: number = 100;

Demo