JavaScript テンプレートリテラル詳解

概要: このチュートリアルでは、文字列テンプレートをより簡単に操作できる JavaScript テンプレートリテラルについて学習します。

ES6 より前は、シングルクォート（'）またはダブルクォート（"）を使用して文字列リテラルを囲んでいました。そして、文字列の機能は非常に限られていました。

より複雑な問題を解決できるように、ES6 テンプレートリテラルは、文字列をより安全かつクリーンに操作できる構文を提供します。

ES6 では、次の例のようにバッククォート（`）でテキストを囲むことでテンプレートリテラルを作成します。

let simple = `This is a template literal`;Code language: JavaScript (javascript)

そして、次の機能が得られます。

• 複数行文字列: 複数行にまたがる文字列。
• 文字列フォーマット: 変数または式の値に対して文字列の一部を置換する機能。この機能は文字列補間とも呼ばれます。
• HTML エスケープ: 文字列をHTMLに含めることができるように安全に変換する機能。

JavaScript テンプレートリテラルの基本構文

前述のように、シングルクォートやダブルクォートの代わりに、テンプレートリテラルは次の例のようにバッククォートを使用します。

let str = `Template literal in ES6`;

console.log(str);// Template literal in ES6
console.log(str.length); // 23
console.log(typeof str);// stringCode language: JavaScript (javascript)

バッククォートを使用することで、テンプレートリテラル内でシングルクォートやダブルクォートをエスケープせずに自由に使用できます。

let anotherStr = `Here's a template literal`;Code language: JavaScript (javascript)

文字列にバッククォートが含まれる場合は、バックスラッシュ（\）を使用してエスケープする必要があります。

let strWithBacktick = `Template literals use backticks \` insead of quotes`;Code language: JavaScript (javascript)

複数行文字列

ES6 より前は、次の手法を使用して、改行文字（\n）を文字列に手動で含めることで複数行文字列を作成していました。

let msg = 'Multiline \n\
string';

console.log(msg);
//Multiline
//stringCode language: JavaScript (javascript)

改行文字（\n）の後に配置されたバックスラッシュ（\）は、改行ではなく文字列の継続を示していることに注意してください。

しかし、この手法は JavaScript エンジン間で一貫していません。そのため、配列と文字列連結に依存する複数行文字列を作成することがかなり一般的でした。

let msg = ['This text',
         'can',
         'span multiple lines'].join('\n');Code language: JavaScript (javascript)

テンプレートリテラルを使用すると、必要な場所に改行を追加するだけで、より簡単に複数行文字列を定義できます。

let p =
`This text
can
span multiple lines`;Code language: JavaScript (javascript)

空白は文字列の一部であることに注意してください。したがって、テキストが適切なインデントで揃っていることを確認する必要があります。postオブジェクトがあるとします。

let post = {
    title: 'JavaScript Template Literals',
    excerpt: 'Introduction to JavaScript template literals in ES6',
    body: 'Content of the post will be here...',
    tags: ['es6', 'template literals', 'javascript']
};
Code language: JavaScript (javascript)

次のコードは、postオブジェクトのHTMLコードを返します。オブジェクトのデストラクチャリング手法を使用して、postオブジェクトのプロパティを個々の変数（title、excerpt、body、tags）に割り当てていることに注意してください。

let {title, excerpt, body, tags} = post;

let postHtml = `<article>
<header>
    <h1>${title}</h1>
</header>
<section>
    <div>${excerpt}</div>
    <div>${body}</div>
</section>
<footer>
    <ul>
      ${tags.map(tag => `<li>${tag}</li>`).join('\n      ')}
    </ul>
</footer>`;Code language: HTML, XML (xml)

変数postHtmlの出力は次のとおりです。<li>タグを正しくインデントするために、どのようにスペースを使用しているかに注目してください。

<article>
<header>
    <h1>JavaScript Template Literals</h1>
</header>
<section>
    <div>Introduction to JavaScript template literals in ES6</div>
    <div>Content of the post will be here...</div>
</section>
<footer>
    <ul>
      <li>es6</li>
      <li>template literals</li>
      <li>javascript</li>
    </ul>
</footer>Code language: HTML, XML (xml)

変数と式の置換

この時点で、テンプレートリテラルは通常の JavaScript 文字列の改良版のようなものです。テンプレートリテラルと通常の文字列の大きな違いは、置換です。

置換を使用すると、変数と式を文字列に埋め込むことができます。JavaScript エンジンは、これらの変数と式を自動的にその値に置き換えます。この機能は文字列補間と呼ばれます。

JavaScript に変数と式を置換するように指示するには、変数と式を次の特別なブロックに配置します。

${variable_name}

次の例を参照してください。

let firstName = 'John',
    lastName = 'Doe';

let greeting = `Hi ${firstName}, ${lastName}`;
console.log(greeting); // Hi John, DoeCode language: JavaScript (javascript)

置換${firstName}と${lastName}は、変数firstNameとlastNameにアクセスして、その値をgreeting文字列に挿入します。

次に、greeting変数には置換の結果が格納されます。次の例では、代わりに式を置換します。

let price = 8.99,
    tax = 0.1;

let netPrice = `Net Price:$${(price * (1 + tax)).toFixed(2)}`;

console.log(netPrice); // netPrice:$9.89Code language: JavaScript (javascript)

タグ付きテンプレート

テンプレートタグは、テンプレートリテラルに対する変換を行い、結果の文字列を返します。

次の例のように、バッククォート（`）文字の前にタグをテンプレートの先頭に配置します。

let greeting = tag`Hi`;Code language: JavaScript (javascript)

この例では、tagはHiテンプレートリテラルに適用されるテンプレートタグです。tagは、次のシグネチャを持つ任意の関数にすることができます。

function tag(literals, ...substitutions) {
    // return a string
}Code language: JavaScript (javascript)

この関数では、

• literalsパラメータは、リテラル文字列を含む配列です。
• substitutionsパラメータには、各置換に対して解釈された後続の引数が含まれています。

次の例を参照してください。

function format(literals, ...substitutions) {
    let result = '';

    for (let i = 0; i < substitutions.length; i++) {
        result += literals[i];
        result += substitutions[i];
    }
    // add the last literal
    result += literals[literals.length - 1];
    return result;
}

let quantity = 9,
    priceEach = 8.99,
    result = format`${quantity} items cost $${(quantity * priceEach).toFixed(2)}.`;

console.log(result); // 9 items cost $80.91.Code language: JavaScript (javascript)

この例では、format()関数は、literals配列と、substitutions配列に格納されている2つの他の引数の3つの引数を受け入れます。

最初の引数は、3つの要素を含むliterals配列です。

• 最初の置換の前に空文字列（”）。 literals配列の最初の引数は空文字列であることに注意してください。
• 最初の置換と2番目の置換の間に配置された文字列'items cost'。
• 2番目の置換の後に続く文字列（'.'）

2番目の引数は9であり、これはquantity変数の解釈された値です。substitutions配列の最初の要素になります。3番目の引数は80.91であり、これは式(quantity * priceEach).toFixed(2)の解釈された値です。substitutions配列の2番目の要素になります。

まとめ

• バッククォートを使用して、文字列補間の文字列リテラルを作成します。