从Apex获取带小数的Number字段在LWC中显示异常问题

问题根源 #

问题出在Apex返回的高精度Number字段到JS的处理差异上：

• Apex把Number字段以原始数值类型传给LWC后，JS对数值转字符串的规则会随数值大小变化：
  • 3位整数（比如123）转字符串时，JS默认会省略末尾的小数零，直接输出123；
  • 4位及以上整数（比如1234），Apex实际返回的是带12位小数的完整数值（1234.000000000000），JS转字符串时会把所有小数零都显示出来；
• lightning-input type="number"会自动识别字段的精度配置做格式化，所以显示正常；但type="text"只会直接渲染数值的原始字符串形式，就出现了显示不一致的情况。

解决办法 #

你可以用以下几种方式统一显示效果：

1. 前端手动格式化数值 #

用JS的toFixed()方法强制保留12位小数，要是不想显示末尾多余的零，还能再做处理：

// 假设从Apex拿到的字段值是fieldValue
const formattedValue = fieldValue.toFixed(12);
// 去掉末尾无意义的零和可能的小数点
const trimmedValue = formattedValue.replace(/\.?0*$/, '');

之后把formattedValue或trimmedValue绑定到text类型输入框就行。

2. 用lightning-input的格式化配置 #

如果用type="number"的输入框，能通过format-options强制指定小数位数，保证显示一致：

<lightning-input 
    type="number" 
    label="高精度数值" 
    value={fieldValue}
    format-options="{ minimumFractionDigits: 12, maximumFractionDigits: 12 }"
></lightning-input>

3. Apex层返回格式化后的字符串 #

改一下Apex方法，把Number字段转成固定小数位的字符串再返回给LWC，前端直接渲染就好：

public static String getFormattedNumber() {
    YourObject__c record = [SELECT HighPrecisionNumber__c FROM YourObject__c LIMIT 1];
    return String.valueOf(record.HighPrecisionNumber__c.setScale(12));
}

补充说明 #

这不是Salesforce的Bug，只是Apex和JS对数值字符串化的默认规则不一样。用上面的格式化方法就能统一显示效果，满足业务需求。

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