Angular中如何通过currency pipe获取单独货币符号不显示数值

问题描述 #

尝试在模板中通过如下写法直接获取货币符号：

{{ '' | currency : 'symbol' }}

代码运行后没有任何内容输出。
前置要求：不使用getCurrencySymbol方法，直接复用currency pipe本身的能力获取货币符号，实现仅展示货币符号的效果。

解决方案 #

上述代码无输出，是因为currency pipe接收到空字符串输入时，会判定为无效数值直接返回空值，正确的复用写法如下：

<!-- 人民币符号示例 -->
{{ 0 | currency : 'CNY' : 'symbol' : '0.0-0' | slice:0:1 }}

<!-- 美元符号示例 -->
{{ 0 | currency : 'USD' : 'symbol' : '0.0-0' | slice:0:1 }}

逻辑说明 #

• 传入0作为管道输入值，让currency pipe可以正常执行格式化流程，不会因为空值/非法值直接返回空
• 第三个参数'0.0-0'是数字格式化规则，强制格式化结果仅保留整数位、不显示小数位，执行到这一步会得到¥0、$0这类「符号+0」的结果
• 最后用Angular内置的slice管道截取第一位字符，就能得到纯货币符号，全程复用currency pipe自带的本地化货币匹配规则，不需要额外引入其他工具方法。

内容的提问来源于stack exchange，提问作者Frimlik