TypeScript入門合計金額を表示しよう – 文字列連結

続いて、画面に次のようなメッセージを表示してみましょう。

100円の商品を5個買った合計は500円です。

まずは、画面にこのメッセージを表示してみましょう。次のようになります。

// strings.ts
console.log("100円の商品を5個買った合計は500円です。");

「型」を紹介したレッスンで、文字列を扱う場合はその両端にクオーテーション記号が必要になると紹介しました。そのため、ここではパラメータ全体にダブルクオーテーション（”）が付いていることに気をつけましょう。

しかしここでは、「500」という部分は計算をして求めたいとします。そこで、次のように書き換えました。

console.log("100円の商品を5個買った合計は100*5円です。");

かけ算を表す「*」を使って100×5の計算結果を表示したいとしましょう。しかし、これは計算が正しく行われず、画面にはそのまま表示されてしまいます。

計算を行うためには、クオーテーション記号をなくさなければなりません。

このように、文字列とそれ以外の情報を混ぜて画面に表示させたい場合は、「文字列連結」というテクニックを利用します。

文字列を結合しよう

次のように書き換えましょう。

console.log("100円の商品を5個買った合計は" + 100 * 5 + "円です。");

これで、正しく計算結果が表示されます。

文字列連結には「+」の記号が使われます。足し算の算術演算子と同じ記号なので、かなりややこしく感じますが、なぜかJavaScript等の一部のプログラミング言語は、この記号が使われます。

少し簡単な例に書き換えてみましょう。

console.log("A" + 1);

このプログラムを実行すると、画面には「A1」と表示されます。文字列の「A」と数字の「1」を連結して表示しているわけです。

こうして、「+」記号を使えば、文字列と数字を混在させることができます。

足し算に注意

先の通り、TypeScriptでは足し算の記号と文字列連結の記号が同じなため、次のようなプログラムを作るときには注意が必要です。

console.log("1+1=" + 1+1);

文字列としての「1+1=」と計算式としての「1+1」を連結して、「1+1=2」などと表示したいと思いました。しかし、これは正しく動作せず「1+1=11」などと表示されてしまいます。

これは、最初に「1+1= 」という文字列と「1」という数字が連結されてしまって、文字列に変わってしまうため「1+1=1」という文字列ができあがってしまいます。そして、その後にさらに「1」が「連結」されてしまうため、11等という結果になってしまうわけです。

この場合は、算術演算子の優先順位の変更と同様で、計算式の方をカッコで囲って、優先順位を上げる必要があります。

console.log("1+1=" + (1+1));

とします。ややこしいですが気をつけましょう。