如何使用Handlebars为JSON返回的正负数值设置不同字体颜色

你可以通过两种方式实现需求，推荐优先用自定义Helper的方案，逻辑和视图拆分更清晰：

方案1：注册自定义Handlebars Helper（推荐） #

首先在Express初始化Handlebars引擎的代码中注册全局助手，一般该逻辑在app.js/server.js文件中：

const exphbs = require('express-handlebars');

// 初始化Handlebars时注册自定义助手
app.engine('handlebars', exphbs.engine({
  helpers: {
    getPercentColor: function (value) {
      if (value < 0) return 'text-danger'; // 小于0返回红色类
      if (value > 0) return 'text-success'; // 大于0返回绿色类
      return 'bg-secondary'; // 等于0保留原灰色样式
    }
  }
}));
app.set('view engine', 'handlebars');

然后修改模板代码，直接调用刚才注册的助手即可：

<h4>ChangePercent <span class="badge {{getPercentColor stock.changePercent}}"> {{ stock.changePercent}} % </span></h4>

如果不想用Bootstrap预设的文本颜色类，你可以自己定义CSS类，替换上述返回值即可：

.stock-down { color: #f5222d; }
.stock-up { color: #52c41a; }
.stock-unchanged { background-color: #6c757d; color: #fff; }

方案2：模板内直接写条件判断 #

如果你不想注册全局助手，也可以直接在模板中使用内置条件判断实现：

<h4>ChangePercent 
  <span class="badge
    {{#if (lt stock.changePercent 0)}}
      text-danger
    {{else if (gt stock.changePercent 0)}}
      text-success
    {{else}}
      bg-secondary
    {{/if}}
  ">
    {{ stock.changePercent}} %
  </span>
</h4>

注意：如果你的Express Handlebars版本较低不支持内置的lt/gt比较运算符，需要升级版本，或者改用方案1实现。

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