基于小数末尾规则的百分比显示JavaScript代码修改求助

需求规则 #

• 若两位小数显示时末尾是单个0（如0.20%），改为显示三位小数（如0.195%）
• 若三位小数显示时末尾是两个0（如0.200%），改为显示两位小数（如0.20%）
• 若两位小数中无末尾0，直接保持两位小数显示

修改后的代码 #

// 初始化变量：去除文本中的千分位逗号，转为浮点数
var oldValue = parseFloat(previousClosing.innerText.replace(/,/g, ''));
var newValue = parseFloat(toggleIndexData.innerText.replace(/,/g, ''));

// 计算百分比变化值
var difference = newValue - oldValue;
var percentageChange = (difference / oldValue) * 100;

// 按规则处理显示精度
let displayText;
// 先获取三位小数的字符串形式
const threeDecimalStr = percentageChange.toFixed(3);
// 判断三位小数末尾是否是两个0（比如0.200）
if (threeDecimalStr.endsWith('00')) {
  // 显示两位小数
  displayText = percentageChange.toFixed(2) + '%';
} else {
  // 获取两位小数的字符串形式
  const twoDecimalStr = percentageChange.toFixed(2);
  // 判断两位小数末尾是否是单个0（比如0.20）
  if (twoDecimalStr.endsWith('0')) {
    // 显示三位小数
    displayText = threeDecimalStr + '%';
  } else {
    // 直接显示两位小数
    displayText = twoDecimalStr + '%';
  }
}

// 将处理后的结果赋值到页面元素
percentage.innerText = displayText;

代码逻辑说明 #

1. 变量初始化：和原代码逻辑一致，把页面元素里带千分位逗号的文本转成可计算的浮点数。
2. 百分比计算：核心计算逻辑不变，通过（新值-旧值）除以旧值再乘以100，得到百分比变化值。
3. 精度判断：
   • 先判断三位小数的末尾是否为两个0，这种情况直接显示两位小数，避免多余的0。
   • 若不是，再看两位小数的末尾是否为单个0，这种情况显示三位小数，保留更精准的数值。
   • 其余情况直接显示两位小数即可。

效果验证 #

• 计算38790.43与38714.77的百分比变化时，两位小数显示为0.20%，最终会自动转为三位小数的0.195%
• 若计算结果三位小数是0.200%，会自动转为两位小数的0.20%
• 若两位小数是0.19%，则直接显示0.19%

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