JavaScriptで数字を3桁カンマ区切りに変換する方法

JavaScriptで数字を3桁のカンマ区切りに変換する方法をご紹介いたします。

変換元が数値/文字列だった場合のそれぞれの変換方法と小数点以下がある場合についても解説いたします。

JavaScriptで数字を3桁カンマ区切りに変換する方法

数値(int型)の場合

変換元の値が数値の場合は、以下のように記述します。

var num = 123456;
var num_comma = num.toLocaleString();
console.log(num_comma); //123,456

numという変数に入っている「123456」をカンマ区切りにして、num_commaという変数に代入しています。

これにより、num_commaの値は「123,456」というようにカンマ区切りになります。

文字列(String型)の場合

変換元の値が文字列になっている場合は、以下のように一旦数値に変換してからカンマ区切りにします。

var num = '123456';
var num_comma = Number(num).toLocaleString();
console.log(num_comma); //123,456

numにはString型の「123456」が入っているので、Number(num)で数値に変換したうえでtoLocaleString()でカンマ区切りにしています。

小数点以下がある場合

小数点以下がある場合、toLocaleString()でカンマ区切りにすると、小数第四位以下は切り捨てられてしまいます。

例えば「123456.789123456」をtoLocaleString()でカンマ区切りにすると、「123456.789」が返ってきます。

切り捨てを防ぎたい場合は、以下のように記述します。

var num = 123456.789123456;
var num_comma = num.toLocaleString( undefined, { maximumFractionDigits: 20 });
console.log(num_comma); //123,456.789123456

maximumFractionDigitsは小数桁の最大値で、0～20を指定できます。上記の場合、最大で小数第二十位までは切り捨てられないということですね。

あとがき

一口に数字をカンマ区切りにするといっても、条件によって考慮すべきことが結構ありますね。

CMSやECサイト等で、渡された数字をカンマ区切りに変換してから表示したい時は、ぜひ参考にしていただければと思います。