数字にカンマを付ける

赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名

戻る

実例

例文

<form name="form_comma">
<input type="text" name="f_input" value="1234567890">
<input type="button" value="→" onClick="number_format()">
<input type="text" name="f_output">
</form>

<script type="text/javascript">
//フォームから数値を取得
function number_format()
	var str = document.form_comma.f_input.value; //*1
	document.form_comma.f_output.value = getComma(str); //*2
}

//数字にカンマを付ける
function getComma(num) {
	num = new String(num).replace(/,/g, ""); //一旦カンマを削除（*3）
	while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); //3桁毎にカンマを挿入（*4）
	return num;
}
</script>

解説

左のフィールドに数字を入れて、→ボタンを押すとユーザー変数number_format()が呼び出されます。

(*1)では、左のフィールドから数字を取り出しています。
(*2)はユーザー関数getCmmaを呼び出し、結果を右のフィールドへ出力します。

(*3)ユーザースクリプトでは、まず「,」を「」に置き換える（replace）ことで一旦カンマを取り除いて文字列化しています。
(*4)その次に正規表現を使って3文字毎に取り出してカンマを挿入しています。
(*5)最後に値を返しています。

ここではユーザー関数が２つに別れています。number_format()はボタンを押したことに対応し、次の処理への橋渡しを行っています。今回のようにフォームに対応した個別の処理を取り扱います。
次のgetCommna()は、再利用時を考えて独立しています。フォームを使わずに利用したり、別のスクリプトからも利用が可能です。（「小数点以下を揃える」の応用を参照）

戻る