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

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

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 > 2018) { 
    wareki = "令和" + ( seireki - 2018 ) + "年";
} else if (seireki > 1925) {
    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() {

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

    if (seireki > 2018) { 
        wareki = "令和" + ( seireki - 2018 ) + "年";
    } else if (seireki > 1925) {
        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>

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

▲目次へ戻る