【JavaScript】（ES6）テンプレート文字列

JavaScriptのES6での操作として、ここでは文字列について扱います。これまで（ES5）も文字列オブジェクトの操作や出力を行ってきているように、文字列（String）自体の理解には問題ないと思います。

ここでは文字列の操作にあたってテンプレート文字列という便利なものがありますので、それについて触れて行こうと思います。

テンプレート文字列
1. テンプレート文字列とは？
文字列のメソッド
まとめ

テンプレート文字列

テンプレート文字列を説明するにあたって、まず、次のような変数などを定義したコードを用意します。

let firstName = 'Yuriyan';
let lastName = 'Retriever';
const birthYear = 1990;

function calculateAge(year) {
    return 2019 - year;
}

ES6ですのでlet、constで変数宣言しています。関数として年齢計算をする処理を書いています。ここまではこれまでやってきたことです。

では、このコードに続けて次のようにconsole.log()で出力してみましょう。

// ES5
console.log('That dancer is ' + firstName + ' ' + lastName + '. She was born in ' + birthYear + '. Today, she is ' + calculateAge(birthYear) + ' years old.');

これまで何度もやってきたことなので、何をやっているか理解できると思います。単に、定義した変数と関数を利用して文字列の出力しているだけです。

ただ、この書き方だと、プラス記号（+）やクォーテーション（”）の記入がとても面倒だと誰もが感じているでしょう。記号を忘れそうになったり、表示のバランスに空白文字をどう入れるか色々と注意力が必要な書き方です。

この書き方をもっと楽にしてくれるのがテンプレート文字列になります。

テンプレート文字列とは？

テンプレート文字列は、ダブルクォートやシングルクォートで文字列を囲む代わりに、バックティック文字(` `) を利用します。バッククォートとも言います。これを使うことによって、テンプレート文字列はプレースホルダーを使って表示処理することができます。プレースホルダーはドル記号と波括弧で${}の形で変数や関数などを囲って使います。

実際に上と同じ表現をテンプレート文字列でやってみましょう。

上のコードに続けて次のように書きます。

// ES6
console.log(`That dancer is ${firstName} ${lastName}. She was born in ${birthYear}. Today, she is ${calculateAge(birthYear)} years old.`);

ES5の表現と比べて、とても見やすいのではないでしょうか。

文章全体をバッククォート(` `) で囲っているだけで中の文章はプレースホルダーの部分以外は通常の文章です。表示に利用する変数や関数を該当する位置にプレースホルダーを利用して差し込んでいるだけです。

どちらも同じ表現になっています。ES6のテンプレート文字列を使った方が簡単ですよね。これまでよりも簡単でミスも少なくなるのではないかと思います。

文字列のメソッド

このテンプレート文字列の機能に加えて、文字列操作のメソッドも追加されています。

次のコードで確認してみましょう。

let firstName = 'Yuriyan';
let lastName = 'Retriever';

const name = `${firstName} ${lastName}`;
console.log(name.startsWith('Y'));
console.log(name.startsWith('y'));
console.log(name.endsWith('trie'));
console.log(name.endsWith('ver'));
console.log(name.includes('an'));
console.log(name.includes(' '));
console.log(`${firstName}`.repeat(7));
console.log(`${firstName} `.repeat(7));

最初の変数宣言は先ほどと同じものを使っています。さらにconstを使って変数nameを宣言して、テンプレート文字列で値を渡しています。

ここでは次の4つの文字列のメソッドを使って操作しています。