四則演算の足し算の方法

Question

前提・実現したいこと

JavaScriptを勉強していて、
promptメソッドを使ってユーザーに数字を打たせて、その数字の足し算を返したいと思っています。

発生している問題・エラーメッセージ

下記のように掛け算にした場合は、結果がしっかり帰ってくるのですが

window.alert(num1*num2)

足し算にした場合、「３」と「２」と打つと「３２」と文字列で帰ってきてしまいます。

window.alert(num1 + num2)

該当のソースコード

<script>
    var num1 = prompt('数字を入力してください');
    var num2 = prompt('数字を入力してください');
    window.alert(num1 + num2);
</script>

何か問題のところありますでしょうか？

よろしくお願いいたします。

Answer 1

JavaScriptに於ける+は、
左辺と右辺がどちらも数値であれば数値の加算として扱いますが、
左辺がString型の場合は文字列の結合として動作します。

promptのようにユーザーが文字列を任意に実行出来るものであれば、
基本的にString型(文字列)になっているはずです。
window.prompt - MDN

確認した所案の定String型を返す作りになっていることが確認出来ます。
なので3と2を入力すれば"32"という文字列の結果になります。

どうすればええねん。

明示的に数値型に変換しましょう。
文字列を整数として数値に変換するにはparseIntを利用します。

    var num1 = parseInt(prompt('数字を入力してください'));
    var num2 = parseInt(prompt('数字を入力してください'));
    window.alert(num1 + num2);

じゃあなんで*は意図通りに動くの？

*は文字列連結としては使えないからです。
なので「どうしよう」と困ったJavaScriptは、文字列を数値に変換しようと試みます。

この文字列から数値への変換を試みるというのは、仕様書でToNumberとして定義されています。
調べてみたらこの記事が詳しいのでリンクを貼り付けます、興味があれば調査してみてください。
JavaScriptで数値への変換あれこれ - Qiita

Answer 2

promptメソッドからは文字列が返ってくるため整数に変換してください。

<script>
    var num1 = prompt('数字を入力してください');
    var num2 = prompt('数字を入力してください');
    window.alert(parseInt(num1) + parseInt(num2));
</script>

Comments

[gnx_vw903]

ありがとうございます、解決できました！

Answer 3

文字列結合になってますねー
整数同士の演算にしましょー

<script>
    var num1 = parseInt(prompt('数字を入力してください'));
    var num2 = parseInt(prompt('数字を入力してください'));
    window.alert(num1 + num2);
</script>

Comments

[gnx_vw903]

ありがとございます！解決できました！