ES6`区切り文字としてバックティックを使用して、新しいタイプの文字列リテラルを考え出します。これらのリテラルを使用すると、基本的な文字列補間式を埋め込むことができ、自動的に解析および評価されます。
let actor = {name: 'RajiniKanth', age: 68};
let oldWayStr = "<p>My name is " + actor.name + ",</p>\n" +
"<p>I am " + actor.age + " old</p>\n";
let newWayHtmlStr =
`<p>My name is ${actor.name},</p>
<p>I am ${actor.age} old</p>`;
console.log(oldWayStr);
console.log(newWayHtmlStr);
ご覧のとおり、文字列リテラルとして解釈される一連の文字の周りに..``を使用しましたが、フォームの式はすべて、${..}すぐにインラインで解析および評価されます。
補間された文字列リテラルの非常に優れた利点の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 );
補間された式
関数呼び出し、インライン関数式呼び出し、さらにはその他の有効な式${..}を、補間された文字列内にlit‐ eral含めることができますinterpo‐ lated string literals。
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 );
ここで、内部の$ {who} s``補間文字列リテラルは、"s"who + "s"とは対照的に、who変数を文字列と組み合わせるときに少し便利でした。また、単なる補間文字列リテラルがあるノートを保つためにlexically scopedはない、それが表示される場所dynamically scopedどのような方法で
function foo(str) {
var name = "foo";
console.log( str );
}
function bar() {
var name = "bar";
foo( `Hello from ${name}!` );
}
var name = "global";
bar();
template literalHTMLにforを使用すると、煩わしさが軽減されるため、間違いなく読みやすくなります。
昔ながらの方法：
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'<a href="' + link + '">Let\'s go</a>'
'</div>';
とES6：
`<div class="${className}">
<p>${content}</p>
<a href="${link}">Let's go</a>
</div>`
- 文字列は複数行にまたがることができます。
- 引用符をエスケープする必要はありません。
- 次のようなグループ化は避けることができます： '">'
- plus演算子を使用する必要はありません。
タグ付きテンプレートリテラル
template文字列にタグを付けることもできtemplateます。文字列にタグを付けると、literalsおよび置換が関数に渡され、結果の値が返されます。
function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral`test`;
function myTaggedLiteral(strings,value,value2) {
console.log(strings,value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
spreadここで演算子を使用して、複数の値を渡すことができます。最初の引数（文字列と呼びます）は、すべてのプレーン文字列（補間された式の間のもの）の配列です。
次に、以降のすべての引数を、を使用してvaluesという配列にまとめ... gather/rest operatorますが、もちろん、上記のように文字列パラメーターに続く個別の名前付きパラメーターとして残すこともできます(value1, value2 etc)。
function myTaggedLiteral(strings,...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
argument(s)私たちの価値観に集め、配列は、文字列リテラルで見つかった、既に評価された補間式の結果です。Atagged string literalは、補間が評価された後、最終的な文字列値がコンパイルされる前の処理ステップのようなものであり、リテラルからの文字列の生成をより細かく制御できます。を作成する例を見てみましょうre-usable templates。
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);
生の文字列
タグ関数stringsは、と呼ばれる最初の引数を受け取りarrayます。これはです。ただし、追加のデータが含まれています。すべての文字列の未処理の未処理バージョンです。次の.rawように、プロパティを使用してこれらの生の文字列値にアクセスできます。
function showraw(strings, ...values) {
console.log( strings );
console.log( strings.raw );
}
showraw`Hello\nWorld`;
ご覧のとおりraw、文字列のバージョンはエスケープされた\ nシーケンスを保持しますが、処理されたバージョンの文字列はそれをエスケープされていない実際の改行のように扱います。 ES6文字列リテラルタグとして使用できる組み込み関数が付属しています String.raw(..)。strings：の生バージョンを通過するだけです。
console.log( `Hello\nWorld` );
console.log( String.raw`Hello\nWorld` );