JavaScriptで数値をカンマ区切りでフォーマットする方法

Posted by Kousukei on 2025/08/04 23:39:57
JavaScriptで数値をカンマ区切りでフォーマットする方法

はじめに (対象読者・この記事でわかること)

この記事は、JavaScriptを使用したWeb開発を行うデベロッパーを対象にしています。JavaScriptで数値をカンマ区切りでフォーマットする方法がわかるようになります。具体的には、数値をカンマ区切りでフォーマットする方法や、実際のコード例を見ながら学習できます。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 前提となる知識1 (JavaScriptの基本的な文法) 前提となる知識2 (数値フォーマットの基本的な概念)

JavaScriptで数値をカンマ区切りでフォーマットする方法

JavaScriptでは、数値をカンマ区切りでフォーマットするために、toLocaleString()メソッドやIntl.NumberFormatオブジェクトを使用します。ここでは、これらの方法について詳しく解説します。

toLocaleString()メソッド

toLocaleString()メソッドは、数値をカンマ区切りでフォーマットするために使用します。以下のコード例を見てみましょう。

const num = 1234567;
console.log(num.toLocaleString()); // "1,234,567"

この方法は簡単ですが、フォーマットのカスタマイズが制限されています。

Intl.NumberFormatオブジェクト

Intl.NumberFormatオブジェクトは、数値をカンマ区切りでフォーマットするためのより高度なオプションを提供します。以下のコード例を見てみましょう。

const num = 1234567;
const formatter = new Intl.NumberFormat('ja-JP', {
  style: 'decimal',
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
});
console.log(formatter.format(num)); // "1,234,567"

この方法では、フォーマットのオプションを細かく制御できます。

ハマった点やエラー解決

実装中に遭遇する問題として、数値が正しくフォーマットされない場合があります。この場合、数値の型やフォーマットのオプションを確認してください。

解決策

数値の型が正しいことを確認します。

const num = '1234567'; // 文字列
console.log(typeof num); // "string"
const num2 = Number(num); // 数値に変換
console.log(typeof num2); // "number"

フォーマットのオプションを確認して、必要なフォーマットを指定します。

const num = 1234567;
const formatter = new Intl.NumberFormat('ja-JP', {
  style: 'decimal',
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
});
console.log(formatter.format(num)); // "1,234,567"

まとめ

本記事では、JavaScriptで数値をカンマ区切りでフォーマットする方法を解説しました。

この記事を通して、JavaScriptで数値をカンマ区切りでフォーマットする方法がわかったと思います。実際のコード例を見ながら、より深く理解を深めてください。

参考資料

参考にした記事、ドキュメント、書籍などがあれば、必ず記載しましょう。