[Javascript] 3桁区切りが簡単に表現できる"toLocaleString"

2019年7月24日

Javascript テクノロジー プログラミング

ビジネスアプリケーションを作る時に欠かせないのが、データ集計とレポーティング画面です。 これまで僕が手がけてきたWEBアプリケーションサービスでB2Bに関するものは、徹底的にレポーティングを行う機能を設置してきました。 これにはいくつか理由がありますが、一番大きな理由としては、ユーザーに数値としての費用対効果を実感してもらうという意味合いが大きいです。

数値は3桁で区切るのが通常

GoogleAnslyticsを想像すると、どういった数値やグラフがいいかはそこに答えがあることが多いので、ここではレポーティングについての講釈は垂れませんが、ビジネスアプリやレポーティングツールにおいてそこで使われる数値には3桁で数値を区切ると非常に見やすくなるという特徴があります。 1000000円と書いてあるのと、1,000,000円と書いてあるのでは、見慣れている人は3桁区切りを数値を見ただけで100万円という風に分かりやすいのですが、カンマで区切られていないと"0"の数を数えなければいけないので非常にストレスです。 余談ですが、万という単位を採用しているのは日本だけで、これが海外との数値理解の差が生まれていることを理解しておきましょう。 ミリオンヒットと日本でもいいますが、CD販売が100万枚を突破した際に使われますが、100万がなんで切りの良い数値かというと、世間的な売上規模のボーダーラインという考え方もありますが、0が3の倍数である1,000,000という値が、一つの指標にしやすいポイントなのだと考えられます。 仮に日本の人口が10倍ぐらいだったとしたら、もしかすると10,000,000というボーダーラインは、あまり気持ちのいいボーダーラインにならないために、売り上げ数値や、他の何かの指標になっていたかもしれませんね。 ※あくまで僕の仮設ですが・・・ ちなみに、ビリオンは、1,000,000,000で、10億、トリリオンは、1,000,000,000,000で1兆という値ですが、どれも3桁区切りの切りの良い値になっていることに気が付きます。 日本の万、億という値は、日本人にはキリがいいかもしれませんが、海外の人が見ると、気持ち悪い数字なのです。 この考え方って、パソコンなどで使われているメモリの値、KB,MB,GB,TB,PB...という場合も3桁毎に値が繰り上がっているのと似ています。 ※正確には1024の倍数ですが・・・ 要するに3桁区切りは人間の本能的に分かりやすい数値という事なんです。

PHPのnumber_format

WEBアプリケーションの場合に、PHPであればnumber_format関数を使うだけで、手軽に3桁表示が実現できます。 javascriptでは、これまで、独自関数で数値を文字列にして3桁にして、カンマを付け加えるというやり方をしていましたが、"toLocaleString"という関数があることを最近知りました・・・(心の声:「早く言ってよ〜〜〜」) Can I useで調べてみると、IE6から使える関数であることが分かりました・・・。 ちゃんとリファレンスを読まないといけませんね〜。

toLocaleString

使い方は極めて簡単で、数値に対して、 toLocaleString()関数をプロパティとして実行するだけです。 Number(200000).toLocaleString(); > 200,000 文字列の数字に対しては何も変換できずに、数値にしなければいけないので、その点に注意しましょう。 返り値は文字列になるので、3桁区切りされた数字をtoLocaleString()しても、同じ文字列が返るだけになります。 また、速度が遅いとして、下記のように正規表現で置換するほうが早いという他サイト記事もあったので、合わせてご紹介。 "20000".replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,'); > 20,000 https://qiita.com/jkr_2255/items/d53200e6001b4d28e8f7 どの方法を使うかは、プログラマー次第・・・という事で。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。