Javascriptで数値をカンマ区切りにして表示する方法

最近とある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上で浮動小数点数を扱う計算をする場合は誤差が発生するので要注意です。

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

About Me

プロフィール画像

ユーキと申します。北海道恵庭市という札幌と新千歳空港の間でフリーランスのWebエンジニアとして活動してます。

当サイトのブログでは、主にWeb制作全般、フリーランス周りの情報など色々なノウハウや知識を載せています。
その他日々気になったこと、思ったことも書いてます。

お仕事の相談など何かありましたら、お問い合わせかツイッターのDMからお気軽にご連絡くださいませ。

お問い合わせはこちら

ツイッターはこちら

ポートフォリオはこちら

Latest Posts

Popular Posts

TOP