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

【簡単】jQueryを使って、入力中の値をリアルタイムでチェック・取得する方法

更新日:2022.09.09
1405
jQuery

jqueryを使って、パラメーターを追加・付与し、条件分岐する方法

更新日:2022.09.09
893
jQuery

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

更新日:2022.09.09
1633
jQuery

【jQuery】スクロール途中からヘッダーやナビを固定する方法

更新日:2022.09.09
538