财务表、库存表、绩效表里经常出现大量 0。这些 0 不是错误，它们代表没有发生、没有库存、没有差异；但当一整列都被 0 填满时，读者很难快速看到真正需要关注的非零项。这个 demo 的思路很克制：不改数据，只把符合条件的 0 显示成 -。在 SpreadJS 这样的 JavaScript 电子表格控件里，这类“显示层优化”往往比大功能更能改善日常使用感。

我们为大家准备了免费体验的 Demo：点击即可体验

为什么这个细节重要

对普通读者来说，- 很容易被理解为“没有值或不需要关注”，扫读压力比连续的 0 小。对产品经理来说，这能让报表更贴近业务语言：用户关心异常、变化和有效数据，而不是被占位数字打断。对开发者来说，最重要的是边界清楚：单元格真实值仍然是数字 0，公式计算、排序、后续判断都可以继续围绕原始值工作。

这和直接把 0 替换成字符串不同。字符串会改变数据类型，可能影响计算、导出或接口回传。demo 使用的是条件格式加 formatter，只改变“看起来是什么”，不改变“数据是什么”。这种区分，是做专业表格应用时很值得保留的设计习惯。

还有一个产品层面的好处：它让同一张表同时服务两类人。系统和公式继续读取准确的数值，业务读者则看到更接近报表习惯的展示结果。前者需要确定性，后者需要可读性，二者不必互相牺牲。这正是显示规则的价值。

SpreadJS 的实现思路

代码先创建 GC.Spread.Sheets.Style，把 style.formatter 设置为 '-'。然后通过 sheet.conditionalFormats.addCellValueRule 添加单元格值规则：当目标范围内的值等于 0 时，套用这个样式。范围由 new GC.Spread.Sheets.Range(0, 0, 5, 1) 指定，表示从第一行第一列开始的 5 行 1 列。最后用 setArray 放入 [0, 2, 0, 4, 0] 作为测试数据。

const spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
const sheet = spread.getActiveSheet();
​
const style = new GC.Spread.Sheets.Style();
style.formatter = "-";
​
sheet.conditionalFormats.addCellValueRule(
  GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.equalsTo,
  "0",
  null,
  style,
  [new GC.Spread.Sheets.Range(0, 0, 5, 1)]
);
​
sheet.setArray(0, 0, [0, 2, 0, 4, 0]);

可以扩展到哪些场景

这个做法适合财务损益表、库存缺货表、预算执行表、KPI 看板、对账结果表。显示内容也不一定是 -，可以是“无”“未发生”“N/A”，但要先确认读者如何理解这些词。对于严肃报表，建议在表头、图例或说明里保持一致口径，避免同一系统里一会儿用 0、一会儿用空白、一会儿用短横线。

如果要导出 Excel，还需要单独确认导出后的显示策略是否符合预期。页面显示和文件输出是两个消费场景，不能默认完全一致。这个 demo 解决的是前端工作表中的可读性问题。

给开发者的关键词

SpreadJS、JavaScript 电子表格控件、Workbook、Worksheet、Style、formatter、conditionalFormats.addCellValueRule、ComparisonOperators.equalsTo、Range、setArray、0 值显示为指定内容、显示值与真实值分离。

小结

这篇 demo 的价值不在于把 0 变漂亮，而在于提醒我们：表格体验常常由这类细节组成。保持数据真实，再用显示规则降低阅读噪音，既照顾用户，也不给后续计算埋坑。