ES6 でのテンプレート文字列の使用の詳細な説明

今回は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 式 (関数または演算)、または別のテンプレート文字列を指定でき、その計算結果は文字列として出力されます。 $ や { などの文字列をテンプレートで使用する必要がある場合は、エスケープする必要があります。

理解するには例を見てください。

りー

テンプレート文字列は通常の文字列と異なり、複数行に記述することもできます。テンプレート文字列内のスペース、改行、インデントはすべて、生成される文字列にそのまま出力されます。

ただし、単純なテンプレート文字列には依然として多くの制限があります。例:

特殊な文字列を自動的にエスケープすることはできません。 (これは簡単にインジェクション攻撃につながる可能性があります)

1. は国際化ライブラリではうまく機能しません (つまり、数値、日付、テキストなどを特定の言語でフォーマットしません)

2. 組み込みループはありません構文、(条件文もサポートされていません。テンプレートのネスト方法のみ使用できます)

タグ付きテンプレート

この目的のために、ラベル テンプレートの概念が導入されます。タグ テンプレートでは、バックティックの前にタグが導入されます。このタグは、カスタマイズされたテンプレート文字列の後に値を返す関数です。上記の

特殊文字

の文字列を例として考えてみましょう。 りー label 関数は複数のパラメータを受け取ります。

最初のパラメータは文字列リテラル (つまり、変数置換なしの値) を含む配列です

1. 以下のパラメータは置換後の変数値です
変更例1

/**
 * Before ES6 字符串拼接
 */
var name = '丁香医生';
var desc = '丁香医生是面向大众的科普性健康类网站';
var html = function(name, desc){
  var tpl = '公司名：' + name + '\n'+
      '简介：'+ desc;
  return tpl;
}

タグのパラメータは ['会社名:'、'紹介:']、'ドクター ライラック'、'ドクター ライラックは一般向けの人気科学性的健康 Web サイトです。

このような方法により、制御力が大幅に向上します。上で述べたように、国際化ライブラリとループ ステートメントも含まれます。

ブラウザの互換性

サーバー側、io.js は

1. ブラウザ側、FF34+、chrome 41+

2. mobile IOS 8、Android 4.4
IE Tech Previewをサポートしています
このケースを読んだ後は、あなたはそれをマスターしたと思いますさらにエキサイティングな方法については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Bootstrap でテーブルを操作する方法

js でミリ秒 + 日 + 時間 + 分秒の変換を実現する方法

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