最近とあるWebサービスを作っていて、Javascriptで金額を扱う際にカンマ区切り用のtoLocaleString関数を使っていたのですが、処理が重いようなので独自に実装しました。

簡単に作成できるので備忘録も兼ねて載せておきます。

実装方法

以下をファイル内に追加し、関数を呼び出して実行しましょう！

function commaSeparated(num) {
  return String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
}

let price = 1000000;
let displayPrice = commaSeparated(price);
console.log(displayPrice); // 1,000,000

※浮動小数点数を扱う場合もカンマが入ってしまうので、少数点以下4桁以上表示する場合は注意してください。
本来は小数点以下の区切りを表現するのは空白のほうが良いみたいです。

多言語対応をしない限りは、toLocaleString関数は使わないほうがいい

理由はシンプルで、処理が遅いためです。

またちょっと調べるとQiitaの記事でSafariで使えないとなっているものが多いですが、safari 10から対応しているので現在は気にせず利用可能です。

詳細は「Number.prototype.toLocaleString() – JavaScript | MDN」を参照ください。

ただやっぱり処理が重いものを使う必要はないと思うので、正規表現を用いた関数を利用しましょう！

余談

Javascript上で浮動小数点数を扱う計算をする場合は誤差が発生するので要注意です。

できればサーバーサイド側で処理しましょう！