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

この記事では、javascript に関する関連知識を提供します。主に、ES6 でのテンプレート文字列の具体的な使用法を紹介し、主にコードに基づいてテンプレート文字列の関連コンテンツを分析します。以下を見てみましょう。皆様のお役に立てれば幸いです。

[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

プロジェクトで最近使用されたものES6 テンプレート文字列はここにまとめられています。

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

$("#result").append(
    "He is <b>"+person.name+"</b>"+"and we wish to know his"+person.age+".That is all" 
    );

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

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

$("#result").append(
  `He is <b>${person.name}</b>and we wish to know his${person.age}.that is all`
    );

このアプローチははるかに単純で、多数の "" を使用したり、文字列と変数を結合したりする必要がなくなりました。

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

` 私は男です。`

` 何をしても、

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

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

var name="zzw";
` ${name},no matter what you do,
 I trust you.`

4. バッククォートはテンプレート文字列の識別子であるため、バッククォートを使用する必要がある場合は、明らかに、以下に示すように、それらをエスケープする必要があります:

`No matter\` you do,
I trust you.`

#5. 注: もしテンプレート文字列を使用して複数行の文字列を表すと、すべてのスペースとインデントが出力に保存されます。 ！

console.log( `No matter\` what you do,
 I trust you.`);

出力結果は次のとおりです:

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

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

結果は次のとおりです:

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

function string(){
  return "zzw likes es6!";
}
console.log(`你想说什么?嗯，${string()}`);

Result 以下に示すように:

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

function string(){
    return 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"));

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

[関連する推奨事項:

JavaScript ビデオ チュートリアル

、Web フロントエンド ]

以上がES6 でのテンプレート文字列の具体的な使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。