JavaScriptに関する興味深いクールな事実：タグ付きテンプレートリテラル

著者：Andy Chen
翻訳者：フロントエンドXiaozhi
出典：medium

夢や乾物があれば、 WeChatで[Great Move to the World]を検索して、朝の早い時間にまだ皿洗いをしているこのShawanzhiに注目してください。

この記事GitHubhttps ://github.com/qq449245884/xiaozhiが含まれています。完全なテストサイト、資料、および一次メーカーへのインタビュー用の一連の記事があります。

React.jsでウェブページを開発するときにstyled-componentsと呼ばれる非常に便利なコンポーネントを使用したかどうかはわかりません。これstyled-componentsは要素スタイルを生成するために使用されるコンポーネントであり、JSXでCSSを記述して** CSS- IN-JS **のスキルは、styled-componentの公式ドキュメントで次のように述べられているため、非常に多く言われています。

この珍しいバックティック構文は、タグ付きテンプレートリテラルと呼ばれる新しいJavaScript機能です。

このタグ付けされたテンプレートリテラルは、以前styled-componentsに要素methodが生成されることは明らかだったので、少し興味をそそられましたが、function 「通常の」スキルは見られませんでした。 ES6への新しいアプローチで、今まで知りませんでした。ES6についてはほとんど知らないとしか言えません。styled-compoentscall function

ここに画像の説明を挿入

テンプレート文字列

私がtagged template literal話し、私はそれについて最初に話さなければなりませんtemplate strings。ES6を使用するすべての人は、ES6が非常に便利な方法でtemplate stringsある。これにより、以前の結合された文字列でスプライスするために長いプラス記号を使用する必要がなくなります。


// ES5
var myName = '前端小智'
console.log("Hello " + myName + '!')
// 'Hello 前端小智!'

// ES6
const myName = '前端小智'
console.log(`Hello ${
      
      myName}`)
// 'Hello 前端小智!'

テンプレート文字列でさえ、改行を実現するために複数行の効果を利用できます。

// ES5
console.log('Hello\n' + '前端小智')
// Hello   
// 前端小智


// Es6
console.log(`
Hello
前端小智
`)
// Hello   
// 前端小智

上記の文章を見ると、すぐに文章と非常に似てmulti-lineいると感じますか？styled-components

実際、テンプレート文字列の記述は、次に説明tagged template literalするため、タグ付きテンプレートリテラルを最初に言及する必要があります。

タグ付きテンプレートリテラル

要するに、タグ付きテンプレートリテラルを使用すると、別の方法でそれを行うことができますfunction call。通常、括弧を使用しfunction callて行われ、使用functionされるパラメータが括弧内に渡さtagged template literalれることがわかっていますが、関数呼び出しtemplate、書き込みメソッドを使用できます。上で紹介したテンプレート文字列とまったく同じであると言えます。

ここに画像の説明を挿入

上記の例では、出力形式が少し奇妙であることがわかります。これは単純な文字列ではなく配列です。これは、JavaScripttemplate stringがtemplate stringの変数をキャプチャできるように記録する必要があるためです。結局のところ、function call最も重要なのはパラメータが渡されることです。

この機能を知っているので、次に、次のようにfunction、ます。

ここに画像の説明を挿入

予期せぬことに、完全な文字列を表示する方法はまだありません。実際、tagged template literalのメソッドfunction callを使用する場合、最初のパラメータはテンプレート文字列内の文字列のセット、raw stringsつまり、変数を除く他の文字列のコレクションであり、配列になります。、および残りのパラメータは次のとおりです。テンプレート文字列によって取り込まれた変数に従って、1つずつリストされます。

例：合計2つの変数がテンプレート文字列で渡された場合、これら2つの変数はfunction、次のように2番目と3番目のパラメーターとして取り込まれます。

ここに画像の説明を挿入

しかし、これは非常に醜く、これで渡される変数の数を予測することはほとんどできませんtemplate strings。、これfunctionをより見栄えよくしたい場合は、変数を配列に変換するだけrest parameterのES6ます。変数を使用する場合は、変数を分解することを忘れないでください。例は次のとおりです。

[外部リンク画像の転送に失敗しました。ソースサイトにヒル防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします（img-J6KazRo7-1645660636484）（/ img / bVcXZBq）]

要約する

今回は別のfunction call方法をので、ぜひ集めていただきたいと思います。

Shawanzhiです。新年は一緒にブラッシングしましょう。

コードのデプロイ後に存在する可能性のあるバグをリアルタイムで知ることはできません。これらのバグを後で解決するために、ログのデバッグに多くの時間が費やされます。ちなみに、便利なバグ監視ツールであるFundebugをお勧めします。

オリジナル：https：//medium.com/onedegree-tech-blog/javascript-%E6%9C%89%E8%B6%A3%E7%A%84%E5%86%B7%E7%9F%A5%E8 ％AD％98-tagged-template-literals-5ca9db71f066

ここに画像の説明を挿入

と通信する

夢や乾物があれば、 WeChatで[Great Move to the World]を検索して、朝の早い時間にまだ皿洗いをしているこのShawanzhiに注目してください。

この記事はGitHubhttps://github.com/qq449245884/xiaozhiに含まれており、一次メーカーへのインタビュー用の完全なテストサイト、資料、および一連の記事があります。