JavaScript【 parseInt 】 ～ 文字列を数値に変換

parseInt は、文字列を数値に変換する関数です。JavaScript では、変数に数値を代入するだけで、その変数を数値型として使用することができますが、文字列から数値への型変換が必要な場面もあります。
今回は、parseInt 関数を使用して、文字列から数値へ型変換を行う方法について紹介します。

目次

　
1. parseInt 関数
2. 西暦を和暦に変換

1. parseInt 関数

　
parseInt 関数は、文字列を整数に変換する関数です。

次のように記述して、使用します。

parseInt( 文字列, 基数 );

第1引数として指定する文字列が、第2引数として指定する基数（ 数学的記数法の底 ）に基づいた整数に変換されます。

第1引数が文字列でない場合は、暗黙的に文字列への変換が行われます。
第1引数に指定した値の始まりが空白文字の場合、空白文字は無視されます。

第2引数の基数は、2 から 16 までの整数で指定します。
一般に使われる10進法の数値に変換する場合は、10 を指定します。
第2引数は指定を省略することが可能ですが、確実に意図した結果を得るためには、指定した方が良いです。

正常に変換処理が行われると、整数値が返ります。

最初の文字を数値に変換できない場合は、NaN が返されます。
　
　
parseInt 関数を使用して、文字列から数値への変換をします。
変換ボタンをクリックしてみて下さい。

　
基数を指定しない場合、基本的には 10進数の数値に変換されます。

「 0x 」または「 0X 」で始まる文字列を指定して、基数を指定しない場合は、基数が 16 として判断され、16進数の数値に変換されます。
　

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

<script type="text/javascript">
<!--
function disp() {
    document.getElementById("dat").value = parseInt("11", 2);
}
function disp2() {
    document.getElementById("dat2").value = parseInt("11", 8);
}
function disp3() {
    document.getElementById("dat3").value = parseInt("11", 10);
}
function disp4() {
    document.getElementById("dat4").value = parseInt("11", 16);
}
function disp5() {
    document.getElementById("dat5").value = parseInt("11");
}
function disp6() {
    document.getElementById("dat6").value = parseInt("0x11");
}
function disp7() {
    document.getElementById("dat7").value = parseInt("am11", 10);
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px 20px 10px;">
    <div style="display:inline-flex; flex-wrap:wrap; align-items: center;">
        <nobr style="width:290px;">parseInt("11", 2)</nobr>　
        <input type="button" value="変換" onClick="disp()">　　
        <input type="text" id="dat" size="7">　
    </div>
    <div style="display:inline-flex; flex-wrap:wrap; align-items: center;">
        <nobr style="width:290px;">parseInt("11", 8)</nobr>　
        <input type="button" value="変換" onClick="disp2()">　　
        <input type="text" id="dat2" size="7">　
    </div>
    <div style="display:inline-flex; flex-wrap:wrap; align-items: center;">
        <nobr style="width:290px;">parseInt("11", 10)</nobr>　
        <input type="button" value="変換" onClick="disp3()">　　
        <input type="text" id="dat3" size="7">　
    </div>
    <div style="display:inline-flex; flex-wrap:wrap; align-items: center;">
        <nobr style="width:290px;">parseInt("11", 16)</nobr>　
        <input type="button" value="変換" onClick="disp4()">　　
        <input type="text" id="dat4" size="7">　
    </div>
    <div style="display:inline-flex; flex-wrap:wrap; align-items: center;">
        <nobr style="width:290px;">parseInt("11")</nobr>　
        <input type="button" value="変換" onClick="disp5()">　　
        <input type="text" id="dat5" size="7">　
    </div>
    <div style="display:inline-flex; flex-wrap:wrap; align-items: center;">
        <nobr style="width:290px;">parseInt("0x11")</nobr>　
        <input type="button" value="変換" onClick="disp6()">　　
        <input type="text" id="dat6" size="7">　
    </div>
    <div style="display:inline-flex; flex-wrap:wrap; align-items: center;">
        <nobr style="width:290px;">parseInt("am11", 10)</nobr>　
        <input type="button" value="変換" onClick="disp7()">　　
        <input type="text" id="dat7" size="7">　
    </div>
</div>

▲目次へ戻る

2. 西暦を和暦に変換

　
西暦で入力された値を 和暦に変換するプログラムを作ってみます。

画面から入力された値は、プログラム側では文字列として扱われるため、入力値を使用して計算を行う時などは、数値へ変換する必要があります。

西暦から和暦に変換する際には、元となる西暦の年数から各年号の「 元年から 1 引いた年 」を引いて求めます。
各年号の「 元年から 1 引いた年 」は次の通りです。

　
次のように、入力された西暦が どの範囲の年かを判定することで、和暦に変換することができます。

if (seireki > 1988) { 
    wareki = "平成" + ( seireki - 1988 ) + "年";
} else if (seireki > 1925) {
    wareki = "昭和" + ( seireki - 1925 ) + "年";
} else if (seireki > 1911) {
    wareki = "大正" + ( seireki - 1911 ) + "年";
} else if (seireki > 1867) {
    wareki = "明治" + ( seireki - 1867 ) + "年";
}

　
実際に西暦を入力して、変換ボタンをクリックしてみて下さい。

　
ソースコードは次の通りです。

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

    var seireki = parseInt(document.getElementById("dat").value, 10);

    if (seireki > 1988) { 
        wareki = "平成" + ( seireki - 1988 ) + "年";
    } else if (seireki > 1925) {
        wareki = "昭和" + ( seireki - 1925 ) + "年";
    } else if (seireki > 1911) {
        wareki = "大正" + ( seireki - 1911 ) + "年";
    } else if (seireki > 1867) {
        wareki = "明治" + ( seireki - 1867 ) + "年";
    }

    document.getElementById("dat2").value = wareki;
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px 20px 1px;">
    <form>
        <div style="display:inline-flex; align-items: center;">
            <input type="text" id="dat" placeholder="西暦を入力下さい">年　　
            <input type="button" value="変換" onClick="disp()">　　
            <input type="text" id="dat2" placeholder="和暦を表示します">
        </div>
    </form>
</div>

尚、文字列を数値演算すると 暗黙的に文字列が数値に型変換される場合がありますが、文字列を含む加算の際に「 + 」が連結演算子として処理されるため、明示的に型変換を行った方が、確実に意図した結果を得ることができます。

▲目次へ戻る