JavaScriptで数値を3桁カンマ区切りにする方法：toLocaleStringから正規表現まで

JavaScriptを使用して数値を扱う際、金額や統計データなどを読みやすく表示するために3桁ごとのカンマ区切りは欠かせません。

大きな数値をそのまま表示すると、桁数を一目で把握するのが難しく、ユーザーの利便性を損なう可能性があります。

現代のJavaScript開発においては、標準機能であるtoLocaleStringメソッドやIntl.NumberFormatオブジェクトを使用することで、非常に簡単にこの変換を実現できます。

また、特定の古い環境や特殊なロジックを必要とする場合には、正規表現を活用した手法も依然として有効な選択肢となります。

この記事では、JavaScriptで数値を3桁カンマ区切りに変換するための主要な手法を、基礎から応用まで詳しく解説します。

toLocaleStringメソッドを使用する最も標準的な方法

JavaScriptで数値をカンマ区切りにする最も簡潔な方法は、toLocaleStringメソッドを利用することです。

このメソッドはNumberオブジェクトのプロトタイプに含まれており、実行環境のロケールに合わせて数値を自動的にフォーマットします。

引数を指定せずに実行するだけで、ブラウザの言語設定に基づいた適切な区切り文字が挿入されます。

// 基本的な使用例
const price = 1234567;
const formattedPrice = price.toLocaleString();

console.log(formattedPrice);

"1,234,567"

このように、複雑なロジックを記述することなく、たった一行のコードでカンマ区切りを実装できるのが最大のメリットです。

通貨や単位を指定するオプション設定

toLocaleStringメソッドの第2引数には、詳細な表示形式を指定するオブジェクトを渡すことができます。

例えば、数値を単なるカンマ区切りではなく、通貨記号を含めた形式で表示したい場合に便利です。

// 日本円の形式で表示する
const amount = 50000;
const formattedAmount = amount.toLocaleString('ja-JP', {
    style: 'currency',
    currency: 'JPY'
});

console.log(formattedAmount);

"￥50,000"

このオプションを使用することで、国ごとの通貨表記ルール（記号の位置や小数点以下の扱い）を自動的に遵守できます。

styleプロパティには'currency'の他に、パーセント表示を行う'percent'や、単位を付与する'unit'なども指定可能です。

小数点以下の桁数を制御する

数値をカンマ区切りにする際、小数点以下の表示桁数を固定したいケースも多くあります。

その場合は、minimumFractionDigitsやmaximumFractionDigitsプロパティを使用します。

// 小数点以下を必ず2桁表示する
const pi = 1234.5;
const formattedPi = pi.toLocaleString('en-US', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
});

console.log(formattedPi);

"1,234.50"

これにより、データの一貫性を保ちながら、見た目の整った数値表示を実現できます。

Intl.NumberFormatによる高度なフォーマット

大量の数値を繰り返しフォーマットする必要があるパフォーマンス重視の場面では、Intl.NumberFormatオブジェクトの使用が推奨されます。

toLocaleStringは内部的にこのIntl.NumberFormatを呼び出していますが、毎回新しいインスタンスを作成するため、大量処理には向きません。

あらかじめフォーマッタをインスタンス化しておくことで、処理速度を大幅に向上させることが可能です。

// フォーマッタの再利用
const formatter = new Intl.NumberFormat('ja-JP');

console.log(formatter.format(1000));
console.log(formatter.format(5000000));
console.log(formatter.format(123.456));

"1,000"
"5,000,000"
"123.456"

ループ処理の中で数千、数万の数値を加工する場合は、この手法を選択するのがベストプラクティスです。

表記方法の柔軟な切り替え

Intl.NumberFormatでは、大きな数値を「万」や「億」といった単位で簡略化して表示する設定も可能です。

// コンパクトな表記の設定
const compactFormatter = new Intl.NumberFormat('ja-JP', {
    notation: 'compact'
});

console.log(compactFormatter.format(1500000));

"150万"

このように、モダンなJavaScriptのAPIを活用すれば、多様な表示要件に対して柔軟に対応できます。

正規表現を使用した文字列操作による方法

モダンなブラウザAPIが利用できない特殊な環境や、特定の文字列パターンに対して強制的にカンマを挿入したい場合には、正規表現が利用されます。

正規表現を用いた手法は、数値を一度文字列に変換し、パターンのマッチングによって置換処理を行います。

// 正規表現によるカンマ区切り関数
function addCommas(num) {
    return String(num).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
}

console.log(addCommas(1234567.89));

"1,234,567.89"

この正規表現の仕組みは、「後に3の倍数個の数字が続く数字」を探し、その直後にカンマを挿入するというものです。

ただし、このシンプルな正規表現では、小数点以下の数字までカンマ区切りにされてしまう可能性があるため、注意が必要です。

実用的な正規表現の改善案

小数点以下を保護しつつ、整数部分のみをカンマ区切りにするには、文字列を分割してから処理する工夫が必要です。

function smartComma(num) {
    const parts = String(num).split('.');
    parts[0] = parts[0].replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
    return parts.join('.');
}

console.log(smartComma(1234567.89));

"1,234,567.89"

正規表現による方法は、外部ライブラリや標準APIに依存したくない場合に有効ですが、コードの可読性や保守性の観点からは標準APIの使用が優先されます。

各手法の比較と使い分け

紹介した各手法には、それぞれ得意とする領域と注意すべき点があります。

開発シーンに合わせて最適な方法を選択できるよう、特徴を以下の表にまとめました。

基本的にはtoLocaleStringまたはIntl.NumberFormatを使用するのが、現在のJavaScript開発におけるデファクトスタンダードです。

実務で役立つ応用テクニック

実際のWeb開発では、単に数値を表示するだけでなく、ユーザー入力に合わせて動的にカンマを挿入したいといった要望がよくあります。

例えば、入力フォームでユーザーが数字を打ち込むたびにリアルタイムでカンマ区切りにする実装です。

// 入力フォームでのリアルタイムフォーマット例
const inputElement = document.querySelector('#price-input');

inputElement.addEventListener('input', (e) => {
    // カンマを除去して数値化
    const rawValue = e.target.value.replace(/,/g, '');
    const numberValue = Number(rawValue);

    if (!isNaN(numberValue)) {
        // カンマ区切りにして値を上書き
        e.target.value = numberValue.toLocaleString();
    }
});

このような実装を行う際は、「表示上の値」と「プログラムで扱う生の値」を混同しないことが重要です。

計算処理を行う前には必ずカンマを除去し、Number型にキャストしてから演算を行うようにしましょう。

大きな数値（BigInt）への対応

JavaScriptで扱える最大安全整数（Number.MAX_SAFE_INTEGER）を超える巨大な数値を扱う場合、BigInt型を使用します。

幸いなことに、toLocaleStringやIntl.NumberFormatはBigIntにも対応しています。

// BigIntのフォーマット
const hugeNumber = 12345678901234567890n;
console.log(hugeNumber.toLocaleString('ja-JP'));

"12,345,678,901,234,567,890"

このように、標準APIを利用することで、データ型に関わらず一貫したインターフェースで数値を整形できるのは非常に大きな強みです。

まとめ

JavaScriptで数値を3桁カンマ区切りにする方法は複数ありますが、現在は標準APIが非常に充実しています。

手軽に実装したい場合はtoLocaleString、パフォーマンスや高度なカスタマイズが必要な場合はIntl.NumberFormatを選択するのが賢明です。

正規表現による方法は、APIが使えない特殊な環境や、独自の整形ロジックを組み込みたい場合に限定して使用するのが良いでしょう。

ユーザーにとって読みやすい数値表示を行うことは、Webアプリケーションの品質を高める重要な要素の一つです。

今回紹介した手法を活用して、より洗練されたユーザーインターフェースを構築してください。