記事内にはプロモーションが含まれています

【JavaScript】数値のフォーマット方法まとめ！3桁カンマ区切りや小数点、0埋めなど

【JavaScript】数値のフォーマット方法まとめ！3桁カンマ区切りや小数点、0埋めなど JavaScript

Webサイトやアプリを作成する際、数値をそのまま表示するのではなく、「金額として見やすくしたい」「小数点以下を揃えたい」といった場面は頻繁に訪れます。

例えば、1000000 という数値をそのまま表示するよりも、1,000,000円 と表示した方がユーザーにとって親切です。
また、計算結果の 3.14159... を 3.14 に丸めたい場合もあるでしょう。

JavaScriptには、こうした数値のフォーマット（整形）を行うための強力な機能が標準で備わっています。

かつては独自に関数を作ったりライブラリを使ったりしていましたが、現在は Intl.NumberFormat や toLocaleString を使うのがモダンで推奨される方法です。

この記事では、JavaScriptを使った数値フォーマットの基本から、通貨表示、小数点の扱い、そしてID番号などで使われる0埋め（ゼロパディング）まで、現在の開発現場で役立つテクニックをサンプルコード付きで徹底解説します。

【本記事の信頼性】
プロフィール
執筆者：マヒロ
  • 執筆者は元エンジニア
  • SES⇒大手の社内SE⇒独立
  • 現在はこじんまりとしたプログラミングスクールを運営
  • モットーは「利他の精神」

数値を「3桁カンマ区切り」にする基本の方法

金額や数量など、大きな数字を表示する際に必須となるのが「3桁ごとのカンマ区切り」です。

これは toLocaleString() メソッドを使うだけで驚くほど簡単に実装できます。

toLocaleString() の使い方

Number オブジェクトのメソッドである toLocaleString() を呼び出すだけで、ブラウザの言語設定（ロケール）に合わせたフォーマットに変換されます。

const price = 1234567;

// 基本的なカンマ区切り
const formatted = price.toLocaleString();

console.log(formatted);

実行結果

1,234,567

引数を省略すると、実行環境のデフォルトロケール（日本なら ja-JP）が適用されます。

日本やアメリカなど多くの地域では3桁区切りが一般的ですが、国によってはドット . で区切る場合もあります。

特定の形式を強制したい場合は、第一引数にロケールを指定します。

// 明示的に日本（ja-JP）を指定
console.log(price.toLocaleString('ja-JP')); // "1,234,567"

// ドイツ（de-DE）を指定（ドット区切りになる）
console.log(price.toLocaleString('de-DE')); // "1.234.567"

本格的なフォーマットなら Intl.NumberFormat を使おう

同じ設定で何度もフォーマットを行いたい場合や、より細かいオプションを指定したい場合は、Intl.NumberFormat オブジェクトを使用するのがベストプラクティスです。

パフォーマンス面でも優れており、現代のJavaScript開発ではこちらが主流になりつつあります。

基本的な書き方

const num = 1234567.89;

// フォーマッターを作成（オプションなし）
const formatter = new Intl.NumberFormat('ja-JP');

console.log(formatter.format(num));

実行結果

1,234,567.89

「通貨（円やドル）」の形式で表示する

金額を表示する場合、style: 'currency' オプションを指定することで、自動的に円記号 ¥ やドル $ を付与できます。

const price = 5000;

// 日本円形式
const jpyFormatter = new Intl.NumberFormat('ja-JP', {
  style: 'currency',
  currency: 'JPY'
});

console.log(jpyFormatter.format(price));

// 米ドル形式
const usdFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});

console.log(usdFormatter.format(price));

実行結果

￥5,000
$5,000.00

currency オプションには、ISO 4217 通貨コード（JPY, USD, EURなど）を指定します。

手動で “¥” + price と文字列結合するよりも、ロケールに応じた正しい記号位置（前か後ろか）や区切り文字を自動処理してくれるため、多言語対応サイトでも非常に強力です。

小数点の桁数を指定してフォーマットする

「小数点第2位まで表示したい」「整数部分だけにしたい」といった場合も、オプションで制御可能です。

最小・最大桁数の指定（minimumFractionDigits / maximumFractionDigits）

const num = 123.456;

const formatter = new Intl.NumberFormat('ja-JP', {
  minimumFractionDigits: 2, // 最小2桁（足りない場合は0埋め）
  maximumFractionDigits: 2  // 最大2桁（超える場合は四捨五入）
});

console.log(formatter.format(num));
console.log(formatter.format(100)); // 整数でも.00が付く

実行結果

123.46
100.00

123.456 は第3位が四捨五入されて 123.46 になりました。

また、100 は minimumFractionDigits: 2 の効果により、100.00 と表示されます。

価格表などで桁を揃えたい場合に便利です。

単位付きのフォーマット（パーセント・単位など）

数値を「%」表記にしたり、「メートル」などの単位を付けたりすることも可能です。

パーセント表示（style: ‘percent’）

数値を100倍して % を付けてくれます。

const rate = 0.1234;

const percentFormatter = new Intl.NumberFormat('ja-JP', {
  style: 'percent',
  maximumFractionDigits: 1 // 小数点第1位まで
});

console.log(percentFormatter.format(rate));

実行結果

12.3%

単位の表示（style: ‘unit’）

unit オプションを使うと、様々な単位をローカライズして表示できます。

const distance = 50;

const unitFormatter = new Intl.NumberFormat('ja-JP', {
  style: 'unit',
  unit: 'kilometer-per-hour'
});

console.log(unitFormatter.format(distance));

実行結果

50 km/h

単位は byte, celsius, kilometer, liter など多数サポートされています。

「0埋め（ゼロパディング）」をする方法

ID番号や日付などでよく使われる「001」「05」のような0埋め処理は、NumberFormat ではなく、文字列（String）のメソッドである padStart() を使うのが一般的です。

padStart() の使い方

const id = 5;

// 3桁になるように先頭を0で埋める
const formattedId = String(id).padStart(3, '0');

console.log(formattedId);

実行結果

005

まず String(id) で数値を文字列に変換します。

その後に .padStart(3, '0') を呼び出すことで、「全体の長さが3文字になるまで、先頭に ‘0’ を足す」という処理が行われます。

JavaScriptのスキルを活かして年収を上げる方法

以上、JavaScriptの数値のフォーマット方法について詳しく解説してきました。

なお、JavaScriptのスキルがある場合には、「副業で稼いで年収を上げる」といったことが可能です。

JavaScriptのスキルを持つ人は多いものの、その分案件数も多く、副業エージェントやフリーランスエージェントを利用することで予想外の高単価案件が見つかることもあります。

エージェントサービスは、登録も利用もすべて完全無料なので、どんな求人や案件があるのか気になる方は、気軽に利用してみるとよいでしょう。

スポンサーリンク