今回はES6でのテンプレート文字列の使用について詳しく説明します。ES6でテンプレート文字列を使用する際の注意点について、実際のケースを見てみましょう。
前に書いてください
ES6に関しては2015年7月18日についにリリースされました 埃が溜まってきました。主要なブラウザはまだ完全にはサポートされていませんが、それでも試してみたくなるわけではありません。バックエンドでは、Node.js(0.12+) または io.js とフロントエンドの場合、Babel または Traceur を使用して構文を ES5 に事前エスケープすることもできます。
このシリーズ（いつも怠け者なのでシリーズ化できるかは分かりませんが）に関して、学習内容をランダムに選んで書いていきます。誰もが積極的に間違いを修正したり、議論のためにメッセージを残したりすることを歓迎します。
テンプレート文字列
使用法 ES6 で導入された新しいタイプの文字列リテラル構文 - テンプレート文字列。技術的に説明すると、テンプレート文字列は、文字列リテラル内に式を埋め込む文字列リテラルです。簡単に言うと文字列に変数機能を追加したものです。
まず、これまでの文字列の使用法を見てみましょう:
// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
// 字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?` // Hello Bob, how are you today?そして今:
rreeeとてもシンプルです。
MDN のテンプレート文字列の定義からの引用:
テンプレート文字列では、通常の文字列の二重引用符や一重引用符の代わりにバックティック () が使用されます。テンプレート文字列には、特定の構文 (${expression}) のプレースホルダーを含めることができます。プレースホルダー内の
expressionは、周囲のテキストとともにデフォルト関数に渡され、すべての部分を接続する役割を果たします。 プレースホルダー ${} には、任意の js 式 (関数または演算)、または別のテンプレート文字列を指定でき、その計算結果は文字列として出力されます。 $ や { などの文字列をテンプレートで使用する必要がある場合は、エスケープする必要があります。
理解するには例を見てください。
りーテンプレート文字列は通常の文字列と異なり、複数行に記述することもできます。テンプレート文字列内のスペース、改行、インデントはすべて、生成される文字列にそのまま出力されます。
ただし、単純なテンプレート文字列には依然として多くの制限があります。例:
この目的のために、ラベル テンプレートの概念が導入されます。タグ テンプレートでは、バックティックの前にタグが導入されます。このタグは、カスタマイズされたテンプレート文字列の後に値を返す関数です。上記の
特殊文字の文字列を例として考えてみましょう。 りー label 関数は複数のパラメータを受け取ります。
/**
* Before ES6 字符串拼接
*/
var name = '丁香医生';
var desc = '丁香医生是面向大众的科普性健康类网站';
var html = function(name, desc){
var tpl = '公司名：' + name + '\n'+
'简介：'+ desc;
return tpl;
}タグのパラメータは ['会社名:'、'紹介:']、'ドクター ライラック'、'ドクター ライラックは一般向けの人気科学性的健康 Web サイトです。
このような方法により、制御力が大幅に向上します。上で述べたように、国際化ライブラリとループ ステートメントも含まれます。
ブラウザの互換性
推奨読書:
Bootstrap でテーブルを操作する方法js でミリ秒 + 日 + 時間 + 分秒の変換を実現する方法以上がES6 でのテンプレート文字列の使用の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
