basara669.com

こんちは！basara669です。

久々の更新になっちゃいました。

かなり細かい部分の実装なんですけど、Backbone.jsやMarionette.jsを使ってループで数字を表示した時に、3桁ごとにカンマを付ける方法を紹介しようと思います。

実装で困った点

今回の実装をするにあたってサーバサイドで行う方法と、クライアントサイドで行う方法の2つがあると思います。
簡単に行うなら、カンマを付属した状態でサーバサイドから送ってもらって、それを受け取って表示する方法だと思うのですが、そうするとカンマが入ってしまうことにより、思った通りソートが動かなくなってしまったりします。

なので、どうしてもクライアントサイドで行う必要がありました。

modelやcontrollerでの実装

他の方法だとajaxで、数字を受け取った時点で、modelやcontroller側で数値を取り出して、カンマを付けて、また、数字を戻せばよいと思います。
ただ、そうすると、結局ソートの対象となるデータにカンマが入ってしまうため、サーバ側で実装するのと変わらなくなってしまいます。

ということで、元のデータを変えず表示上カンマを加えるということで、テンプレート側に実装します。

jsで3桁毎にカンマをつける

このあたりはすごいたくさんコードが出回っているので、いまさら解説する必要も無いと思うので、さらりといきます
具体的なコードとしては下記のような感じです。

var num = 1111;
String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,' );

正規表現を使って、カンマを挿入します。

実装のコード例

<scrip type="text/template" id="commaTest">
  <%
  //dataの部分には入れるmodelから表示する値を入れます
  var numAddedComma = String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,' );
  
  %>  
  //入れたかったdataの要素にcommaが付いたものが挿入されます
  <li><% numAddedComma %></li>  
</scrip>

コメント部分を読んでもらえればだいたいわかると思います。
もともと挿入する予定だった値に対して、commaを付属する処理を行い、付属後の値を挿入しているだけです。

こうすることによって、元のデータに関係することなく、カンマ付属するという処理を加えて挿入することができます。

まとめ

結構マニアックな部分な実装なのですが、同じように困った人の助けになればいいなと思います。
ではでは