JavaScript【 サンプル 】3 ～ 数字関連の記述方法

JavaScript の記述方法のサンプルを挙げてみます。
今回は、JavaScript の 数字関連の記述方法についてのサンプルを紹介します。

目次

　
１．カンマ区切りにする
２．小数点以下の桁数を指定する
３．ゼロ埋めをする

１．カンマ区切りにする

　
このサンプルは、数値をカンマ区切りにするサンプルです。
数字を入力して 変換ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
<!--
function disp() {

    //カンマ区切りに変換
    document.getElementById("outNum").value = getNum(document.getElementById("inNum").value);
}

function getNum(num) {

    //3桁毎にカンマを挿入
    while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
    return num;
}
//-->
</script>

<div style="background-color : #CCC;">
    <input type="text" id="inNum" placeholder="数字を入力して下さい。">
    <input type="button" value="変換" onClick="disp()">
    <input type="text" id="outNum" placeholder="カンマ区切りで表示されます。">　</div>

　
3 桁毎にカンマを挿入する関数 getNum(num) を作成して、ボタンクリック時に呼び出される関数 disp() で使用しています。

正規表現については、正規表現をご参照下さい。

▲目次へ戻る

２．小数点以下の桁数を指定する

　
このサンプルは、小数点以下の桁数を指定された通りに表示するサンプルです。
数字を入力して 変換ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
<!--
function disp() {

    var num1 = document.getElementById("inNum1").value;
    var num2 = document.getElementById("inNum2").value;

    document.getElementById("outNum").value = getNum(num1, num2);
}

//小数点以下の桁数を揃える
function getNum(num1,num2) {

    //整数の場合、小数点を付ける
    if (num1.indexOf(".") < 0) num1 += ".";

    //整数部と小数部を分割
    var s = num1.split(".");

    //指定桁数に足りない場合、0 で埋める
    s[1] = s[1] + makeNum("0",num2);

    //小数点以下の桁数を揃える
    return s[0] + "." + s[1].substr(0,num2);
}

//指定桁数まで指定文字で埋める
function makeNum(c,num) {
    var t,n;
    t = "";
    for (n=0;n<num;n++) {
        t += c;
    }
    return t;
}
//-->
</script>

<div style="background-color : #CCC;">
    小数<input type="text" id="inNum1" placeholder="小数を入力して下さい。">
    小数点以下の桁数<input type="text" id="inNum2" placeholder="桁数を入力して下さい。">
    <input type="button" value="変換" onClick="disp()">　　
　
    <input type="text" id="outNum" placeholder="指定された小数点以下の桁数で表示されます。">　　
</div>

　
小数点以下の桁数を揃える関数 getNum(num1,num2) を作成して、ボタンクリック時に呼び出される関数 disp() で使用しています。

また、指定桁数まで指定文字で埋める関数 makeNum(s,num) も作成して、getNum(num1,num2) 内で 0 埋めに使用しています。

▲目次へ戻る

３．ゼロ埋めをする

　
このサンプルは、指定された桁数になるように 数字の左側からゼロ埋めをするサンプルです。
数字を入力して 変換ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
<!--
function disp() {

    var num1 = document.getElementById("inNum1").value;
    var num2 = document.getElementById("inNum2").value;

    document.getElementById("outNum").value = getNum(num1, num2);
}

//ゼロ埋めをする
function getNum(num1,num2) {

    var n,m,s;

    //数値のままではlengthが使えないため、数値を文字列化する
    if (isNaN(num1)) {
        s = num1;
    } else {
        s = num1.toString(); //
    }

    //足りない桁数分の0を加える
    m = num2 - s.length;
    for (n=0;n<m;n++) {
        s = "0" + s;
    }

    return s;
}
//-->
</script>

<div style="background-color : #CCC;">
    数字<input type="text" id="inNum1" placeholder="下で指定する桁数より小さい桁数の数字を入力して下さい。">
    桁数<input type="text" id="inNum2" placeholder="桁数を入力して下さい。">
    <input type="button" value="変換" onClick="disp()">　　
　
    <input type="text" id="outNum" placeholder="指定された桁数までゼロ埋めして表示されます。">　　
</div>

　
ゼロ埋めをする関数 getNum(num1,num2) を作成して、ボタンクリック時に呼び出される関数 disp() で使用しています。

▲目次へ戻る