アフィリエイト広告を利用しています

javascript numeric comma処理:品質面で安心できる

数値をコンマ区切りで表現するのは、基本中の基本です。

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); // 小数2桁

詳しい書式は、以下を参照してください。
https://github.com/mbostock/d3/wiki/Formatting

D3はデータを可視化する(グラフなど)ためのエンジン的なライブラリです。
利用者もたくさんいるので品質面で安心です。

d3.timeという日時系書式も存在します。

 

  • 初期費用0円(2022年8月4日に撤廃)
  • 安定したサイト運営が可能(CPU/メモリ リソース保証 6コア/8GB〜)
  • 契約中は独自ドメインつき 独自ドメイン永久無料特典があります
  • 最大10日間無料で、サーバーのお試し利用ができます
  • ディスクキャッシュも高速 NVMe SSDを採用(300GB〜)
  • 大量アクセスでも安心 転送量は無制限

 

 

posted by scripts at 09:30 | Comment(0) | TrackBack(0) | javascript
この記事へのコメント
コメントを書く

お名前:

メールアドレス:


ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバックURL
https://fanblogs.jp/tb/3561560
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック
最新記事
最新コメント
タグクラウド
カテゴリアーカイブ