styled-componentsでも使われてるstyled.divに続くバッククォートが何か知ってる?Tagged Template Literal

styled-componentsでも使われてるstyled.divに続くバッククォートが何か知ってる?Tagged Template Literal

LINEで送る
Pocket

styled-componentsのドキュメントを読むと、こんな書き方がされています。

styled.div`
// css...
`

ちょっと見た目気持ち悪いですが、これはES6のTagged Template Literalというものです。

 

Tagged Template Literalの解説

const ttl = (args: any, a?: any, b?: any, c?:any) => {
  console.dir(args)
  console.log(a)
  console.log(b)
  console.log(c)
}

ttl`hello world`

// ["hello world"]
// undefined
// undefined
// undefined

引数argsには、こうなります。

 

引数a, b, cを受け取りたい時は下記のようにする。

ttl`hello world${1}${2}${3}`
// ["hello world", "", "", ""]
// 1
// 2
// 3

 

可変長引数ならスプレッド構文を使うのがおすすめ

const ttl = (args: any, ...values: any) => {
  console.dir(args)
  console.dir(values)
}
ttl`hello world${1}${2}${3}`
// ["hello world", "", "", ""]
// [1,2,3]

 

使い時を考える

文字列の一部を変換して返したい時

// Tagged Template Literal
const currentYear = (args: any, ...values: any) => {
  return args[0] +values[0].getFullYear() +"年"
}

// 関数
const currentYearFunc = (text: string, date: Date) => { 
  return text +date.getFullYear() +"年" 
}

currentYear`現在は${new Date()}`
currentYearFunc("現在は", new Date())

// 現在は2020年

慣れれば前者の方が読みやすそうです。

LINEで送る
Pocket

フロントエンド開発でお困りのことはありませんか?

フロントエンドの開発支援を行っています。

・Reactの開発をお願いしたい

・コーディング作業を依頼したい

・javascriptライブラリを作って欲しい。

上記以外にも何かありましたらお気軽にお問い合わせください。

コメントを残す