ECサイトの価格表示や、管理画面のデータ集計など、Webサイトで数値を扱う場面は非常に多くあります。
その際、ユーザーにとって読みやすい形式にするために必須となるのが「3桁ごとのカンマ区切り（1,000,000）」です。
この記事では、最も簡単で推奨される toLocaleString() メソッドの使い方から、通貨記号や小数点を細かく制御できる Intl.NumberFormat の活用法、さらには「カンマを取り除いて数値に戻す方法」まで、実務で役立つテクニックを網羅的に解説します。
 執筆者：マヒロ |
|
- OS：Windows 11 / macOS Sequoia
- IDE：Visual Studio / VS Code / IntelliJ IDEA
- その他：Chrome DevTools / 各言語最新安定版
※本メディアでは、上記環境にてコードの動作と情報の正確性を検証済みです。
数値を3桁カンマ区切りにする最も簡単な方法（toLocaleString）
数値をカンマ区切りの文字列に変換したい場合、最も手軽で確実なのが Number.prototype.toLocaleString() メソッドを使用する方法です。
これは数値（Number型）に対して呼び出すことができるメソッドで、ブラウザの言語設定（ロケール）に合わせて適切なフォーマットに変換してくれます。
toLocaleString() の基本的な使い方
const price = 1234567;
const formatted = price.toLocaleString();
console.log(formatted);
1,234,567
price には数値の 1234567 が入っています。この数値変数に対して
.toLocaleString() を実行するだけで、自動的に3桁ごとにカンマが挿入された文字列 "1,234,567" が生成されます。ロケール（国・地域）を明示的に指定する場合
基本的には引数なしで問題ありませんが、ユーザーの環境に関わらず「日本の形式」や「アメリカの形式」で固定したい場合は、第1引数にロケールコードを指定します。
const num = 1234567.89;
// 日本形式（3桁カンマ、小数はドット）
console.log(num.toLocaleString('ja-JP'));
// ドイツ形式（3桁ドット、小数はカンマ）
console.log(num.toLocaleString('de-DE'));
1,234,567.89
1.234.567,89
toLocaleString('ja-JP') と指定すると、明示的に日本のフォーマットルールが適用されます。toLocaleString('de-DE') を指定するとドイツの形式になります。ドイツなどのヨーロッパ圏では、桁区切りに「ドット」、小数点に「カンマ」を使う文化があるため、出力結果が
1.234.567,89 のように日本とは逆になります。より細かく制御するならIntl.NumberFormat（高機能）
toLocaleString() は手軽ですが、大量の数値を処理する場合や、オプションを細かく設定して使い回したい場合は、Intl.NumberFormat オブジェクトを使用するのがベストプラクティスです。
これは国際化対応のためのAPIで、パフォーマンスも良く、柔軟な設定が可能です。
通貨（円・ドル）としてフォーマットする
単にカンマを入れるだけでなく、「円」や「¥」マークをつけたい場合は、style オプションを使用します。
const price = 5000;
// 日本円としてフォーマット
const jpyFormatter = new Intl.NumberFormat('ja-JP', {
style: 'currency',
currency: 'JPY'
});
console.log(jpyFormatter.format(price));
￥5,000
new Intl.NumberFormat() の第2引数にオプションオブジェクトを渡しています。style: 'currency' は通貨モードにする設定で、currency: 'JPY' は日本円を指定しています。.format(price) メソッドを呼び出すと、数値が ￥5,000 という文字列に変換されます。自分で「￥」という文字を結合する必要がないため、非常にスマートです。
小数点の桁数を指定してフォーマットする
「小数点以下2桁まで必ず表示したい（100.00など）」といった場合も、オプションで制御できます。
const num = 1234.5;
const formatter = new Intl.NumberFormat('ja-JP', {
minimumFractionDigits: 2, // 小数点以下の最小桁数
maximumFractionDigits: 2 // 小数点以下の最大桁数
});
console.log(formatter.format(num));
1,234.50
minimumFractionDigits は「小数点以下を最低何桁表示するか」という設定です。2 を指定しているため、元の数値が 1234.5 であっても、足りない桁が0で埋められて .50 と表示されます。maximumFractionDigits は最大桁数で、これを超えた場合は四捨五入されます。これにより、表記揺れのないきれいな数値を表示できます。
文字列操作で実装？正規表現を使った3桁区切り
現在は推奨されませんが、古いブラウザ対応や、toLocaleString が使えない特殊な環境（あるいは純粋な文字列処理として実装したい場合）では、正規表現を使ってカンマ区切りを実現することもあります。
知識として知っておくと、レガシーコードの修正などで役立ちます。
replaceメソッドと正規表現のコード
function formatNumber(num) {
// 文字列に変換してから置換
return String(num).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
}
console.log(formatNumber(1234567));
1,234,567
(\d) で数字をキャプチャし、(?=(\d{3})+(?!\d)) という先読み（ルックアヘッド）を使って、その数字の後ろに「3の倍数個の数字」が続いているかを確認しています。'$1,' で元の数字の後ろにカンマを追加します。カンマ区切りの文字列を数値に戻す方法（削除）
逆に、入力フォームなどでユーザーが入力した「1,000」のようなカンマ付き文字列を、計算のために数値の「1000」に戻したい場合もあります。
この場合は、単にカンマを空文字に置換してから数値変換を行います。
replaceとNumber関数を使う
const strPrice = "1,234,567";
// カンマをすべて取り除く
const rawStr = strPrice.replace(/,/g, '');
// 文字列を数値に変換
const priceNum = Number(rawStr);
console.log(priceNum);
console.log(priceNum + 1); // 計算できるか確認
1234567
1234568
strPrice.replace(/,/g, '') を使って、文字列に含まれるすべてのカンマ（/gフラグで全置換）を空文字に置き換えます。"1234567" という純粋な数字の文字列になります。Number() 関数を使って文字列型を数値型（Number型）に変換しています。これで、足し算などの計算が可能になります。
JavaScriptのスキルを活かして年収を上げる方法
以上、JavaScriptで数値を3桁カンマ区切りにする方法について詳しく解説してきました。
| 年収アップにこだわりたい方 （平均アップ額138万円の実績） | テックゴー |
| 未経験・経験者問わず幅広く探したい方 | ユニゾンキャリア |
| 業界に精通した担当者に相談したい方 | キッカケエージェント |
| ゲーム業界への転職を志望する方 | ファミキャリ |
| エンジニア未経験からキャリアを築く方 | イーチキャリア |
