JavaScriptで数字や文字列を足し算する方法

シェアする

  • このエントリーをはてなブックマークに追加
  • 0

あーりーです。

ここ最近は、変数の話をつづけてきました。

今回は、変数をつかって足し算をやってみます。

数字を足すのはもちろん、文字列を足す(合体させる)こともできます。

たとえば、こんなことができます

数字の「100」と「300」を足して「400」にする。

文字列の「びしょ濡れ」と「ハンバーガー」を足して(合体させて)、「びしょ濡れハンバーガー」にする。

スポンサーリンク

数字を足す

まず、数字の足し算をやってみます。

これです。

<html>
<head>
</head>
<body>

<script>
var a; // 変数aを使う宣言
a=100; // 変数aに100を代入

var b; // 変数bを使う宣言
b=300; // 変数bに300を代入

document.write(a+b); // a+bを表示
</script>

</body>
</html>

※少しでもわかりやすいように、JavaScriptのところは丁寧に、HTMLの部分は究極にあっさりと書いています。

緑色の部分がJavaScriptです。

解説

上の内容は、こうです。

まず、変数aを使う宣言をし、そこに数字の100を代入しています。

つぎに、変数bを使う宣言をし、そこに数字の300を代入しています。

最後に、a+bを表示しています。

表示結果

上の内容をメモ帳などのエディタにコピペしてHTML形式で保存し、そのファイルを開くと…

こんなふうに表示されます。

表示結果

400

100+300は400ですから、400と表示されます。

これが数字の足し算です。

ダブルクォートで囲むと結果が変わる

いまは、数字として「100」と「300」を足しました。

だから、結果が「400」になりました。

数字としてではなく、文字列として足す(合体させる)と、「100300」になります。

文字列としてあつかうには、ダブルクォート(またはシングルクォート)で囲みます。

こんなふうに

赤い部分がダブルクォートです。

<html>
<head>
</head>
<body>

<script>
var a; // 変数aを使う宣言
a="100"; // 変数aに100を代入

var b; // 変数bを使う宣言
b="300"; // 変数bに300を代入

document.write(a+b); // a+bを表示
</script>

</body>
</html>

こうすると、「100」や「300」は数字ではなく文字列になります。

だから、足すと計算結果ではなく、単純に合体して「100300」と表示されます。

表示結果

100300

ダブルクォートで囲めば、文字列として合体させられることがわかりました。

では、実際に言葉を合体させてみましょう~。

文字列を足す(合体させる)

文字列をあつかう場合は、ダブルクォート(またはシングルクォート)で囲みます。

では、「びしょ濡れ」と「ハンバーガー」を足して(合体させて)「びしょ濡れハンバーガー」にしてみましょう。

<html>
<head>
</head>
<body>

<script>
var a; // 変数aを使う宣言
a="びしょ濡れ"; // 変数aに代入

var b; // 変数bを使う宣言
b="ハンバーガー"; // 変数bに代入

document.write(a+b); // a+bを表示
</script>

</body>
</html>

緑色の部分がJavaScriptです。

「びしょ濡れ」や「ハンバーガー」という文字は、ダブルクォートで囲ってあります。

解説

上の内容は、こうです。

まず、変数aを使う宣言をし、そこに「びしょ濡れ」という文字列を代入しています。

つぎに、変数bを使う宣言をし、そこに「ハンバーガー」という文字列を代入しています。

最後に、a+bを表示しています。

a+bとはつまり、「びしょ濡れ」+「ハンバーガー」です。

表示結果

上の内容をメモ帳などのエディタにコピペしてHTML形式で保存し、そのファイルを開くと…

こんなふうに表示されます。

表示結果

びしょ濡れハンバーガー

文字列が合体しました!

おまけ

ここからは余談です。

「びしょ濡れハンバーガー」は、a+b の順番で合体させました。

この部分です。

document.write(a+b);

これを逆の b+a にしてみます。

つまり、こうです。

document.write(b+a);

すると文字列の合体の順番も逆になって、こんなふうに表示されます。

表示結果

ハンバーガーびしょ濡れ

逆になりました。

さらに…

変数aの数を増やしてみます。

3回足してみましょう。

document.write(b+a+a+a);

すると、表示結果は「ハンバーガーびしょ濡れびしょ濡れびしょ濡れ」となります。

何が言いたいかというと、変数を入れ替えたり、足す数を変えたりすることで、いろんな表示ができるようになる、っていうことです。

以上、数字や文字列の足し算についてでした~。

今回はこれでおしまい。

JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。