Written by Kasumi

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,’)関数を使っても三桁区切りにならないので注意しましょう。

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

目次

関連記事

jQuery

タブ切り替えでタブを上下に二つ設置し、連動させる方法

更新日:2022.09.09
4253
jQuery

jQueryで画像読み込み完了後にイベントを実行する方法

更新日:2022.09.09
5790
jQuery

【簡単datapicker】選択した日付によってイベントをjQueryで追加する方法

更新日:2022.09.09
5545
jQuery

【簡単】jQueryとCSSを使って要素をふわっと出す方法【プラグイン不要】

更新日:2022.09.09
1392