ES6 でのテンプレート文字列の具体的な使用法

最近、プロジェクトで ES6 テンプレート文字列を使用しました。これについては、ここでまとめています。

1. 以前は、通常は次のように JavaScript を使用してテンプレート文字列を出力することもできました。

$("#result").append(
    「彼は <b>"+person.name+"</b>"+" で、私たちは彼の "+person.age+" を知りたいと思っています。それだけです。」 
    );

しかし、この従来のアプローチでは、必要なテンプレートを取得するために、多数の "" (二重引用符) と + を使用して結合する必要があることがわかります。しかし、これは非常に不便です。

そのため、ES6 は ` (バックティック) でマークされ、変数が ${} で囲まれたテンプレート文字列を提供します。上記の例は、テンプレート文字列を使用して次のように記述できます。

$("#result").append(
  「彼は<b>${person.name}</b>で、私たちは彼の${person.age}を知りたいと思っています。それだけです」
    );

このアプローチは、文字列と変数を結合するために大量の "" と + を使用する必要がなくなりました。

2. テンプレート文字列に変数を導入することももちろん可能ですし、変数を使用しないことも可能です。以下に示すように:

「私は男です。」

「あなたが何をしても、

私はあなたを信頼します。」

3. 最初に変数を定義してから、その変数をテンプレート文字列に埋め込むこともできます。

var name="zzw";
` ${name}、何をしても、
 

クォート

はテンプレート文字列の識別子であるため、文字列内でバッククォートを使用する必要がある場合は、次のようにバッククォートをエスケープする必要があります

。

が

出力に保存されます。 ！

console.log( `何をしても`
 信頼しています。`);

出力は次のとおりです。

6. ${} の中括弧内に任意の JavaScript 式を入れて、操作を実行し、オブジェクトのプロパティを参照できます。

var x=88;
変数y=100;
console.log(`x=${++x},y=${x+y}`);

結果は次のようになります。

7. さらに強力です: テンプレート文字列は関数を呼び出すこともできます:

function string(){
  "zzw は es6 が好きです!" を返します。
}
console.log(`何を言いたいのですか? ${string()}`);

結果は次のようになります。

さらに、関数の結果が文字列でない場合は、次の一般規則に従って文字列に変換されます。

function string(){
    666 を返します。
  }
  console.log(`何を言いたいのですか? ${string()}`);

結果は次のようになります。

ここで、数値 666 は実際には文字列 666 に変換されます。

8. ${} の変数に名前が付けられていない場合、エラーが報告されます:

console.log(`何を言いたいですか? さて、${string( )}`);

上記のコードでは、string() 関数が宣言されていないため、エラーが報告されます。

9. 実際、${} に文字列を入力することもでき、ナレッジ結果は引き続き次の文字列を返します。

console.log(`何を言いたいのですか? さて、${"実際には、私は変数ではありません~"}`) ;

結果は次のようになります。

10. テンプレート文字列自体を参照したい場合は、次のように記述できます。

let str="return"+"`Hello! ${name}`";
let func=new Function("name",str);
 console.log(func("zzw"));

結果は次のとおりです。