In 'n' Out

計算と結合

JavaScriptでは、数値を使って計算を行うことができます。
また、文字列をつなげて新しい文字列を作ることもできます。
同じ記号を使っていても、扱う値によって結果が変わる点が特徴です。
ここでは、数値の計算と文字列の結合について確認します。

数値を使った計算

数値同士を演算子でつなぐことで、計算を行えます。
演算子とは、足し算や引き算などの処理を指示する記号のことです。

構文

//加算（足し算）
変数 + 変数;
//減算（引き算）
変数 - 変数;
//乗算（掛け算）
変数 * 変数;
//除算（割り算）
変数 / 変数;
//剰余（余り）
変数 % 変数;

加算、減算、乗算、除算、剰余はこのように書きます。
剰余（%）は、5÷2＝2あまり1のように、割り算で余った数値を取得するために使います。

コード例

//calcNumber.js
let num1 = 10;
let num2 = 3;
        
alert(num1 + num2);
alert(num1 - num2);
alert(num1 * num2);
alert(num1 / num2);
alert(num1 % num2);

動作例

このように計算が行われ5回ポップアップが表示されます。
計算は、num1 + num2 * num2 のように1つの式の中で組み合わせて書くこともできます。
算数と同様、乗算・除算の方が先に計算されます。
また、乗算の際にnum1 + num1 を 2num1 のように省略して書くことはできません。
この場合は2 * num1（もしくはnum1 * 2）と表記しなくてはいけません。
例のように計算結果をそのまま表示することもできますが、変数に代入して表示することもできます。

コード例

//calcVariableNumber.js
let num1 = 10;
let num2 = 3;

let result = num1 + num2;
alert(result);

動作例

このように、計算結果を変数で管理することで、後から何度でも利用できます。
ただし、変数で計算結果を出す際には気を付けることがあります。
num1 + num2の計算結果を入れることがわかっているから、result = num1 + num2 を、num1 や num2 を宣言する前に実行すると、変数が未定義のためエラーになります。

文字列をつなげる

JavaScriptでは、+を使って文字列同士をつなげることもできます。

コード例

//stringMerge1.js
let str1 = 'りんごが';
let str2 = '2つあります';
        
alert(str1 + str2);

動作例

ボタンを押すとstr1とstr2の文字列が結合され、新しい文字列が作られます。
計算ではなく、文字をつなぐ処理になります。
では、宣言した変数が数字と文字列の場合はどうなるか見てみましょう。

//stringMerge2.js
let str1 = 'りんごが';
let str2 = 2;
let str3 = 'つあります';

alert(str1 + str2 + str3);

動作例

str1とstr3は文字列、str2は数字です。
これらを+で結合すると、数値のstr2は文字列扱われます。
JavaScriptでは、文字列と数値を+でつなぐと、数値が自動的に文字列へ変換されます。
つまり、数値同士の場合は計算になり、文字列同士の場合は結合になり、同じ+を使っていても、結果の意味が異なります。
なお、結合は変数同士でなくとも使用できます。

//stringMerge3.js
let num = 2;

alert('りんごが' + num + 'つあります');

動作例

JavaScriptでは、文字列と数値を+で結合すると数値が文字列に変換され、変数だけでなく直接書いた文字列とも結合できます。