今のところES6：テンプレート文字列

ES6テンプレートリテラル：JavaScript文字列への最新のアプローチ

キーハイライト：

• ES6（ECMAScript 2015）はJavaScriptを大幅に強化し、最新のWeb開発に重要な機能を導入します。
テンプレートリテラルは、バックテック（ `）をデリミターとして使用して、JavaScriptで文字列処理を革新します。 埋め込まれた表現とマルチライン文字列を有効にします
• タグ関数は、テンプレートリテラルに加えて、結果の文字列のカスタム処理（たとえば、URLエンコード）を可能にします。
最新のブラウザで広くサポートされていますが、ES6は古いブラウザーの場合はES5に輸送できます。 機能検出により、互換性が保証されます
• （この記事はMicrosoft Web Developmentシリーズの一部です。SitePointをサポートしてくれたパートナーに感謝します。）
ES6はJavaScriptの現在と未来です。 このシリーズでは、その最も便利な機能を探ります。 私のコーディングスタイルは、文字列に一貫して単一の引用符を使用しており、HTML文字列構築に利点を提供します：

エスケープキャラクターを回避すると、読みやすさが向上します。 HTMLは柔軟ですが、人間が読めるコードの優先順位付けが重要です。 クリーナーソリューションを評価するために、DHTMLの複雑さで過去の経験から学びました。

発現置換と読みやすさの向上：

<code class="language-javascript">// Single quotes simplify HTML attribute quoting
var buttonText = 'Save'; </code>

単一の引用符に対する私の好みは、PHPのバックグラウンドに由来し、可変置換を防ぎ、パフォーマンスが向上します。 JavaScriptは以前にこの機能を欠いていたため、文字列の連結が必要です：

これは、長い文字列で面倒になり、多くの場合、糸くずのエラーにつながります。 JavaScriptのネイティブマルチラインストリングの欠如は、さらに問題を複雑にします テンプレートリテラル：解決策：

ES6テンプレートリテラルはこれらの問題を解決します。 バックティック（ `）は、発現置換とマルチライン文字列を許可します：

<code class="language-javascript">var animal = 'cow';
var sound = 'moo';

alert('The animal is ' + animal + ' and its sound is ' + sound); </code>

constructはjavaScript式を処理し、計算を可能にし、オブジェクトプロパティアクセスを有効にします：

マルチライン文字列は楽になりました：

<code class="language-javascript">var animal = 'cow';
var sound = 'moo';

alert(`The animal is ${animal} and its sound is ${sound}`);</code>

タグ付きテンプレート：${}

<code class="language-javascript">var output = `ten times two is ${10 * 2}`;</code>

テンプレートリテラルは関数で「タグ付け」でき、カスタム文字列操作を有効にします：

<code class="language-javascript">var list = `
- Buy Milk
- Be kind to Pandas
- Forget about Dre
`;</code>

この関数は引数として文字列を受信し、URLエンコードなどの操作を可能にします。 タグ関数内の文字列部品へのアクセス

：

タグ関数は、文字列部分と埋め込まれた式の両方を別々の引数として受信します。

<code class="language-javascript">function urlify(str) {
  return encodeURIComponent(str);
}

urlify`http://example.com`;</code>

プロパティは、エスケープシーケンスを含む生の文字列パーツを提供します。

ブラウザの互換性と機能検出：

ほとんどの最新のブラウザはテンプレートリテラルをサポートしていますが、ES6の輸送（例：BABELの使用）が古いブラウザーに必要です。 機能の検出により、互換性が保証されます：

<code class="language-javascript">// Single quotes simplify HTML attribute quoting
var buttonText = 'Save'; </code>

さらなる読み取りとリソース：（簡潔にするためにリンクが省略されていますが、元のテキストにはテンプレートリテラルに関するさまざまな記事へのリンクが含まれていました。）

Microsoft Web Development Series：（ツールや学習資料を含むMicrosoftのWeb開発リソースの詳細は、元のテキストに含まれていましたが、簡潔にするためにここで省略されています。）

よくある質問：（元のテキストには、テンプレートリテラルに関する包括的なFAQセクションが含まれていました。これは、長さの制約のためにここで省略されています。

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