JavaScript / TypeScript / jQuery

【Javascript】文字列に改行や変数を使用したいとき

文字列を接続する「＋」を使用した際の助長さ問題

文字列を繋げたり、変数を使用したいときは＋が接続詞となる。

const name = 'Yamada Taro';
const age = 28;

console.log(name + 'の年齢は、' + age + 'です。');

しかしこれだと繋げたい文字が増えたときに助長になり
ソースが見にくくなってしまう。

そんなとき、テンプレートリテラルを使用するとすっきりとした記述になる。

テンプレートリテラルとは

`（バッククォート）を使用した記法。 (ES6より使用可能になった)
基本的にはシングルクオート('文字列')やダブルクオート("文字列")と同じ

テンプレートリテラルの便利なポイント
  1. エスケープをすることなく、改行が可能になる
  2. ${…}で囲んだ部分は、変数や式として認識されて展開される

使ってみる

<script>
    /**
     * ① エスケープせずに改行する
     */
    // 従来の文字列連結の場合
    console.log('こんにちは。\n'
        + '今日は雨なので外には出ません。');
    // テンプレートリテラルを使用の場合
    console.log(`こんにちは。
今日は雨なので外には出ません。`);

    /**
     * ② 変数を使用する
     */
    const name = 'Taro Yamada';
    const age = 28;
    const hobby = 'アイドル観賞'

    // 従来の文字列連結の場合
    console.log('はじめまして。私の名前は' + name + 'です。今年で' + age + 'になります。趣味は' + hobby + 'です。');
    // テンプレートリテラルを使用の場合
    console.log(`はじめまして。私の名前は${name}です。今年で${age}になります。趣味は${hobby}です。`);

    /**
     * ③ 式を展開する
     */
    // 従来の文字列連結の場合
    console.log('足し算をします。10 + 21は、' + (10 + 21) + 'です。');
    // テンプレートリテラルを使用の場合
    console.log(`足し算をします。10 + 21は、${10 + 21}です。`);


    // HTMLを生成する場合もすっきり見やすくなる
    const className = 'add-content';
    const id = 100;
    const text = 'Javascriptで追加する要素';
    // 従来の文字列連結の場合
    document.write('<div class="' + className + '" data-id="' + id + '">' + text + '</div>');
    // テンプレートリテラルを使用の場合
    document.write(`<div class="${className}" data-id="${id}">${text}</div>`);
</script>

\ 案件のご依頼・ご相談はこちらから /