【TypeScript】テンプレート文字列を使い、変数や改行を入れる方法【JavaScript】

皆さんは文字列に変数を埋め込む際に、どのようにしていますか？

私はプログラミングを始めた初期の頃、つまりJavaを学び始めた頃は、以下のようにして処理していました。

"1足す1の答えは" + hoge + "です。"

ダブルクォーテーションで文字列を囲み、その間に変数を挟む感じですね。

これはこれで良いのですが、ダブルクォーテーションやシングルクォーテーションはshiftを押しながら打たなければならないので、量が増えると大変なんですよね。

そんなときはテンプレート文字列が便利です。

ちょっとしたテクニックですが、ダブルクォーテーションやシングルクォーテーションを打つ量が確実に減るのでオススメですよ。

最近TypeScriptばかりいじっているので、今回はTypeScriptでテンプレート文字列を使い、変数や改行を入力する方法についてご紹介しようと思います。

TypeScriptなので、もちろんJavaScriptでも大丈夫ですよ。

テンプレート文字列の使い方

冒頭のようにダブルクォーテーションで地道に囲むと、以下のようになります。

let hisName: string = "Jong Do";
let myName: string = "Adam";
console.log("His name is " + hisName + ". My name is " + myName + ".");
let one: number = 1;
let two: number = 2;
console.log("1 + 2 = " + (one + two));

これの出力結果は以下の通りです。

His name is Jong Do. My name is Adam.
1 + 2 = 3

このぐらいであれば手間はそれほどでもありませんが、プロジェクト全体で考えるとチリも積もればなんとやら、で結構大変かもしれません。

少しでもタイピング量を減らすのであれば、以下のようにテンプレートを使うとよいでしょう。

console.log(`His name is ${hisName}. My name is ${myName}.`);
console.log(`1 + 2 = ${one + two}`);

ここでポイントとなるのはバッククォートで囲んでいることです。
TypeScriptやJavaScriptでテンプレートを扱う際は、バッククォートで文字列と変数を囲みます。

そうすることで、タイピング量も減り、見た目もすっきりして読みやすくなります。
特に、計算式もそのまま入力できるのが便利かな、と思います。

テンプレート文字列は改行もそのまま入力できる

テンプレート文字列のメリットはもう１つあります。
なんと改行をそのまま表現することができるのです。

どういうことが見てみましょう。
例えば以下のような文章を出力したいとします。

あめんぼ
あかいな
あいうえお

普通にダブルクォーテーションやシングルクォーテーションで囲む場合は、以下のように改行をエスケープしなければなりませんでした。

let msg: string = "あめんぼ¥nあかいな¥nあいうえお";
console.log(msg);

しかし、テンプレート文字列では改行をそのまま入力することができるのです。
つまり、こうなります。

let msg: string = `あめんぼ
あかいな
あいうえお`;
console.log(msg);

バッククォートで囲みつつ、改行しただけです。
すごく直感的ですよね。
エスケープのし忘れなどに悩まされることもなくなりそうです。

終わりに

今回はTypeScriptでテンプレート文字列を使い、変数や改行を入力する方法についてご紹介しました。

内容をまとめると以下のようになります。

TypeScriptだけではなく、JavaScriptでも同様に使えますので、使用できる場面は幅広いと思います。
覚えておくと結構便利ですので、皆さんも是非利用してみてください。

今回はここまでです。それでは。