web-dev-qa-db-ja.com

ES6の関数に続くテンプレートリテラル（バックティック）の目的は何ですか？

GraphQLでは、次のように記述してクエリを定義できます。

const USER_QUERY = gql`
  {
    user(id: 2) {
      name
    }
  }
`

スタイル付きコンポーネントでは、次のようにスタイル付きコンポーネントを定義できます。

const Button = styled.button`
    background-color: papayawhip;
`

この構文は何ですか？テンプレートリテラルを使用すると、${foo}という構文で変数をサブインできることはわかっていますが、これが使用されたことはありません。どんなガイダンスもいただければ幸いです。

javascriptecmascript-6graphqlstyled-componentstemplate-literals
25
Kurt William

これらは タグ付きテンプレートリテラル です。バックパックの前の部分は、文字列を処理するために呼び出される関数への参照です。

関数には変数（${}パーツ）を引数として、また配列に分割された変数を囲む文字列の一部として。関数の戻り値がテンプレートの値になります。この非常に一般化された形式のため、関数を使用してほとんど何でも実行できます。以下は、変数（便宜上、配列に収集されます）を取得し、それらを大文字にして、文字列に戻す、すばやく簡単な例です。

function upperV(strings, ...vars) {
  /* make vars uppercase */
  console.log("vars: ", vars)       // an array of the passed in variables
  console.log("strings:", strings)  // the string parts

  // put them together
  return vars.reduce((str, v, i) => str + v.toUpperCase() + strings[i+1], strings[0]);
}

let adverb = "boldly"
let output = upperV`to ${adverb} split infinitives that no ${'man'} had split before...`;
console.log(output)
25
Mark Meyer

テンプレートリテラルには、タグ付きテンプレートと呼ばれる追加機能があります。それが、開始バックティックの前のプレフィックスです。接頭辞は実際には関数の名前です-関数にはテンプレート文字列の定数部分と補間された値（${}セクション）。結果の文字列を必要に応じて処理できます（ただし、通常は別の文字列である必要はありません）。

タグ付きテンプレートがどのように機能するかについての詳細は MDNのこのページ を参照してください。

14
Chris Tavares