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を使ってJSONデータを取得、配列にして値を出力する方法【Ajaxで解決!】

更新日:2022.09.09
15127
jQuery

jQueryを使って、checkしたinput要素の label値を取得する方法

更新日:2022.09.09
10557
HTMLCSS jQuery

【簡単CSS・jQuery】上スクロール時のみヘッダー・ナビを固定表示する方法

更新日:2022.09.09
1803
HTMLCSS jQuery

一枚画像に複数のリンクを場所指定して設置する方法【レスポンシブ対応】

更新日:2022.09.09
2526