ECMAScript 6は、バックティックを区切り文字として使用して、新しいタイプの文字列リテラルを生み出します。これらのリテラルを使用すると、基本的な文字列補間式を埋め込むことができます。これらの式は自動的に解析および評価されます。
let person = {name: 'RajiniKanth', age: 68, greeting: 'Thalaivaaaa!' };
let usualHtmlStr = "<p>My name is " + person.name + ",</p>\n" +
"<p>I am " + person.age + " old</p>\n" +
"<strong>\"" + person.greeting + "\" is what I usually say</strong>";
let newHtmlStr =
`<p>My name is ${person.name},</p>
<p>I am ${person.age} old</p>
<p>"${person.greeting}" is what I usually say</strong>`;
console.log(usualHtmlStr);
console.log(newHtmlStr);
ご覧のとおり`、文字列リテラルとして解釈される一連の文字を使用しましたが、フォームの式はすべて${..}インラインで解析および評価されます。
補間された文字列リテラルの本当に良い利点の1つは、複数の行に分割できることです。
var Actor = {"name": "RajiniKanth"};
var text =
`Now is the time for all good men like ${Actor.name}
to come to the aid of their
country!`;
console.log(text);
// Now is the time for all good men
// to come to the aid of their
// country!
補間された式
${..}関数呼び出し、インライン関数式呼び出し、その他の補間された文字列リテラルを含め、補間された文字列リテラル内に有効な式を含めることができます！
function upper(s) {
return s.toUpperCase();
}
var who = "reader"
var text =
`A very ${upper("warm")} welcome
to all of you ${upper(`${who}s`)}!`;
console.log(text);
// A very WARM welcome
// to all of you READERS!
ここでは、内部の`${who}s`補間された文字列リテラルは、who変数と"s"文字列を組み合わせるときに、とは対照的に少し便利でしたwho + "s"。また、メモを保持するために、補間された文字列リテラルは、それが現れる場所でレキシカルにスコープされているだけであり、動的にスコープされていない：
function foo(str) {
var name = "foo";
console.log(str);
}
function bar() {
var name = "bar";
foo(`Hello from ${name}!`);
}
var name = "global";
bar(); // "Hello from bar!"
HTMLのテンプレートリテラルを使用すると、煩わしさが軽減されるため、間違いなく読みやすくなります。
単純な古い方法：
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'<a href="' + link + '">Let\'s go</a>'
'</div>';
ECMAScript 6の場合：
`<div class="${className}">
<p>${content}</p>
<a href="${link}">Let's go</a>
</div>`
- 文字列は複数行にまたがることができます。
- 引用文字をエスケープする必要はありません。
- 次のようなグループ化を回避できます： '">'
- plus演算子を使用する必要はありません。
タグ付きテンプレートリテラル
テンプレート文字列にタグを付けることもできます。テンプレート文字列がタグ付けされると、リテラルと置換が結果の値を返す関数に渡されます。
function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral`test`; //["test"]
function myTaggedLiteral(strings, value, value2) {
console.log(strings, value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
ここでは、spread演算子を使用して複数の値を渡すことができます。最初の引数（文字列と呼びます）は、すべてのプレーン文字列（補間された式の間のもの）の配列です。
次に... gather/rest operator、を使用して、後続のすべての引数を値と呼ばれる配列にまとめますが、もちろんvalue1、上記のように、文字列パラメーターに続く個別の名前付きパラメーター（value2、など）のままにすることもできます。
function myTaggedLiteral(strings, ...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
values配列に収集された引数は、文字列リテラルで見つかった既に評価された補間式の結果です。タグ付き文字列リテラルは、補間が評価された後、最終的な文字列値がコンパイルされる前の処理手順に似ているため、リテラルからの文字列の生成をより細かく制御できます。再利用可能なテンプレートを作成する例を見てみましょう。
const Actor = {
name: "RajiniKanth",
store: "Landmark"
}
const ActorTemplate = templater`<article>
<h3>${'name'} is a Actor</h3>
<p>You can find his movies at ${'store'}.</p>
</article>`;
function templater(strings, ...keys) {
return function(data) {
let temp = strings.slice();
keys.forEach((key, i) => {
temp[i] = temp[i] + data[key];
});
return temp.join('');
}
};
const myTemplate = ActorTemplate(Actor);
console.log(myTemplate);
生の弦
タグ関数は、文字列と呼ばれる配列である最初の引数を受け取ります。ただし、追加のデータビットが含まれています。すべての文字列の未処理バージョンです。次の.rawように、プロパティを使用してこれらの生の文字列値にアクセスできます。
function showraw(strings, ...values) {
console.log(strings);
console.log(strings.raw);
}
showraw`Hello\nWorld`;
ご覧のように、文字列の未\n処理バージョンはエスケープされたシーケンスを保持しますが、処理されたバージョンの文字列はエスケープされていない実際の改行のように扱います。ECMAScript 6には、文字列リテラルタグとして使用できる組み込み関数が付属していますString.raw(..)。それは単に文字列の生バージョンを通過します：
console.log(`Hello\nWorld`);
/* "Hello
World" */
console.log(String.raw`Hello\nWorld`);
// "Hello\nWorld"