【JQuery】数値と文字列の計算（特に足し算に関して）[JavaScript]

2023年10月11日2023年11月18日

URLをコピーしました！

JavaScript

前回、Pythonの軽量ウェブフレームワークFlaskをローカル環境、サーバー環境（Xserver）で動かす方法を紹介しました。

あわせて読みたい

【Flask】軽量ウェブフレームワークFlaskをローカル環境、サーバー環境（Xserver）で動かす方法[Python] 【Flask】前回、Pythonでのmatplotlibのtight_layoutの挙動を確認した結果を紹介しました。今回はPythonの軽量ウェブフレームワークであるFlaskをローカル環境、サー…

今回は少しJavaScriptの話題で、数値と文字列の計算（特に足し算）に関して紹介します。

何故かというとPythonでも文字列としての数字の足し算（文字列の結合）と数値としての足し算が異なることから、JavaScriptではどうなるのかなと思ったわけです。

ということでとりあえず数値と文字列としての数字を準備してみました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<meta charset="UTF-8">
</head>
<body>

    <div id="text1"></div>
    <div id="text2"></div>
    
    <script> 
        let val = 5;
        let str = "7";

        $("#text1").text(val);
        $("#text2").text(str);

    </script>
</body>
</html>

実行結果
5
7

これをもとに色々計算してみました。

文字列同士、数値同士の足し算

まずは文字列同士、数値同士の足し算です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<meta charset="UTF-8">
</head>
<body>

    <div id="text1"></div>
    <div id="text2"></div>
    
    <script> 
        let val = 5;
        let str = "7";

        $("#text1").text(val + val);
        $("#text2").text(str + str);

    </script>
</body>
</html>

実行結果
10
77

数値同士の足し算（5 + 5）では計算された結果（10）が表示されました。

また文字列同士の足し算（”7″ + “7”）では文字列の結合の結果（”77″）が表示されました。

文字列と数値の足し算、掛け算、引き算、割り算

次に文字列と数値の足し算、ついでに掛け算をしてみました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<meta charset="UTF-8">
</head>
<body>

    <div id="text1"></div>
    <div id="text2"></div>
    
    <script> 
        let val = 5;
        let str = "7";

        $("#text1").text(val + str);
        $("#text2").text(val * str);

    </script>
</body>
</html>

実行結果
57
35

文字列と数値の足し算の場合は、数値が文字列となり、文字列同士の足し算となりました（”5″ + “7” = “57”）。

文字列と数値の掛け算の場合、文字列が数値となり、掛け算された結果が表示されました（5 x 7 = 35）。

また引き算、割り算の場合も文字列が数値となり、計算結果が表示されました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<meta charset="UTF-8">
</head>
<body>

    <div id="text1"></div>
    <div id="text2"></div>
    
    <script> 
        let val = 5;
        let str = "7";

        $("#text1").text(val - str);
        $("#text2").text(val / str);

    </script>
</body>
</html>

実行結果
-2
0.7142857142857143

JavaScriptの場合は型を合わせなくても、自動で型を変換し、計算してくれるようです。

ただ足し算の場合は文字列の結合となってしまう場合もあるため、注意が必要です。

次回はJQueryで条件によってドロップダウンメニューやラジオボタン、入力欄を選択不可（入力不可）にする方法を紹介します。