第1話

[JavaScript]3桁ずつカンマを打つ方法

こんにちは!Takuya.B(@TB_IQ)です。

先日業務中に金額を扱うプログラムを作ったのですが、その際にJavaScriptで3桁ずつカンマを打つ必要ありました。

本日は、JavaScriptで3桁ずつカンマを打つ方法をご紹介します。

スポンサーリンク

JavaScriptで3桁ずつカンマを打つ方法

toLocaleStringメソッドを使う

一番てっとり早いのはNumberオブジェクトの toLocaleString メソッドを使用する方法です。

const number = 10000;

const replace = number.toLocaleString();

console.log(replace);
// 10,000

一昔前はSafariやIEでは使えないみたいなことが言われていましたが、2020年11月現在確認したところ、Safariでは使用できました(IEは近日確認します)。

正規表現を使う

前述の toLocaleString メソッドがどのブラウザでも使用できるため、こちらの正規表現を使用する場合はほとんど無いと思いますが、前バージョンのIEなどでも動作させる場合などに使用してください。

const number = 10000;

const replace = String(number).replace(/(\\d)(?=(\\d{3})+$)/g, "$1,");

console.log(replace);
// 10,000

このとき、 replace は文字列型なので、数値型にしたい場合は、Number(replace) としてください。

スポンサーリンク

あとがき

今回はJavaScriptで3桁ずつカンマを打つ方法を紹介しました。

購入フォームなどでブラウザ側で金額の計算処理を実装する際などに活用できますので、是非参考にしてみてください!

サーバー側ならもう少し簡単に3桁ずつカンマを打つことができるので、またの機会にご紹介できればと思います。

というわけで、次回もよしなに!

オススメ書籍

JavaScriptを体系的に学びたい方は以下の書籍がオススメです!