数値に桁区切りのカンマを入れるシーンは多いのではないでしょうか。以前は文字列操作でカンマを入れるコードを書いていましたが、今は一発でカンマを挿入できるようになりました。toLocaleString() または Intl.NumberFormat を使います。
toLocaleString()
toLocaleString() の第一引数にはロケールを指定しますが、日本語の場合は ja-JP を指定します。
const num = 1234567;
console.log(num.toLocaleString('ja-JP')); // "1,234,567"
このような数値の整形は国によって違います。例えば、フランスではスペースで区切ります。
const num = 1234567;
console.log(num.toLocaleString('fr-FR')); // "1 234 567"
Intl.NumberFormat
Intl.NumberFormat もできることは前述の toLocaleString() と同じですが、若干、使い方が違います。コストラクタからインスタンスを生成し、その format() メソッドを呼び出します。
console.log((new Intl.NumberFormat('ja-JP')).format(1234567)); // "1,234,567"
パフォーマンス
たくさんの数を整形する場合は、Intl.NumberFormat オブジェクトを生成して formatを使うのが良いとされています。実際には、どれほどパフォーマンスの違いがあるのかを試しました。10 万回処理を行った場合の処理時間を測りました：
console.time('Intl.NumberFormat');
const formatter = new Intl.NumberFormat('ja-JP');
for(let i=0; i<100000; i++) {
let str = formatter.format(i);
}
console.timeLog('Intl.NumberFormat');
console.time('toLocaleString');
for(let i=0; i<100000; i++) {
let str = i.toLocaleString('ja-JP');
}
console.timeLog('toLocaleString');
Chrome での結果は次の通りでした：
Intl.NumberFormat: 69.10498046875 ms
index.html:26 toLocaleString: 64.2490234375 ms
全くと言っていいほど違いはありませんでした。しかし Firefox だと事情が違います：
Intl.NumberFormat: 63ms
toLocaleString: 2587ms
圧倒的に Intl.NumberFormat のほうが速いですね。正確に言えば、Firefox の toLocaleString が Chrome と比べて圧倒的に遅いとも言えますね。恐らくこの違いが表れるシーンはあまり考えにくいですが、それなりの回数だけ処理を行う予定があるなら、Intl.NumberFormat を使うほうが良さそうです。
