はじめに
「JavaScriptは、動的型付け言語である」
これは今では広く知られている言葉のひとつです。
今回は、動的型付けが意図せず働くところと
その対処法を記載してみます。
※今時そんな使い方しないけど！！！というツッコミはご勘弁を…
使用するコード
何の捻りもない、シンプルなものです。
１番目のvalue属性には「10」
２番目のvalue属性には「5」を入れています。
見た目には数値に見えますが、型を調べてみると string になっていますね。
Stringで計算しようものなら、他言語であれば怒られたりしますが
安心してください。JavaScriptさんは寛大なので怒りません。
test.html
<html>
<body>
<div>
１番目<input type="text" id="calc1" value=10>
</div>
<div>
２番目<input type="text" id="calc2" value=5>
</div>
</body>
<script>
// １番目の要素を取得
let calc1 = document.getElementById('calc1').value;
console.log('１番目の値は:' + calc1);
console.log('１番目の型は:' + typeof(calc1));
// ２番目の要素を取得
let calc2 = document.getElementById('calc2').value;
console.log('２番目の値は:' + calc2);
console.log('２番目の型は:' + typeof(calc2));
// 引き算
console.log(calc1 - calc2);
// 割り算
console.log(calc1 / calc2);
// 掛け算
console.log(calc1 * calc2);
// 足し算
console.log(calc1 + calc2);
</script>
</html>
表示結果
Consoleに表示されている５行目のものは、上から
「10と5の」引き算、割り算、掛け算、足し算 です。
足し算だけ、様子がおかしいですね。
そうなってしまう理由
本来、文字(string)の引き算や掛け算は、出来るようになっていません。
ですが、冒頭に記述したようにJavaScriptは動的型付け言語です。
エンジニアの目に見えないところでは以下のような事が起こっています。
-掛け算の場合-
JavaScriptさん「文字の掛け算キタコレ…ハッ!!一瞬数値に変換して計算すればイイのでは??」
-足し算の場合-
JavaScriptさん「文字の連結！！」
対処法
結論からになりますが「計算の対象になっている値を数値に変換する」これだけです。Number()やparseInt()を利用する事で、数値に変換する事が可能です。
test.html
<html>
<body>
<div>
１番目<input type="text" id="calc1" value=10>
</div>
<div>
２番目<input type="text" id="calc2" value=5>
</div>
</body>
<script>
// １番目の要素を取得（parseInt使用）
var calc1 = parseInt(document.getElementById('calc1').value);
console.log('１番目の値は:' + calc1);
console.log('１番目の型は:' + typeof(calc1));
// ２番目の要素を取得（parseInt使用）
var calc2 = parseInt(document.getElementById('calc2').value);
console.log('２番目の値は:' + calc2);
console.log('２番目の型は:' + typeof(calc2));
// 引き算
console.log(calc1 - calc2);
// 割り算
console.log(calc1 / calc2);
// 掛け算
console.log(calc1 * calc2);
// 足し算
console.log(calc1 + calc2);
</script>
</html>
型がNumberになり、イイ感じに足し算もしてくれていますね。
皆さん、良いエンジニアライフを。