JavaScriptの.toLocaleString()で数字の桁数を3桁カンマ区切り

金額を表記して桁数が多かった場合、その数字の3桁毎にカンマをポチポチ目視で打つのは地味に大変です。

そんな時、JavaScriptの .toLocaleString() という便利なメソッドで「3桁カンマ区切り」を一瞬で終わらせることができます。

そんなメソッドと方法について解説していきます。

.toLocaleString()

JavaScriptの .toLocaleString() は、この数値を表す言語依存の文字列を返すメソッドで、日本の場合、日本特有の慣習によって表した文字列を返します。

このメソッドについて、以下の記事が分かりやすいので詳細は以下をチェックしてみてください。

このように、ロケールとオプションに応じた形式で文字列に変換した値を取得することができます。なので、数字を表記するときにわざわざポチポチとカンマ区切りをする必要がなくなる非常に便利なメソッドです。

3桁カンマ区切りをするサンプル

表示されている数字の桁数は13桁で、万・億・兆の次の「京」で一京です。

サンプルは、「そのまま3桁カンマ区切り」と「頭に「￥」を付けて3桁カンマ区切り」の2種類で、それぞれボタンクリックで変換されるので、試してみてください。

そのまま3桁カンマ区切り

まずは、そのまま3桁のところでカンマで区切る場合です。

頭に「￥」を付けて3桁カンマ区切り

次に、3桁のところでカンマで区切って頭に「￥」を付けるサンプルです。

サンプルのコード

HTMLは、「priceyen」のidをつけた p タグが3桁カンマ区切り対象。そして、「replaceBtn1」のidをつけた button タグが、クリックでカンマ区切りのトリガーになるボタンの2種類です。

<p id="priceyen">1000000000000</p>
<button id="replaceBtn1">数字を3桁カンマ区切り</button>

JavaScriptでは、ざっくり言うと「クリックイベントで指定idを持つタグを取得 → 取得したタグの文字を取得 → 取得した文字をNumberに置き換え → 3桁のカンマ区切りを実行 → 指定idを持つタグに値を返して置き換え」の順番になっています。

この流れで、以下のように priceで取得した文字型を、Numberに直してからtoLocaleString()を実行することで、自動的に3桁のカンマ区切りにしてくれます。

document.querySelector('#replaceBtn1').addEventListener('click', () => {
const price = document.getElementById("priceyen").textContent;
const result = Number(price).toLocaleString();
document.getElementById("priceyen").innerHTML = result;
},{ once: true });

.addEventListener のクリックトリガーを1回のみ発火させる場合は、.addEventListenerの閉じタグの前に,{ once: true } をつければOKです。

かかかず

この { once: true } をつけないと変換後の数値を取得してしまう為、2回目のクリック以降にNaN が出ちゃいます。

頭に「￥」を付けて3桁カンマ区切りの場合

数字の頭に「￥」をつける場合は、.toLocaleString の後に下記のようなオプションを記述することで、日本円での表示も可能です。

.toLocaleString('ja-JP',  { style: 'currency', currency: 'JPY' });

これ以外にも例えば、漢数字で金額を表示する場合などオプションを付与することでいろんな表記ができます。

詳細は以下が参考になるので、あわせてチェックしてみてください。