数値と文字列の連結、テンプレートリテラルについて

2023年10月6日

今日は数値と文字列の連結、テンプレートリテラルについて勉強しました。

JavaScriptならではのちょっと変わった動きがありますので、それも併せて紹介します。

数値どうしの連結

こちらは簡単！下のように、単純にそのまま連結すればOKです。

// Numbers together
const bank1 = 100;
const bank2 = 50;

const allBanks = bank1 + bank2;
console.log(allBanks);

数値と文字列の連結

まずは文字列どうしの連結です。const message1 を見ていただくと、greetingとhisNameを+で繋ぐだけ。ここまで簡単ですね！

次は、数値と文字列を組み合わせるパターン。const message2を見ていただくと、hisNameとageを+で繋ぐと文字列のEd30として出力されます（29行目をご参照ください）。

そして最後のmessage3ですが、${}という見慣れない記号が出てきました。

こちらの${}を使うと、文字列内に変数や式を埋め込むことができるそうです。お作法としては、まず、バッククオートで「“」文字列を囲み、その中に${}を入れます。そして、${}の中に変数を入れる順番がわかりやすいかなと思いました。

const greeting = 'How are you?';
const hisName = 'Ed';
const age = 30;

const message1 = greeting + hisName;
const message2 = hisName + age;
const message3 = `彼の名前は${hisName}で、年齢は${age}歳です`;

console.log(message1); // How are you?Ed
console.log(message2); // Ed30
console.log(typeof message2); //string
console.log(message3); // 彼の名前はEdで、年齢は30歳です

JavaScriptの癖の強いところ

JavaScriptは人間が読みやすいように作られているハイレベル言語だそうで、プログラム初心者でもとっつきやすいと言われています。

でも、インストラクターのEdも言っていましたが「ちょっと変わった（Weired）な動きをするよ」と言っていました。

他のプログラミング言語を知らないので、そうなの？というくらいの感じですが、多分こういうことだろうと思いましたので、書いてみます。

const weired1 = 1 + '23';
console.log(weired1); // '123'...transform to string automatically
console.log(typeof weired1);

const weired2 = '5' - 4;
console.log(weired2); // 1...transform to number automatically
console.log(typeof weired2);