Handlebars自定义toFixed helper千位分隔符渲染不显示问题

问题原因排查及解决方法 #

• 首先确认helper返回值是否正确：在你的helper最后return之前加一行console.log('格式化结果：', aValue)，看控制台输出是否带千位分隔逗号，如果这里已经没有逗号，说明是helper内部逻辑的问题，否则问题出在模板渲染后的后续处理环节。
• 最常见的导致该问题的原因：项目中存在其他全局JS逻辑（比如表格组件、数值校验脚本、自定义的模板后处理逻辑）会自动识别看起来是数值的字符串，将其转换为Number类型再赋值到DOM，转换过程中千位分隔逗号就会丢失。
• 针对模板渲染层面的规避方法：可以将返回的格式化字符串包裹为Handlebars.SafeString，明确告诉Handlebars这是不需要二次处理的纯文本内容，修改后的helper代码如下：

Handlebars.registerHelper ("toFixed", function (aValue, aDigits) {
  if (!aDigits) {
    aDigits = 2;
  }
  if (!isNaN (aValue) && Number.isInteger (Number (aDigits))) {
    aValue = new Intl.NumberFormat ("en-US", { minimumFractionDigits : aDigits, maximumFractionDigits : aDigits }).format (aValue);
  }
  // 用SafeString包裹返回值
  return new Handlebars.SafeString(aValue);
});

• 如果修改后问题仍然存在，可以在模板渲染完成后立刻打印对应DOM元素的innerText：

// 模板渲染完成后执行
console.log(document.querySelector('div').innerText)

如果此时打印结果带逗号，说明后续有其他JS逻辑修改了DOM内容，可以通过断点调试找到对应的处理逻辑进行调整。

• 临时规避方案：如果找不到后续处理的逻辑，可以在千位分隔符后插入一个零宽空格，避免被数值识别逻辑判定为纯数字字符串：

aValue = new Intl.NumberFormat ("en-US", { minimumFractionDigits : aDigits, maximumFractionDigits : aDigits }).format (aValue).replace(/,/g, ',\u200B');

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