SAP UI5 货币金额显示的格式化逻辑

简介: SAP UI5 货币金额显示的格式化逻辑

先看一些实际的例子:

var oFormat = NumberFormat.getCurrencyInstance({
"currencyCode": false,
 "customCurrencies": {
"BTC": {
"symbol": "\u0243",
"decimals": 3
}
}
 });
oFormat.format(123.4567, "BTC"); // "Ƀ 123.457"

上面的例子,定义了一个名为 BTC 的自定义货币符号,同时用 decimals 指定小数点后的数位,以及货币符号的 unicode 编码值。

运行结果如下:

另一个例子:

var oFormat = NumberFormat.getCurrencyInstance({
   "currencyCode": false,
   "customCurrencies": {
    "MyDollar": {
   "isoCode": "USD",
   "decimals": 3
   },
   "Bitcoin": {
    "decimals": 2
  }
   }
  });
// symbol looked up from global configuration
oFormat.format(123.4567, "MyDollar"); 
// "$123.457"
// no symbol available, custom currency key is rendered
oFormat.format(777.888, "Bitcoin"); // "Bitcoin 777.89"

我们来单步调试查看 format 函数的执行原理。

进入 Currency.js 的 formatValue 方法。输入参数为 87.2 和 EUR:

目标类型为 string 字符串,所以进入 case string 的分支:

 */
  Currency.prototype.formatValue = function(vValue, sTargetType) {
    var aValues = vValue;
    if (vValue == undefined || vValue == null) {
      return null;
    }
    if (this.oInputFormat) {
      aValues = this.oInputFormat.parse(vValue);
    }
    if (!Array.isArray(aValues)) {
      throw new FormatException("Cannot format currency: " + vValue + " has the wrong format");
    }
    if ((aValues[0] == undefined || aValues[0] == null) && this.bShowNumber) {
      return null;
    }
    switch (this.getPrimitiveType(sTargetType)) {
      case "string":
        return this.oOutputFormat.format(aValues);
      default:
        throw new FormatException("Don't know how to format currency to " + sTargetType);
    }
  };

读取 EUR 对应的 digit 数位:

所有的格式都存储在 LocaleData 里:


找不到 EUR 对应的 digit 值:

于是读取 default 配置。如果 default 配置也为空,就返回默认的 2.

default 值维护在此处:2

此处把 87 和 2 使用小数点分隔开,放到不同的变量里分别存储:

iDotPos = sNumber.indexOf(".");
    if (iDotPos > -1) {
      sIntegerPart = sNumber.substr(0, iDotPos);
      sFractionPart = sNumber.substr(iDotPos + 1);
    } else {
      sIntegerPart = sNumber;
    }

最终的格式化结果:87.20

看另一个例子:9.99999 EUR

这里 preserveDecimals 的值为 true,因此 9.99999 小数点后的五个 9,会被保留下来。

如果我们把 preserveDecimals 的值改为 false,

最后显示的值就四舍五入变成了 10.00:

相关文章
|
5月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
5月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
5月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
|
2月前
|
JavaScript 前端开发 安全
[译] 在 Vue 组件中分离 UI 和业务逻辑。
[译] 在 Vue 组件中分离 UI 和业务逻辑。
|
2月前
|
前端开发 JavaScript UED
element-ui 表格数据究竟隐藏着怎样的神秘样式与格式化技巧?快来揭开谜底!
【8月更文挑战第22天】《element-ui 表格数据样式及格式化案例》展示了如何利用 element-ui 的表格组件实现美观且易读的数据展示。通过简单配置,可以自定义表格样式,如边框、背景色等,并通过 formatter 实现数据格式化,例如将成绩保留一位小数。此外,还能依据条件设置行样式,如成绩达优则高亮显示,从而增强用户体验和数据可读性。
57 1
|
2月前
|
C# 开发者 设计模式
WPF开发者必读:命令模式应用秘籍,轻松简化UI与业务逻辑交互,让你的代码更上一层楼!
【8月更文挑战第31天】在WPF应用开发中,命令模式是简化UI与业务逻辑交互的关键技术,通过将请求封装为对象,实现UI操作与业务逻辑分离,便于代码维护与扩展。本文介绍命令模式的概念及实现方法,包括使用`ICommand`接口、`RelayCommand`类及自定义命令等方式,并提供示例代码展示如何在项目中应用命令模式。
32 0
|
3月前
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
226 0
|
5月前
|
开发者 UED
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
|
5月前
|
BI 数据库
SAP ABAP ALV 报表单击某列后执行某段 ABAP 逻辑的实现方式 - hotspot 行为实现试读版
SAP ABAP ALV 报表单击某列后执行某段 ABAP 逻辑的实现方式 - hotspot 行为实现试读版
|
5月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版