開発者ドキュメント

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

序章

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 コンソールに、次のようになります。

Output
Homer J. Simpson742 Evergreen TerraceSpringfield

バックスラッシュ文字を使用できます(\)文字列を複数の行に続けるには:

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

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

Output
Homer J. Simpson 742 Evergreen Terrace Springfield

改行文字を使用する(\n)、真の複数行の文字列を作成できます。

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

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

Output
Homer J. Simpson 742 Evergreen Terrace Springfield

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

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

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

Output
Homer J. Simpson 742 Evergreen Terrace Springfield

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

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

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

Output
Homer J. Simpson 742 Evergreen Terrace Springfield

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

式の補間

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

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

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

Output
This string is using concatenation.

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

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

いつ dynamicString がコンソールに記録されている場合、コンソールには次のように表示されます。

Output
This 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が生成されます。

Output
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')

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

Output
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')
    

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

    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 関数と変数 xy次に、文字列内の関数と変数の両方を使用します。 ログに記録された結果には、次の情報が表示されます。

    Output
    The 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 この例では、次の出力がログに記録されます。

    Output
    You can not view this page

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

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

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

    この例では、 tag タグ付きテンプレートを操作する関数として使用する関数。 文字列リテラルは、名前が付けられた関数の最初のパラメータです。 strings ここで、文字列に補間された式はすべて、 restparametersを使用して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.`
    

    コンソールロギングをしているので stringsexpressions、これは出力になります:

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

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

    もあります raw この引数で利用可能なプロパティ strings.raw、エスケープシーケンスが処理されていない文字列が含まれています。 例えば、 /n ただのキャラクターになります /n 改行に逃げないでください。

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

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

    function returnsNull(strings, ...expressions) {
      return null
    }
    
    const string = returnsNull`Does this work?`
    console.log(string)
    

    ロギング string 変数は以下を返します:

    Output
    null

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

    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 配列し、太字の要素を追加します。

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

    人気のあるJavaScriptライブラリには、タグ付きテンプレートリテラルの例がいくつかあります。 graphql-タグライブラリは 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)
    

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

    Output
    I want to write /n without it being escaped.

    結論

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

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

    モバイルバージョンを終了