[解決済み] ES6テンプレートリテラルと連結文字列の比較

質問

私は以下のコードを ECMAScript 6 テンプレート・リテラル :

let person = {name: 'John Smith'};
let tpl = `My name is ${person.name}.`;
let MyVar = "My name is " + person.name + ".";

console.log("template literal= " + tpl);
console.log("my variable = " + MyVar);

出力は以下のようになります。

template literal= My name is John Smith.
my variable = My name is John Smith.

これは はバイオリンです。

正確な違いを検索してみたのですが、見つかりませんでした。 次の2つの文の違いは何ですか？

  let tpl = `My name is ${person.name}.`;

そして

  let MyVar = "My name is "+ person.name+".";

私はすでに、文字列 MyVar と連結された person.name というように、テンプレート・リテラルを使用するシナリオはどのようなものでしょうか？

どのように解決するのですか？

テンプレートリテラルをプレースホルダのみで使用している場合（例． `Hello ${person.name}` のように）、結果は単に文字列を連結したものと同じになります。主観的には、その方が見栄えがよく、読みやすく、特に複数行の文字列や、文字列の中に ' と " というように、これらの文字をエスケープする必要がなくなったので

可読性は素晴らしい機能ですが、テンプレートで最も興味深いのは タグ付きテンプレート・リテラル :

let person = {name: 'John Smith'}; 
let tag = (strArr, name) => strArr[0] + name.toUpperCase() + strArr[1];  
tag `My name is ${person.name}!` // Output: My name is JOHN SMITH!

この例の3行目では、関数名 tag という関数が呼び出されています。テンプレート文字列の内容は複数の変数に分割され、その変数にアクセスするために、引数として tag 関数の引数でアクセスできます。リテラルセクション（この例では strArr[0] は My name is であり、その値は strArr[1] は ! ) と置換 ( John Smith ). テンプレート・リテラルは tag 関数が返すものに評価されます。

は ECMAScript wiki には、入力の自動エスケープやエンコーディング、ローカライズのような、いくつかの可能な使用例がリストアップされています。という名前のタグ関数を作成することができます。 msg のようなリテラルな部分を検索する My name is のような直訳部分を探して、現在のロケールの言語、例えばドイツ語への翻訳に置き換えます。

console.log(msg`My name is ${person.name}.`) // Output: Mein Name ist John Smith.

タグ関数が返す値は、文字列である必要さえありません。例えば $ という名前のタグ関数を作り、文字列を評価し、それをクエリーセレクタとして使って、以下のようにDOMノードのコレクションを返します。 の例 :

$`a.${className}[href=~'//${domain}/']`