JavaScriptのテンプレートリテラルを理解する

著者はCOVID-19救済基金を選択し、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

ECMAScript仕様（ES6）の 2015エディションは、JavaScript言語にテンプレートリテラルを追加しました。 テンプレートリテラルは、JavaScript で文字列を作成する新しい形式であり、複数行の文字列をより簡単に作成したり、プレースホルダーを使用して文字列に式を埋め込んだりするなど、多くの強力な新機能を追加します。 さらに、タグ付きテンプレートリテラルと呼ばれる高度な機能を使用すると、文字列内の式に対して操作を実行できます。 これらの機能はすべて、開発者としての文字列操作のオプションを増やし、URLまたはHTML要素をカスタマイズする関数に使用できる動的文字列を生成できるようにします。

この記事では、単一/二重引用符で囲まれた文字列とテンプレートリテラルの違いについて説明し、変数の値に応じて変化する複数行の文字列や動的な文字列など、さまざまな形の文字列を宣言するさまざまな方法を実行します。または式。 次に、タグ付けされたテンプレートについて学び、それらを使用するプロジェクトの実際の例をいくつか見ていきます。

文字列の宣言

このセクションでは、一重引用符と二重引用符で文字列を宣言する方法を確認してから、テンプレートリテラルで同じことを行う方法を示します。

JavaScriptでは、文字列は一重引用符（' '）で記述できます。

const single = 'Every day is a good day when you paint.'

文字列は二重引用符で書くこともできます（" "）：

const double = "Be so very light. Be a gentle whisper."

あるタイプの文字列で補間を許可し、他のタイプでは許可しない他の言語とは異なり、JavaScriptには一重引用符または二重引用符の文字列に大きな違いはありません。 このコンテキストでは、補間とは、文字列の動的な部分としてのプレースホルダーの評価を指します。

一重引用符または二重引用符で囲まれた文字列の使用は、主に個人的な好みと慣習に帰着しますが、組み合わせて使用すると、各タイプの文字列は、独自のタイプの引用符をエスケープするだけで済みます。

// Escaping a single quote in a single-quoted string
const single = '"We don\'t make mistakes. We just have happy accidents." - Bob Ross'

// Escaping a double quote in a double-quoted string
const double = "\"We don't make mistakes. We just have happy accidents.\" - Bob Ross"

console.log(single);
console.log(double);

ここでのlog()メソッドの結果は、同じ2つの文字列をconsoleに出力します。

Output"We don't make mistakes. We just have happy accidents." - Bob Ross
"We don't make mistakes. We just have happy accidents." - Bob Ross

一方、テンプレートリテラルは、文字列をバッククォート文字またはアクサングラーブ（`）で囲むことによって記述されます。

const template = `Find freedom on this canvas.`

一重引用符または二重引用符をエスケープする必要はありません。

const template = `"We don't make mistakes. We just have happy accidents." - Bob Ross`

ただし、バックティックをエスケープする必要があります。

const template = `Template literals use the \` character.`

テンプレートリテラルは通常の文字列が実行できるすべてのことを実行できるため、プロジェクト内のすべての文字列をそれらに置き換えて、同じ機能を使用できる可能性があります。 ただし、コードベースで最も一般的な規則は、テンプレートリテラルの追加機能を使用する場合にのみテンプレートリテラルを使用し、他のすべての単純な文字列には一貫して一重引用符または二重引用符を使用することです。 この標準に従うと、別の開発者が調べた場合にコードが読みやすくなります。

一重引用符、二重引用符、およびバッククォートを使用して文字列を宣言する方法を確認したので、テンプレートリテラルの最初の利点である複数行の文字列の記述に進むことができます。

複数行の文字列

このセクションでは、最初にES6の前に複数行の文字列が宣言された方法を実行し、次にテンプレートリテラルがこれをどのように簡単にするかを確認します。

元々、テキストエディタで複数行にまたがる文字列を記述したい場合は、連結演算子を使用していました。 ただし、これは必ずしも単純なプロセスではありませんでした。 次の文字列連結は、複数の行にまたがっているように見えました。

const address = 
  'Homer J. Simpson' + 
  '742 Evergreen Terrace' + 
  'Springfield'

これにより、文字列をより小さな行に分割し、テキストエディタで複数の行に含めることができる場合がありますが、文字列の出力には影響しません。 この場合、文字列はすべて1行になり、改行やスペースで区切られません。 addressをコンソールに記録すると、次のようになります。

OutputHomer J. Simpson742 Evergreen TerraceSpringfield

バックスラッシュ文字（\）を使用して、文字列を複数の行に続けることができます。

const address =
  'Homer J. Simpson\
  742 Evergreen Terrace\
  Springfield'

これにより、インデントは空白として保持されますが、文字列は出力の1行に残ります。

OutputHomer J. Simpson  742 Evergreen Terrace  Springfield

改行文字（\n）を使用して、真の複数行の文字列を作成できます。

const address = 
  'Homer J. Simpson\n' + 
  '742 Evergreen Terrace\n' + 
  'Springfield'

コンソールにログインすると、次のように表示されます。

OutputHomer J. Simpson
742 Evergreen Terrace
Springfield

ただし、改行文字を使用して複数行の文字列を指定すると、直感に反する場合があります。 対照的に、テンプレートリテラルを使用して複数行の文字列を作成する方がはるかに簡単です。 連結したり、改行文字を使用したり、円記号を使用したりする必要はありません。 ENTERを押して、文字列を複数行に書き込むだけで、デフォルトで機能します。

const address = `Homer J. Simpson
742 Evergreen Terrace
Springfield`

これをコンソールに記録する出力は、入力と同じです。

OutputHomer J. Simpson
742 Evergreen Terrace
Springfield

インデントは保持されるため、不要な場合は文字列内の追加の行をインデントしないことが重要です。 たとえば、次のことを考慮してください。

const address = `Homer J. Simpson
                 742 Evergreen Terrace
                 Springfield`

この行の記述スタイルにより、コードがより人間に読めるようになる可能性がありますが、出力は次のようにはなりません。

OutputHomer J. Simpson
                 742 Evergreen Terrace
                 Springfield

複数行の文字列について説明したので、次のセクションでは、さまざまな文字列宣言を使用して式を値に補間する方法について説明します。

式の補間

ES6より前の文字列では、連結を使用して、変数または式を含む動的文字列を作成していました。

const method = 'concatenation'
const dynamicString = 'This string is using ' + method + '.'

コンソールにログインすると、次のようになります。

OutputThis string is using concatenation.

テンプレートリテラルを使用すると、式をプレースホルダーに埋め込むことができます。 プレースホルダーは${}で表され、中括弧内はJavaScriptとして扱われ、括弧外は文字列として扱われます。

const method = 'interpolation'
const dynamicString = `This string is using ${method}.`

dynamicStringがコンソールに記録されると、コンソールに次のように表示されます。

OutputThis string is using interpolation.

文字列に値を埋め込む一般的な例の1つは、動的URLを作成する場合です。 連結では、これは面倒な場合があります。 たとえば、次の例では、 function を宣言して、OAuthアクセス文字列を生成します。

function createOAuthString(host, clientId, scope) {
  return host + '/login/oauth/authorize?client_id=' + clientId + '&scope=' + scope
}

createOAuthString('https://github.com', 'abc123', 'repo,user')

この関数をログに記録すると、コンソールに次のURLが生成されます。

Outputhttps://github.com/login/oauth/authorize?client_id=abc123&scope=repo,user

文字列補間を使用すると、文字列の開閉と連結演算子の配置を追跡する必要がなくなります。 テンプレートリテラルを使用した同じ例を次に示します。

function createOAuthString(host, clientId, scope) {
  return `${host}/login/oauth/authorize?client_id=${clientId}&scope=${scope}`
}

createOAuthString('https://github.com', 'abc123', 'repo,user')

これは、連結の例と同じ出力になります。

Outputhttps://github.com/login/oauth/authorize?client_id=abc123&scope=repo,user

テンプレートリテラルでtrim（）メソッドを使用して、文字列の最初または最後の空白を削除することもできます。 たとえば、次の例では矢印機能 HTMLを作成するには[1]

エレメント

カスタマイズされたリンク付き：

const menuItem = (url, link) =>
  `
<li>
  <a href="${url}">${link}</a>
</li>
`.trim()

menuItem('https://google.com', 'Google')

結果はすべての空白が削除され、要素が正しくレンダリングされるようになります。

Output<li>
  <a href="https://google.com">Google</a>
</li>

この2つの数値の合計の例のように、変数だけでなく、式全体を補間できます。

const sum = (x, y) => x + y
const x = 5
const y = 100
const string = `The sum of ${x} and ${y} is ${sum(x, y)}.`

console.log(string)

このコードは、sum関数と、変数xおよびyを定義し、関数と変数の両方を文字列で使用します。 ログに記録された結果には、次の情報が表示されます。

OutputThe sum of 5 and 100 is 105.

これは、文字列内の条件を許可する三元演算子で特に役立ちます。

const age = 19
const message = `You can ${age < 21 ? 'not' : ''} view this page`
console.log(message)

ここに記録されたメッセージは、ageの値が21を上回っているか下回っているかに応じて変化します。 この例では19であるため、次の出力がログに記録されます。

OutputYou can not view this page

これで、式の補間に使用するときにテンプレートリテラルがどのように役立つかがわかりました。 次のセクションでは、タグ付きテンプレートリテラルを調べて、プレースホルダーに渡された式を処理することにより、これをさらに一歩進めます。

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

テンプレートリテラルの高度な機能は、タグ付きテンプレートリテラルの使用です。これはテンプレートタグと呼ばれることもあります。 タグ付きテンプレートは、テンプレートリテラルを解析するタグ関数で始まり、動的文字列の操作と返送をより細かく制御できます。

この例では、タグ付きテンプレートを操作する関数として使用するtag関数を作成します。 文字列リテラルは、ここではstringsという名前の関数の最初のパラメーターであり、文字列に補間された式は、RESTパラメーターを使用して2番目のパラメーターにパックされます。 パラメータをコンソールアウトして、パラメータに含まれる内容を確認できます。

function tag(strings, ...expressions) {
  console.log(strings)
  console.log(expressions)
}

tag関数をタグ付きテンプレート関数として使用し、次のように文字列を解析します。

const string = tag`This is a string with ${true} and ${false} and ${100} interpolated inside.`

stringsとexpressionsをコンソールログに記録しているので、これが出力になります。

Output(4) ["This is a string with ", " and ", " and ", " interpolated inside."
(3) [true, false, 100]

最初のパラメータstringsは、すべての文字列リテラルを含むarrayです。

• "This is a string with "
• " and "
• " and "
• " interpolated inside."

この引数で使用できるrawプロパティもstrings.rawにあり、エスケープシーケンスが処理されていない文字列が含まれています。 たとえば、/nは文字/nであり、改行にエスケープされません。

2番目のパラメーター...expressionsは、すべての式で構成されるRESTパラメーター配列です。

• true
• false
• 100

文字列リテラルと式は、パラメータとしてタグ付きテンプレート関数tagに渡されます。 タグ付きテンプレートは文字列を返す必要がないことに注意してください。 それらの値を操作して、任意のタイプの値を返すことができます。 たとえば、次のreturnsNull関数のように、関数ですべてを無視してnullを返すようにすることができます。

function returnsNull(strings, ...expressions) {
  return null
}

const string = returnsNull`Does this work?`
console.log(string)

string変数をログに記録すると、次のようになります。

Outputnull

タグ付きテンプレートで実行できるアクションの例は、各式をHTMLタグでラップする場合など、各式の両側に変更を適用することです。 各式に<strong>と</strong>を追加するbold関数を作成します。

function bold(strings, ...expressions) {
  let finalString = ''

  // Loop through all expressions
  expressions.forEach((value, i) => {
    finalString += `${strings[i]}<strong>${value}</strong>`
  })

  // Add the last string literal
  finalString += strings[strings.length - 1]

  return finalString
}

const string = bold`This is a string with ${true} and ${false} and ${100} interpolated inside.`

console.log(string)

このコードは、forEachメソッドを使用してexpressions配列をループし、太字の要素を追加します。

OutputThis is a string with <strong>true</strong> and <strong>false</strong> and <strong>100</strong> interpolated inside.

人気のあるJavaScriptライブラリには、タグ付きテンプレートリテラルの例がいくつかあります。 graphql-tag ライブラリは、gqlタグ付きテンプレートを使用して、 GraphQL クエリ文字列を解析してGraphQLが理解する抽象構文ツリー（AST）にします。

import gql from 'graphql-tag'

// A query to retrieve the first and last name from user 5
const query = gql`
  {
    user(id: 5) {
      firstName
      lastName
    }
  }
`

タグ付きテンプレート関数を使用する別のライブラリはstyled-componentsです。これにより、通常の DOM要素から新しいReactコンポーネントを作成し、追加のCSSスタイルを適用できます。 彼らに：

import styled from 'styled-components'

const Button = styled.button`
  color: magenta;
`

// <Button> can now be used as a custom component

タグ付きテンプレートリテラルで組み込みのString.rawメソッドを使用して、エスケープシーケンスが処理されないようにすることもできます。

const rawString = String.raw`I want to write /n without it being escaped.`
console.log(rawString)

これにより、以下がログに記録されます。

OutputI want to write /n without it being escaped.

結論

この記事では、一重引用符と二重引用符で囲まれた文字列リテラルを確認し、テンプレートリテラルとタグ付きテンプレートリテラルについて学習しました。 テンプレートリテラルは、文字列内の式を補間し、連結やエスケープなしで複数行の文字列を作成することにより、多くの一般的な文字列タスクを簡素化します。 テンプレートタグは、GraphQLやstyled-componentsなど、多くの一般的なライブラリで使用されているテンプレートリテラルの便利な高度な機能でもあります。

JavaScriptでの文字列の詳細については、JavaScriptで文字列を操作する方法およびJavaScriptで文字列のインデックスを作成、分割、操作する方法をご覧ください。