ITコラム

JavaScript

2017.12.19

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

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() で使用しています。

▲目次へ戻る