Question

我正在使用小胡子来渲染通过Ajax接收的json数据。

我想以货币格式呈现此数字：

{{price}}

例如：12300

如何将其渲染为：

"12,300"

使用胡子模板引擎？

Answer 1

Mustache很简约，并没有为此提供任何支持。

您必须提供格式化数据或返回格式化数据的函数

{ priceDecimal: function () { return formatDecimal(this.price); } }

另一种选择是使用支持辅助函数的handlebars.js

Handlebars.registerHelper('decimal', function(number) {
  return formatDecimal(number);
});

并像这样使用

{{decimal price}}

Answer 2

虽然我同意Lucero's answer，但您可以使用function in Mustache格式化数据。

简单模板：

<ul>
    {{#price}}
        <li>{{commaFormat}}</li>
    {{/price}}
</ul>

使用格式化函数处理数据的JavaScript：

var tpl = $('#tpl').html(),
    data = {
        price: ['1234', '123', '123456', '1234567890'],
        commaFormat: function() {
            // adapted from https://stackoverflow.com/questions/2901102/how-to-print-number-with-commas-as-thousands-separators-in-javascript
            return this.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }
    },
    html = Mustache.to_html(tpl, data);

document.write(html);

结果HTML：

<ul>
    <li>1,234</li>
    <li>123</li>
    <li>123,456</li>
    <li>1,234,567,890</li>
</ul>

这是the working jsFiddle来进一步检查和玩耍。

Answer 3

我为Mustache.js创建了一个小扩展，它允许在表达式中使用格式化程序，例如{{expression |格式化}}

您可以在github中查看：http://jvitela.github.io/mustache-wax/

Answer 4

在将模型传递给小胡子（或任何模板引擎）之前，您应该这样做。除了能够进行字符串操作之外，问题在于并非所有国家都将数字格式化为相同，因此显示表示可能不同，不应在模板中进行硬编码。

Answer 5

我使用https://www.npmjs.com/package/handlebars.numeral

中的Handlebars NumeralHelper包

首先，安装（并选择将其保存到package.json中）：

my_distm <- function(long1, lat1, long2, lat2)
  distm(c(long1, lat1), c(long2, lat2), fun=distHaversine)

data <- data %>%  mutate(
  dist = map2(long, lat, my_distm, my_long, my_lat) # this doesn't
)

接下来，加载帮助程序：

npm install --save handlebars.numeral

最后，在您的页面中使用它：

var Handlebars = require('handlebars');
var NumeralHelper = require("handlebars.numeral");
NumeralHelper.registerHelpers(Handlebars);

此示例的输出为<script> myNumber = 12300: </script> <div> {{ number myNumber }} </div>。

如何在胡子中格式化十进制到货币格式？

5 个答案: