ES 6のテンプレート文字列の天才

ES 6はJavaScriptの未来であり、すでに存在している.これは、言語が現在のネットワークのニーズと競争するために必要な多くの機能をもたらす最終的な仕様です.ES 6のすべての機能はお客様に適していません.このシリーズでは、非常に便利で使用可能な機能を示します.
JavaScriptコードの作成を確認すると、二重引用符ではなく単一引用符で文字列を定義していることがわかります.JavaScriptは使用できます.次の2つの例はまったく同じです.

var animal = "cow";

var animal = 'cow';

私が一重引用符が好きなのは、まず、適切な引用符属性でHTML文字列を組み合わせることが容易になるからです.

// with single quotes, there's no need to 

// escape the quotes around the class value

var but = 'Save';



// this is a syntax error:

var but = "Save";



// this works:

var but = "Save";

現在、エスケープが必要な唯一の時間は、HTMLで一重引用符を使用する場合です.私が唯一考えることができるのは、インラインJavaScriptまたはCSSです.これは、タグに不審なことや絶望的なことをする可能性が高いことを意味します.テキストでも、単一引用符ではなく、印刷を楽しむことができます.
もちろん、HTMLは十分に寛容で、引用符を省略したり、属性の周りに単一引用符を使用したりすることができますが、解析器の許しではなく、人間のために読めるマークを作成するのが好きです.私たちがHTML 5解析器を寛容にしたのは、これを口実にするのではなく、過去に悪いマークを書いたからです.
document.writeのDHTML時代、私はもう苦痛に耐えられず、新しいポップアップウィンドウや他の憎らしいフレームワークセットにドキュメントを作成し、エスケープ文字を使いたくなくなりました.エディタで色符号化を行う前に、三元グループが必要になることもあります.めちゃくちゃだ.
式を文字列で置換しますか?
私が引用符をもっと好きになったもう一つの理由は、非常に重要な大手サイトにPHPをたくさん書くのに多くの時間を費やしたからです.PHPでは、一重引用符と二重引用符の間に違いがあります.一重引用符文字列には置換はありませんが、二重引用符文字列にはありません.これは、解析器が文字列を巡回して値を置き換える必要がないため、PHP 3とPHP 4の時代には、単一引用符を使用する速度がずっと速いことを意味します.これはどういう意味の例ですか.

 The animal is $animal and its sound is $sound

 

  echo "The animal is $animal and its sound is $sound";

  // => The animal is cow and its sound is moo

?>

JavaScriptにはこのような代替はありません.これは、同じ結果を得るために文字列を直列に接続しなければならない理由です.常に引用符にジャンプまたはジャンプする必要があるため、これは非常に面倒です.

var animal = 'cow';

var sound = 'moo';



alert('The animal is ' + animal + ' and its sound is ' +

 sound);

// => "The animal is cow and its sound is moo"

多行混乱
長い文字列と複雑な文字列は、特に多くのHTMLを組み立てるときに混乱します.最も可能性のあるのは、整理ツールが遅かれ早かれ行末に+を加えた後に空白を残すと文句を言うことです.これはJavaScriptに複数行の文字列がないという問題に基づいています.

// this doesn't work

var list = '


  
Buy Milk

  
Be kind to Pandas

  
Forget about Dre

';

 

// This does, but urgh… 

var list = '
\

  
Buy Milk
\

  
Be kind to Pandas
\

  
Forget about Dre
\

';

 

// This is the most common way, and urgh, too…

var list = '
' +

'  
Buy Milk
' +

'  
Be kind to Pandas
' +

'  
Forget about Dre
' +

'
';

クライアントテンプレートソリューション
JavaScriptの文字列処理と接続の混乱の問題を解決するために、私たちはずっと仕事をしています.私たちはライブラリを作成しました.HTMLテンプレートライブラリが多く、その中でMustache.jsは創始的である可能性がある.これらはすべて自分の、非標準化の文法に従い、このような思想の枠組みの中で役割を果たしている.これは、Markdownでコンテンツを作成し、「Markdown」の意味が異なることに気づいたようなものです.
テンプレート文字列の入力
ES 6の出現とその標準化に伴い、JavaScriptは現在、文字列の処理に新しい障害があるため、JavaScriptを喜ばせることができます.Template Stringsです.現在のブラウザでは、Chrome 44+、Firefox 38+、Microsoft Edge、WebKitが内蔵されています.残念なことに、Safariブラウザはまだありませんが、そこに到着します.
テンプレート文字列の天才的な点は、HTMLでも通常のテキストでも使用されない新しい文字列区切り記号(`)を使用することです.
このコードを使用すると、JavaScriptで文字列式を置換できます.

var animal = 'cow';

var sound = 'moo';

 

alert(`The animal is ${animal} and its sound is ${sound}`);

// => "The animal is cow and its sound is moo"

${}構造は、任意の戻り値JavaScript式を受け入れることができる.たとえば、オブジェクトのプロパティを計算またはアクセスできます.

var out = `ten times two totally is ${ 10 * 2 }`;

// => "ten times two totally is 20"

 

var animal = {

  name: 'cow',

  ilk: 'bovine',

  front: 'moo',

  back: 'milk',

}

alert(`

  The ${animal.name} is of the 

  ${animal.ilk} ilk, 

  one end is for the ${animal.front}, 

  the other for the ${animal.back}

`);

// => 

/*

  The cow is of the 

  bovine ilk, 

  one end is for the moo, 

  the other for the milk

*/

最後の例では、複数行の文字列が問題ではないことも示します.
タグテンプレート
テンプレート文字列を使用してできるもう1つのことは、呼び出され、文字列をパラメータとする関数の名前であるラベルを追加することです.たとえば、encodeURIComponentという恐ろしい名前を常に使用することなく、生成されたURL文字列を符号化できます.

function urlify (str) {

  return encodeURIComponent(str);

}

 

urlify `http://beedogs.com`;

// => "http%3A%2F%2Fbeedogs.com"

urlify `woah$£$%£^$"`;

// => "woah%24%C2%A3%24%25%C2%A3%5E%24%22"

 

// nesting also works:

 

var str = `foo ${urlify `&&`} bar`;

// => "foo %26%26 bar"

これは可能ですが、文字列強制に暗黙的な配列に依存します.関数に送信されるパラメータは文字列ではなく、文字列と値の配列です.ここに表示する方法を使用すると、便宜上文字列に変換されますが、正しい方法は配列メンバーに直接アクセスすることです.
テンプレート文字列から文字列と値を取得
タグ関数では、完全な文字列だけでなく、その部分も取得できます.

function tag (strings, values) {

  console.log(strings);

  console.log(values);

  console.log(strings[1]);

}

tag `you ${3+4} it`;

/* =>

 

Array [ "you ", " it" ]

7

it

 

*/

元の文字列のセットも用意されています.これは、制御文字を含む文字列のすべての文字を取得することを意味します.たとえば、
を使用して改行を追加するとします.文字列には2つの精度のスペースが表示されますが、元の文字列には
文字が表示されます.

function tag (strings, values) {

  console.log(strings);

  console.log(values);

  console.log(strings[1]);

  console.log(string.raw[1]);

}

 

tag `you ${3+4} 
it`;

/* =>

 

Array [ "you ", "  it" ]

7

 

it

 
it

*/

結論
テンプレート文字列は、ES 6ですぐに使用できるいくつかの小さな利点の1つです.古いブラウザをサポートする必要がある場合は、ES 6をES 5に変換することは当然です.例えばfeaturetestsを使用することができる.ioなどのライブラリまたは次のコードは、テンプレート文字列サポートの機能テストを行います.

var templatestrings = false;

try {

  new Function( "`{2+2}`" );

  templatestrings = true;

} catch (err) {

  templatestrings = false;

} 

 

if (templatestrings) {

    // …

}

テンプレート文字列の詳細は、次のとおりです.

ECMAScript 6 Powerチュートリアル:テンプレート文字列

ES 6テンプレート文字列を用いて文字

を取得する.

ES 6の詳細:テンプレート文字列

ECMAScript 6の新しい文字列機能

ES 6の理解:テンプレート文字列

ES 6テンプレート文字列HTMLテンプレート

を使用
JavaScriptを使用した操作の詳細
本文はMicrosoft技術伝播者が開発したWeb開発シリーズの文章の一部であり、内容は実用的なJavaScript学習、オープンソースプロジェクト、および相互運用性のベストプラクティスに関連し、Microsoft Edgeブラウザと新しいEdgeHTMLプレゼンテーションエンジンを含む.
dev.modernの使用を奨励します.IE上の無料ツールは、Microsoft Edge(Windows 10のデフォルトブラウザ)を含むブラウザとデバイス間でテストされます.

サイトをスキャンして、古いライブラリ、レイアウトの問題、アクセス性を検索します.

Mac、Linux、Windowsで仮想マシン

を使用

独自のデバイスでMicrosoft Edge

をリモートでテスト

GitHubでのエンコーディングラボ:ブラウザにまたがるテストとベストプラクティス

デルのエンジニアと広報担当者は、Microsoft EdgeとWebプラットフォームで深い技術学習を行いました.

Microsoft Edge Web Summit 2015(新しいブラウザ、新しいサポートされているネットワークプラットフォーム標準、JavaScriptコミュニティからのゲストスピーカーが何を期待しているか)

わあ、MacとLinuxでEdgeとIEをテストできます!(Rey Bangoより)

ネットワークを中断することなくJavaScript(Christian Heilmannより抜粋)

を進める

ネットワークを正常に動作させるエッジレンダリングエンジン(Jacob Rossiから)

WebGLを使用して3 Dレンダリングを解放する(Vorlon.jsおよびBabylon.jsプロジェクトを含むDavid Catuheから)

管理WebアプリケーションおよびWebプラットフォームの革新(マニホールドプロジェクトを含むKevin HillおよびKiril Seksenovから)

Webプラットフォームの無料プラットフォームツールとリソース:

Linux、Mac OS、WindowsのVisual Studioコード

に適用

Nodeを使用する.jsは符号化を行い、Azureで

を無料で試用する.
翻訳:https://code.tutsplus.com/tutorials/the-genius-of-template-strings-in-es6--cms-24915