javascriptで数値にカンマを付ける時にtoLocaleStringを使っていたのですが、いろいろハマったので使い方や注意点をまとめます。

toLocaleStringの使い方

toLocaleStringはNumberオブジェクトの関数で、数値を指定したロケールの文字列に変換してくれる変数です。

基本的には数値に3桁おきにカンマを入れる時に使います。引数なしだとPCのロケールで変換されます。

let num = 12345.67
num.toLocaleString();
>> "12,345.67"

引数でロケールを指定すると、指定のロケールで変換されます。

num.toLocaleString('de-DE'); //ドイツの場合
>> "1.234,56"

オプションを指定して通貨表示などもできます。

num.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' })
>> "￥1,235"

整数や小数の有効桁数の指定もできます。

num.toLocaleString(undefined, { maximumSignificantDigits: 3 }); //整数の有効桁数
>> "1,230"

let num = 12345.6789
num.toLocaleString(undefined, { maximumFractionDigits: 3 }); //小数の有効桁数
>> "12,345.679"

注意点

toLocaleStringでカンマを付けた後に演算をするとNaNとなる

当たり前ですが、toLocaleStringで変換後は文字列になるため、これを数値として計算するとNaNとなります。（加算は正常に計算されましたが、積算がNaNとなる）

let a = 10000;
a * 2
>> 20000
a.toLocaleString() * 2
>> NaN

デフォルトでは小数が3桁で四捨五入されてしまう

オプションを指定しないと小数が3桁で四捨五入されてしまいます。

let num = 1234.56789;
num.toLocaleString();
>> "1,234.568"

四捨五入しないためには、オプションでmaximumFractionDigitsを多めに指定する必要があります。最大20まで指定できるため、20をしておくと良いでしょう。

let num = 1234.56789;
num.toLocaleString(undefined, { maximumFractionDigits: 20 });
>> "1,234.56789"