備忘録的プログラミングリファレンス

数値の書式について

 このページでは、数の書式 右寄せ3桁ごとのカンマの付加、数値の桁合わせについてを解説します。

 右寄せ数値の桁合わせは CSS を利用します。右寄せは、CSS の text-align: right; を指定し、数値の桁合わせはフォントを等幅フォントに指定します。

 3桁ごとのカンマは、金額の表示に利用されることが多いのですが、HTML のみでは3桁区切りで数値を表示するという機能はないようです。
 3桁ごとのカンマといった表記するためには CSS 、JavaScript を使用して入力があったら表示を変更するように組み込まなければなりません。
 ただし、サーバーにデータを送る際に問題が発生します。詳しくは以下の3桁ごとのカンマの表示のおける注意点を参照してください。

- ad -

3桁ごとのカンマの表示のおける注意点

 <input type="number"> で数値入力ができるのですが、やはりそのままでは、 カンマ,で3桁ごとの区切りは表示されませんし、表示できるようにもなりません。
 JavaScript で3桁ごとにカンマが入るように数値データをテキストに変えると、サーバーにデータを送信する際に問題が起こります。

 3桁ごとのカンマといった表記するためには CSS 、JavaScript を使用して入力があったら表示を変更するように組み込まなければなりません。
 もし、<input> で3桁区切りを表示するには、<input type="text"> で、JavaScript を利用します。

 ただし、数値を3桁区切りのテキストではサーバーにそのまま送信できません。再度数値に戻す必要があります。
 ユーザーが入力した内容を変更する処理は好ましくありません。なるべくなら、数値で入力されたものは数値としてサーバーに送るようにしたほうが賢明です。
 入力フォームでは数値は数値のままで入力してもらい(右寄せはできます)、表示の段階で3桁区切りにするといった処理の方が無難です。
 そのことに注意して以下の解説をお読みください。

右寄せ

 CSS、スタイルシートで設定する方法です。text-align: right;を指定します。

text-align: right;
text-align: right;

 詳しくはtext-alignプロパティページを参照して下さい。

カンマを付加

JavaScript

 JavaScriptで数値または文字列をカンマを付加したものに置き換える方法です。toLocaleString()関数を使います。

 toLocaleString() 関数は数値、日付などをローカル表記に変更してくれる関数です。国を指定しなければ、数値は3桁ごとにカンマを加えます。

toLocaleString()
var num=123456789;
var txt_num = num.toLocaleString();
..
txt_num は  になります

 ただし、この方法では小数点以下で丸め込み処理が起きます。もし丸められたくない場合は、maximumFractionDigits オプションを利用します。

maximumFractionDigits オプション
var num=123456789.123456789;
var txt_num = num.toLocaleString( undefined, { maximumFractionDigits: 10 });
..
txt_num は  になります

 maximumFractionDigits オプションの指定値は丸め込みが起きない桁数です。

XSLT

XSLTでの方法です。3桁ごとにカンマを付加します。

XSLT
<xsl:value-of select="format-number(debit-amount,'###,##0')" />

数値の桁合わせ

 数値の桁を合わせるためには、CSS でフォントを等幅フォントにします。

 等幅フォントは、以下のようにフォントファミリーで monospace に指定します。

等幅フォント
font-family: monospace;

  monospace ではフォントの形が気に入らないかもしれません。他のフォントを表示したい場合は以下のようにフォントファミリーを指定します。

等幅フォント
font-family: "Courier New","Monaco","Osaka-Mono","Consolas",monospace;

 指定されたフォントファミリーは利用できる状態なら、そのフォントが利用されます。指定されたフォントファミリーを先頭から利用できるかが検証されます。
 一番先頭から順に使用したいフォントファミリーを指定します。

 フォントファミリーについて詳しくはfont-family プロパティを参照してください。

- ad -