web-dev-qa-db-ja.com

口ひげで小数を通貨形式にフォーマットするにはどうすればよいですか?

Ajaxを介して受信したjsonデータをレンダリングするために口ひげを使用しています。

この数値を通貨形式で表示したい:

{{price}}

例:12300

どうすれば次のようにレンダリングできますか?

"12,300"

口ひげテンプレートエンジンを使用していますか?

13
brainydexter

口ひげは非常にミニマルであり、これをサポートしていません。

フォーマットされたデータまたはフォーマットされたデータを返す関数を指定する必要があります

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

別の方法は、ヘルパー関数をサポートする handlebars.js を使用することです。

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

このように使用します

{{decimal price}}
15

Luceroの答え に同意しますが、 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>

これが 動作中のjsFiddle で、さらに詳しく調べて遊んでください。

8
maxbeatty

Mustache.jsの小さな拡張機能を作成しました。これにより、式内でフォーマッターを使用できるようになります。フォーマッター}}

Githubで確認できます: http://jvitela.github.io/mustache-wax/

7
JVitela

モデルを口ひげ(または実際には任意のテンプレートエンジン)に渡す前に、これを行う必要があります。文字列操作を実行できることは別として、問題は、すべての国が数値を同じ形式にするわけではないため、表示表現が異なる可能性があり、テンプレートにハードコーディングしないでください。

1
Lucero

https://www.npmjs.com/package/handlebars.numeral のHandlebarsNumeralHelperパッケージを使用しています

まず、インストールします(オプションでpackage.jsonに保存します)。

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>

この例の出力は12,300です。

0
Dan King