JavaScriptでテンプレートリテラルを理解するためのパス

2015年にリリースされたECMAScript仕様（ES6）は、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では、このような文字列に大きな違いはありません。他の言語では、文字列を宣言するときに異なる引用符を使用することは、たとえば、ある種類の文字列は補間できるが、他の種類の文字列は補間できないことを意味する場合があります。ここでは、「補間」とは、文字列の動的部分の役割を果たし、結果の文字列値の形成に関与するプレースホルダー式の値を計算する機能を意味します。



一重引用符または二重引用符で宣言するときに使用する文字列は、主に個人的な好みとコーディング規則の問題です。ただし、これらのタイプの引用符のいずれかで区切られた文字列に同じタイプの引用符が含まれている場合は、エスケープする必要があります。そのような文字列での異なる種類の引用は、エスケープする必要はありません。

//     ,   
const single = '"We don\'t make mistakes. We just have happy accidents." - Bob Ross'

//     ,   
const double = "\"We don't make mistakes. We just have happy accidents.\" - Bob Ross"

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

方法のペアを呼び出すことlog()になります送信されている2つの同一の行にコンソール。

"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に定数を出力すると、次のように表示されます。

Homer J. Simpson742 Evergreen TerraceSpringfield

コードエディタでこのような行を作成する別の方法\は、行フラグメントの最後に配置されるバックスラッシュ文字（）を使用することです。その後、新しい行に新しいフラグメントが配置されます。

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

このアプローチでは、たとえば、行の断片の前のスペースは保持されますが、変数の値は、コンソールに出力された場合、再び1行で表されます。

Homer J. Simpson  742 Evergreen Terrace  Springfield

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

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

コンソールaddressに保存されている文字列値を表示する場合、この値は複数行にまたがります。

Homer J. Simpson
742 Evergreen Terrace
Springfield

ただし、新行文字を使用して複数行の文字列を作成することは、特に便利で簡単ではありません。一方、テンプレートリテラルを使用して複数行の文字列を作成する方がはるかに簡単で便利です。文字列を連結する必要はなく、newlineやbackslashを使用する必要もありません。テンプレートリテラルを使用して複数行の文字列を作成するには、非常に簡単です。行の次のフラグメントの終わりで、キーを押してEnter、テンプレートリテラルの次の行を入力し続けます。

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

この定数をコンソールに出力すると、テキストはエディターと同じようになります。

Homer J. Simpson
742 Evergreen Terrace
Springfield

ここで、コードの整列に使用されるバッククォートの間にスペースがある場合、これらのスペースは結果のテンプレートリテラルに含まれることに注意してください。次の例を考えてみましょう。

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

このスタイルのコーディングでは読みやすくなりますが、出力後にコンソールに表示されるものはあまり魅力的ではありません。

Homer J. Simpson
                 742 Evergreen Terrace
                 Springfield

ここで、複数行の文字列を扱ったので、さまざまな式を評価した結果をさまざまな方法で宣言された文字列に埋め込む方法について説明します。つまり、式の補間について説明します。

式の補間

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

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

dynamicStringコンソールに 出力すると、次のようになります。

This string is using concatenation.

テンプレートリテラルを使用する場合、プレースホルダーを使用して式を文字列に埋め込むことができます。プレースホルダーはビューコンストラクト${}です。この場合、中括弧に含まれるものはすべてJavaScriptコードと見なされ、この構造の外側にあるものはすべて文字列と見なされます。

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

dynamicStringコンソールに 出力すると、次の結果が得られます。

This string is using interpolation.

文字列に値を埋め込む一般的な例は、動的URLの作成です。この目的で連結を使用すると、面倒で不便な構造になります。たとえば、OAuthアクセス文字列を生成する関数は次のとおりです。

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

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

この関数の結果をコンソールに出力すると、次のようになります。

https://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')

関数の結果は次のようになります。

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

trim（） メソッドを使用して、テンプレートリテラルで作成された文字列から先頭と末尾の空白を削除できます。たとえば、次のコードスニペットでは、HTML要素を作成しますカスタム参照では、矢印関数が使用されます：

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

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

要素が正しくレンダリングされるように、先頭と末尾のスペースが最終行から削除されます。

<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ます。その後、行は関数とこれらの定数の両方を使用します。これはstring、コンソールに出力されたときの定数の外観です。

The sum of 5 and 100 is 105.

このメカニズムは、文字列を形成するときに条件を確認できる3値演算子を使用する場合に特に便利です。

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

messageコンソールに出力される 定数は、21より大きいか小さいかに応じて、に格納されている値が変わる可能性がありますage。この例ではこの値は19であるため、以下がコンソールに送信されます。

You can not view this page

これで、テンプレートリテラルを使用するときに式の補間を利用する方法がわかりました。次のセクションでは、さらに進んでタグ付けパターンを調べ、プレースホルダーに一致するスコープで渡された式の操作について説明します。

タグテンプレート

タグテンプレートは、テンプレートリテラルの拡張形式です。タグ付きテンプレートは、テンプレートリテラルを解析するタグ付き関数で始まり、開発者が動的文字列生成プロセスをより細かく制御できるようにします。



次の例ではtag、タグテンプレートで操作を実行する関数の役割で使用する予定の関数を作成します。この関数の最初の名前付きパラメーターstringsは、文字列リテラルの配列です。インライン式は、残りのパラメーターの構文を使用して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.`

この関数tagはコンソールへの出力を実行するため、このコードを実行するstringsとexpressions、以下がコンソールに送信されます。

["This is a string with ", " and ", " and ", " interpolated inside."]
[true, false, 100]

最初のパラメータstrings、、は、すべての文字列リテラルを含む配列であることがわかります。

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

この引数には、raw参照できるプロパティもありますstrings.raw。エスケープシーケンスが処理されていない行が含まれています。たとえば、改行コマンドではなく、\n単なる文字になります\n。



2番目の引数...expressionsは、すべての式を含む配列です。

true
false
100

その結果、tag文字列のリテラルと式がタグテンプレート関数に渡されているように見えます。この関数は文字列を返す必要がないことに注意してください。渡された値で動作し、何でも返すことができます。たとえば、何にも注意を払わずに、を返すだけの関数があるとしますnull。これはreturnsNull、次の例で関数がどのように記述されているかです。

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

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

このコードを実行した結果、コンソールに次のように表示されます。

null

タグ付きテンプレートで実行できることの例として、HTMLタグに式を含めるように変更するなど、各式に変更を加えることができます。各式の最初と最後の両方にboldタグを追加する関数を作成しましょう。<strong></strong>

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

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

  //    
  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)

ここではexpressions、forEachループを使用して配列をトラバースします。各要素はタグで囲まれています<strong></strong>。

This 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'

//        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>     

または、標準のString.rawメソッドを使用してタグ付きテンプレートに適用し、エスケープシーケンスの処理を防ぐことができます。

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

このコードを実行すると、コンソールに次のように表示されます。

I want to write /n without it being escaped.

結果

この記事では、一重引用符または二重引用符でフォーマットされた通常の文字列リテラルに関する基本情報を思い出し、テンプレートリテラルとタグテンプレートについても説明しました。テンプレートリテラルは、多くの文字列処理タスクを簡素化します。特に、文字列にさまざまな値を埋め込むことと、連結やエスケープを使用せずに複数行の文字列を作成することについて話します。タグ付けは、多くの一般的なライブラリで使用されている便利な高度なテンプレートリテラル機能です。



テンプレートリテラルを使用していますか？