はじめに
javascriptにおけるテンプレートリテラルの便利さを知った。
従来の記述方法
javascriptの文字列の従来の書き方について、テンプレートリテラルの便利さを知るためにお話しさせていただきます。下記が従来の書き方になります。
const name = "takaki";
const age = 26;
const message1 = "私の名前は" + name + "です。年齢は" + age + "です。";
console.log(message1);
console
私の名前はtakakiです。年齢は26です。
従来の書き方では、"ダブルクォート"や'シングルクォート'で囲い、その中に「+」を使用し文字列や変数を連結させていくような使い方をしていました。
テンプレート文字列を用いた新しい記述方法
下記が新しい記述方法になります。
const message2 = `私の名前は${name}です。年齢は${age}です。`;
console.log(message2);
console
私の名前はtakakiです。年齢は26です。
従来の記述方法と違い、可読性(見やすさ)が向上されております。
「${...}」を使用し全体をバッククオート「``」で囲んでいるのが特徴で、「{}」の中に変数を格納できるようになっています。
文字列の改行がそのまま使える
従来の方法だと改行には「/n」が必要でしたが、テンプレートリテラルはそのまま改行することができます。
const text = `１行目
２行目
３行目`;
console.log(text);
console
１行目
２行目
３行目
便利な記述方法
テンプレートリテラルの記述方法では変数以外に、式や関数も呼び出せるようになっております！
const a = 10;
const b = 20;
const sum = `合計は${a + b}です。`;
console.log(sum);
console
合計は30です。
条件分岐を組み合わせる記述方法も可能
const name = "takaki";
const programmer = true;
console.log(`こんにちは、${name}さん！
あなたは${programmer ? "プログラマーです。" : "プログラマーではありません。"}`);//三項演算子
console
こんにちは、takakiさん！
あなたはプログラマーです。
おわりに
従来の書き方と比べるとコードが整理されており、書き方の利便性も向上していると感じられました。javascriptはReactでも使われる言語なので、効率よく学習するためにも基礎を深く理解しようと思いました。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！