数値をコンマ区切りで表現するのは、基本中の基本です。
1234567890 ＝＞ 1,234,567,890
サーバーサイドでは、数値にカンマ区切りを挿入してくれる便利な関数が標準で用意されています。
phpの場合：number_format( $num );
C#の場合： (1234567890).ToString(“#,##0”);
クライアントサイドであるブラウザ側では、
サーバーサイドで生成されたコンマ区切り文字列をそのまま表示するのが一番簡単です。
なぜなら、javascriptでは標準でコンマ区切り書式にする関数が存在しません。
また、以前CSSで数値を表示上カンマとして表示する仕組みも検討されていたようですが、一向に進んでいないようです。
javascriptで数値をコンマ区切りする方法 javascript number comma
javascript toLocaleString()
var n = 1234567890;n.toLocaleString();
safari系(ipad/iphone/osx)ではうまくいきません。safari系無視でOKな要件の場合、もっとも簡単な方法です。
javascript 正規表現でコンマ区切り
function numberWithCommas(x) {
var parts = x.toString().split(".");
return parts[0].replace(/\B(?=(\d{3})+(?=$))/g, ",") + (parts[1] ? "." + parts[1] : "");
}
正規表現で区切りを挿入するパターン、ループしてカンマを入れるパターンなどがあります。
これらのデメリットは、すべて自作のため、品質の問題が付きまといます。
javascript 有名な外部ライブラリを利用する
現時点では、この有名所の外部ライブラリを利用するのがオススメです。
その理由は、いろいろな方がつかっているので、関数の信頼性が高いことにあります。
オススメはd3.format
公式サイト: http://d3js.org/
スクリプトの読み込み(CDNパターン)
<script src=”http://d3js.org/d3.v3.min.js” charset=”utf-8″></script>
カンマ区切りする方法
var num1 = d3.format(“,”)(1234567890);
var num2 = d3.format(“,.2f”)(1234567890); // 小数２桁
詳しい書式は、以下を参照してください。
https://github.com/mbostock/d3/wiki/Formatting
D3はデータを可視化する（グラフなど）ためのエンジン的なライブラリです。
利用者もたくさんいるので品質面で安心です。
d3.timeという日時系書式も存在します。
コメント