JavaScriptテンプレートリテラルのガイド

ES2015、別名ES6で導入されたテンプレートリテラルは、文字列を宣言する新しい方法を提供しますが、すでに広く普及しているいくつかの新しい興味深い構造も提供します。

テンプレートリテラルの概要

テンプレートリテラルは、ES5以下と比較して斬新な方法で文字列を操作できるようにする新しいES2015 / ES6機能です。

一見した構文は非常に単純で、一重引用符または二重引用符の代わりにバッククォートを使用します。

const a_string = `something`

特に、引用符で作成された通常の文字列にはない多くの機能を提供するため、これらは一意です。

  • 複数行の文字列を定義するための優れた構文を提供します
  • 文字列内の変数と式を補間する簡単な方法を提供します
  • テンプレートタグを使用してDSLを作成できます(DSLはドメイン固有言語を意味し、たとえば、コンポーネントのCSSを定義するためにReact by Styled Componentsで使用されます)

これらのそれぞれについて詳しく見ていきましょう。

複数行の文字列

ES6より前では、2行にまたがる文字列を作成するには、\行末の文字:

const string =
  'first part \
second part'

これにより、2行で文字列を作成できますが、レンダリングされるのは1行だけです。

first part second part

文字列を複数行にレンダリングするには、明示的に追加する必要があります\n次のように、各行の終わりに:

const string =
  'first line\n \
second line'

または

const string = 'first line\n' + 'second line'

テンプレートリテラルを使用すると、複数行の文字列がはるかに簡単になります。

テンプレートリテラルをバッククォートで開いたら、Enterキーを押すだけで、特殊文字を含まない新しい行が作成され、そのままレンダリングされます。

const string = `Hey
this

string
is awesome!`

スペースには意味があるので、これを行うことに注意してください。

const string = `First
                Second`

次のような文字列を作成します。

First
                Second

an easy way to fix this problem is by having an empty first line, and appending the trim() method right after the closing backtick, which will eliminate any space before the first character:

const string = `
First
Second`.trim()

Interpolation

Template literals provide an easy way to interpolate variables and expressions into strings.

You do so by using the ${...} syntax:

const myVariable = 'test'
const string = `something ${myVariable}` //something test

inside the ${} you can add anything, even expressions:

const string = `something ${1 + 2 + 3}`
const string2 = `something ${doSomething() ? 'x' : 'y'}`

Template tags

Tagged templates is one feature that might sound less useful at first for you, but it’s actually used by lots of popular libraries around, like Styled Components or Apollo, the GraphQL client/server lib, so it’s essential to understand how it works.

In Styled Components template tags are used to define CSS strings:

const Button = styled.button`
  font-size: 1.5em;
  background-color: black;
  color: white;
`

In Apollo template tags are used to define a GraphQL query schema:

const query = gql`
  query {
    ...
  }
`

The styled.button and gql template tags highlighted in those examples are just functions:

function gql(literals, ...expressions) {}

this function returns a string, which can be the result of any kind of computation.

literals is an array containing the template literal content tokenized by the expressions interpolations.

expressions contains all the interpolations.

If we take an example above:

const string = `something ${1 + 2 + 3}`

literals is an array with two items. The first is something, the string until the first interpolation, and the second is an empty string, the space between the end of the first interpolation (we only have one) and the end of the string.

expressions in this case is an array with a single item, 6.

A more complex example is:

const string = `something
another ${'x'}
new line ${1 + 2 + 3}
test`

in this case literals is an array where the first item is:

;`something
another `

the second is:

;`
new line `

and the third is:

;`
test`

expressions in this case is an array with two items, x and 6.

The function that is passed those values can do anything with them, and this is the power of this kind feature.

The most simple example is replicating what the string interpolation does, by joining literals and expressions:

const interpolated = interpolate`I paid ${10}€`

and this is how interpolate works:

function interpolate(literals, ...expressions) {
  let string = ``
  for (const [i, val] of expressions.entries()) {
    string += literals[i] + val
  }
  string += literals[literals.length - 1]
  return string
}

More js tutorials: