JavaScript で数値を3桁カンマ区切りにする方法

2016/12/16 ,

桁数の多い金額入力項目等、テキスト欄に数値を入れてフォーカスが外れたタイミングで見やすいようにカンマ区切り表示をして欲しいといった要望が時々あります。データ登録をする際にはカンマを外さなければいけない、エラーで戻して再描画する時もカンマを加えなくてはいけないと、後続処理の手続きが面倒ではありますが、画面の見やすさ機能の使い勝手を考えると欠かせない機能の一つであるため、今回は数値データを3桁カンマ区切りにする方法を紹介します。

toLocaleString は最も簡単にカンマ区切りにできる?

なお、最も簡単な方法として Number.prototype.toLocaleString() を紹介しているケースがありますが、これは小数を含むと途中で繰り上げられてしまうこともあるので以下の紹介では利用しません。そもそも toLocaleString はロケールに応じて適切に変換するためのものなので、3桁カンマ区切りを目的として利用するのは望ましくありません。

数値を3桁カンマ区切りにする

入力ルールが決まっていて、ユーザーがそれに従ってきちんと入力してくれるのであれば、とてもシンプルなソースコードになります。しかし、そうは言っても「え?そんな入力しちゃうの?!」と思わず口にしてしまうような入力をするエンドユーザーが多いので、かなりの入力パターンを許容できる方法で実装してみます。

呼出し方をこのようにしているのは関数を汎用的に利用するためです。blue イベント時のみ利用するのであれば、エレメントを引数に渡す(this を渡すだけ)ように改修すればシンプルな呼出し方になります。

L.13 に登場する toHalfWidth は以前紹介した全角英数記号を半角に変換するオリジナル関数です。汎用性の高い関数ですので、参考いただけたらと思います。もし全角入力を許容しないよう制御するのであれば、toHalfWidth(numVal) の部分は numVal.toString() としてしまって良いです。

この変換関数で入力が許容され、変換が行われる数字のパターンは次の通りです。出来る限り多くの入力パターンに対応できるようにしてあります。また全て半角へ変換した上で返却を行います。

  • 全角数値 : -12345678.77777
  • カンマつき数値 : 1,234,567,890.98765
  • ゼロ埋め数値 : -0000012345.678
  • プラス符号付き数値 : +1122334455
  • 前後のスペース

それでは処理の流れを説明します。

  1. 空の場合そのまま返却
    こちらは特に説明不要ですので割愛します。
  2. 全角から半角へ変換し、既にカンマが入力されていたら事前に削除
    全角の数値・符号・カンマの入力を許容します。全角で入力しても半角に変換して欲しい要望が多いため取り入れています。またカンマ入力してしまう習慣のある方も稀にいますので、半角に変換した後に取り除いてしまいます。

    その後、trim 処理を掛けて前後のスペースを取り除きます。これまで trim 関数が利用できなかった IE8 のサポートが切れたので、この方法でトリミングを行います。

  3. 数値でなければそのまま返却
    ここでようやく数値判定を行います。頭がゼロ埋めされた数値 00012345 も許容範囲内です。また符号はマイナスだけでなくプラスも許容しています。

    頭のゼロ埋めとプラス記号については、次の処理取り除きます。

  4. 整数部分と小数部分に分割
    整数部分のみカンマ区切りの処理を施すため split で分割しておきます。
  5. 整数部分を3桁カンマ区切りへ
    ここで改めて Number 関数を噛ませています。これは前項に記した頭のゼロ埋めとプラス記号を除去するための処理です。故に改めて String 変換し、正規表現による replace 処理でカンマを加えるようにしました。
  6. 小数部分と結合して返却
    分割した整数部分と小数部分を結合して返却します。小数部分の情報が無い場合は、ピリオドは出力されないので安心してください。

ではこの関数の動作を確認してみましょう。

数値3桁カンマ区切り関数サンプル

フォーカスが外れたタイミング(onBlur イベント)でカンマ区切りを行うようにしています。これだけでは、再入力時にカンマが邪魔になるので、フォーカスイベントでテキストボックスのカンマを取り除く処理を入れてあげると良いでしょう。

以下のテキストボックスには、カンマ区切りとカンマ除外の処理が組み込まれています。

カンマを取り除く処理は、onFocus イベントで次の関数を指定すれば除外することができます。カンマ追加と同様にテキストボックスへ以下のイベント処理を組み込んでください。

呼出し方「onFocus = “this.value = delFigure(this.value);”

PAGE TOP ↑