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

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

Ads

関連記事

JavaScript プログラミング

開閉するアコーディオンリストがあり、一つ開いたら、他の開いていたのを閉じさせる方法

2020.07.15
731
WordPress プログラミング

【BreadcrumbNavXT】パンくずをJSONLD形式構造化で表示する方法

2022.01.02
30
JavaScript プログラミング

スムーズスクロール機能をjavascript(jquery)を使用し実装する方法

更新日:2020.04.27
371
WordPress プログラミング

【簡単】wordpressで共通コードをパーツ化させる方法【プラグイン不要】

更新日:2022.04.07
96