• jQuery

jQueryを使って、金額を三桁でカンマ区切りする方法

JSなどを使って算出された整数を三桁でカンマ区切りされた金額表示に変更したい。

このような悩みを解決致します。

本記事ではjQueryを使って、整数を三桁でカンマ区切りする方法について解説致します。

実装サンプル

See the Pen
Untitled by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

ボタンを押すと金額が三桁カンマ区切りになるかと思います。

次章より詳細を説明します。

.replace()関数を使おう

   var num = 10000000;
   var price = String(num).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');

三桁区切りにしたい値を変数に格納。

上記変数をString関数を使い文字列に変換。（最初から文字列であればしなくて大丈夫です。）

最後に.replace(/(\d)(?=(\d{3})+(?!\d))/g, ‘$1,’)関数を使う事で三桁区切りにする事ができます。

以上で完了です。

まとめ

String関数を使わず、数値のまま.replace(/(\d)(?=(\d{3})+(?!\d))/g, ‘$1,’)関数を使っても三桁区切りにならないので注意しましょう。

以上で解説を終わります。