数値に3桁カンマを入れる

2023年3月6日

JavaScriptで数値に3桁カンマを入れる関数について簡単にまとめました。

はじめに
- toLocaleString() の使い方

はじめに

数値に3桁カンマを入れるには「toLocaleString()」を使用します。

toLocaleString() の使い方

let num = 12345;
console.log(num.toLocaleString());
// 12,345

戻り値

3桁カンマが入った数値

文字列の場合は数値に変更する

3桁カンマを入れる数字が文字列の場合は、数値に変換します。

let num = 12345;
console.log(Number(num).toLocaleString());
// 12,345

小数点以下も含む表示は注意

小数点以下の表示も行う場合、小数第四位以下は切り捨てられてしまいます。

let num = 12345.67898765;
console.log(num.toLocaleString());
// 12,345.679　※少数第四位以下が切り捨てられる

そのため、切り捨てを回避するためには.toLocaleString()に引数を記載します。

let num = 12345.67898765;
console.log(num.toLocaleString( undefined, { maximumFractionDigits: 20 } ));
// 12,345.67898765　※少数桁は最大20個まで表示される

// 例）表示少数桁を最大4に指定した場合
console.log(num.toLocaleString( undefined, { maximumFractionDigits: 4 } ));
// 12,345.679　※表示される少数桁は3つ

小数点以下の最大表示値を指定

maximumFractionDigitsは小数点以下の最大表示を 0~20 間で指定できます。