ES6 でのテンプレート文字列の使用の詳細な説明-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-04-14 16:41:13

オリジナル

4053 人が閲覧しました

今回は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 サイトです。

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

ブラウザの互換性