13

ES6タグ付きテンプレートの構文を理解しています。私が見ていないのは、実際の使用感です。jQuery の AJAXの設定のように、オブジェクト パラメーターを渡すよりも優れているのはどのような場合ですか?$.ajax('url', { /*this guy here*/ })

今はトリッキーな構文しか見えませんが、なぜそれが必要なのか、使用するのかわかりません。また、TypeScript チームが (1.5 で) 他の重要な機能の前に実装することを選択したこともわかりました。タグ付き文字列テンプレートの背後にある概念は何ですか?

4

3 に答える 3

10

タグ付きテンプレートを使用して、通常の関数呼び出しよりも表現力の高い API を構築できます。

たとえば、JS 配列に対する SQL クエリの概念実証ライブラリに取り組んでいます。

let admins = sql`SELECT name, id FROM ${users} 
                 WHERE ${user => user.roles.indexOf('admin') >= 0}`

String 補間とは何の関係もないことに注意してください。読みやすくするためにタグ付きテンプレートを使用します。単純な関数呼び出しで直感的に読み取れるものを構築するのは難しいでしょう-次のようなものがあると思います:

let admins = sql("SELECT name, id FROM $users WHERE $filter",
  { $users: users, $filter: (user) => user.roles.contains('admin') })

この例は単なる楽しいサイド プロジェクトですが、タグ付きテンプレートの利点のいくつかを示していると思います。

もう 1 つの例は、おそらくより明白な i18n です。タグ付けされたテンプレートは、入力のロケールに依存したバージョンを挿入できます。

于 2015-07-23T21:47:07.030 に答える
8

Sitepoint の説明を参照してください。

テンプレート文字列仕様の最終段階では、文字列自体の前にカスタム関数を追加して、タグ付きテンプレート文字列を作成します。

...

たとえば、カスタム DOM 要素を挿入しようとする文字列をブロックするコードは次のとおりです。

var items = [];
items.push("banana");
items.push("tomato");
items.push("light saber");
var total = "Trying to hijack your site <BR>";
var myTagFunction = function (strings,...values) {
  var output = "";
  for (var index = 0; index < values.length; index++) {
    var valueString = values[index].toString();

    if (valueString.indexOf(">") !== -1) {
      // Far more complex tests can be implemented here :)
      return "String analyzed and refused!";
    }

    output += strings[index] + values[index];
  }

  output += strings[index]
  return output;
}

result.innerHTML = myTagFunction `You have ${items.length} item(s) in your basket for a total of $${total}`;

タグ付きのテンプレート文字列は、セキュリティ、ローカリゼーション、独自のドメイン固有言語の作成など、さまざまな用途に使用できます。

于 2015-07-23T15:28:41.143 に答える