JavaScript 文字列を数値に変換する

最終更新日

文字列で表現されている文字を数値に変換する、数値の単位を削除する方法について解説。文字を数値に変換する場合は、「parseInt()」メソッドや「parseFloat()」メソッドを使います。

JavaScriptでは変数に代入されている内容が数字を示していても、それが文字列型の場合は通常の算術演算が行われません。たとえば、変数「n」に「”12″」という文字型で表現されている数値がある場合は、「+」記号を使って「3」を加算すると「15」ではなく「123」となります。これは文字列同士の結合になってしまっているためです。このような場合は、文字列型の数値を数値型に変換する必要があります。「parseInt()」メソッドは整数値に、「parseFloat()」メソッドは小数値まで含めて変換した結果を数値型として返します。また、CSSのプロパティを読みだしたさいに「320px」のように単位が付いてる場合があります。座標値を読みだして演算したい場合には、この単位が邪魔になることがあります。そこで、「parseInt()」メソッドや「parseFloat()」メソッドを使えば、この単位を削除することができます。

<body>
            <script>
                window.addEventListener("load" , function(){
                    var ele = document.getElementsByTagName("output")[0];
                    
                    var data1 = "1969.215";     //変数に小数値を文字列として代入
                    var data2 = "320.25px";     //変数に単位付きの値を文字列型として代入
                    var n1 = parseInt(data1);
                    n1 = n1+1;

                    var n2 = parseFloat(data1);
                    n2 = n2+1;

                    var n3 = parseInt(data2);
                    n3 = n3+1;

                    var n4 = parseFloat(data2);
                    n4 = n4+1;
                    ele.innerHTML = n1+"<br>"+n2+"<br>"+n3+"<br>"+n4;
            
            
                }, false);
            </script>
                <output></output>
            </body>
実行結果
実行結果