JavaScript で変数を文字列に挿入する

1. JavaScript でテンプレートリテラルを使用して文字列に変数を挿入する
2. JavaScript　で基本的なフォーマットを使用して文字列に変数を挿入する
3. JavaScript　で　sprintf() を使用して文字列に変数を挿入する
4. まとめ

この記事では、JavaScript で変数を文字列に挿入する方法を紹介します。

JavaScript でテンプレートリテラルを使用して文字列に変数を挿入する

テンプレートリテラルの概念は、JavaScript でしばらく前から存在しています。以前はテンプレート文字列と呼ばれていました。テンプレートリテラルは ES6 で導入されました。面倒な文字列連結を使用するよりも、特定の文に変数を埋め込む簡単な方法を提供します。引用符（二重引用符または一重引用符）を使用する代わりに、バッククォート（キーボードの ` 文字）で定義されたテンプレートリテラルを使用します。文字列をバッククォートに配置し、変数を文に埋め込みます。テンプレートリテラルの使用法は次のとおりです。

一連のバッククォートに文字列を含めるだけで、文字列値になります。文字列テキストを二重引用符で囲む"と同じ機能があります。次のサンプルコードは、テンプレートリテラルとして使用される単純な文字列を示しています。

console.log(`Hello World`);

出力：

Hello World

通常の文字列の準備ができています。この文字列に変数の値を表示する必要がある場合は、変数を埋め込む必要があります。埋め込み中は、変数を中括弧で囲み、その前に $ 記号を付けます。変数値を埋め込むための構文は ${variableName} です。次のコードでは、eggCount 変数が通常の文字列に埋め込まれており、このコンテンツ全体がバッククォートにカプセル化されています。

let eggCount = 20;
console.log(`On easter we decorted ${eggCount}` easter eggs);

出力：

On easter we decorted 20 easter eggs

変数を含む式の埋め込み

テンプレートリテラルを使用した単なる文字列連結とは異なり、テンプレートリテラルを使用した JavaScript でのコーディングと同様に、複数の変数を含む式を含めることができます。合計、日付などの部分文字列の取得などの特定の操作を実行する必要がある場合は、これらすべての機能やその他多くの機能をテンプレートリテラルを使用して文字列に埋め込むことができます。次のコードセットには、そのためのさまざまなユースケースがあります。

let a = 5;
b = 10;
console.log(`Sum of ${a} and ${b} is ${a + b}`);

出力：

Sum of 5 and 10 is 15

日付に関する別の例は次のとおりです。ここでは変数を使用していませんが、テンプレートリテラルに含まれている式はそれ自体で機能します。これは、連結文の場合と同じように、二重引用符またはバッククォートを何度も使用する必要がある JavaScript を含む文字列です。

console.log(`The date today is ${new Date().getDate()}-${
    new Date().getMonth() + 1}-${new Date().getFullYear()}`);

出力：

The date today is 7-4-2021

備考

• テンプレートリテラルは、変数を文に埋め込む最も簡単な方法の 1つを提供します。
• また、式を文字列に直接含めることをサポートし、実行時に計算を解決するようにコンパイラーに任せます。
• エスケープ文字を使用せずに、文字列に一重引用符と二重引用符を簡単に含めることができるようになりました。
• テンプレートリテラルは、コーディングをシンプル、簡潔、きちんと読みやすくします。
• テンプレートリテラルの値を新しい変数に割り当てることができます。これは、変数の値を保持する新しい文字列と見なすことができます。

JavaScript　で基本的なフォーマットを使用して文字列に変数を挿入する

変数値を文字列にきちんと挿入するもう 1つの方法は、JavaScript でサポートされている基本的なフォーマットを使用することです。JavaScript console.log() を使用すると、連結を回避し、ターゲット文字列にプレースホルダーを追加できます。割り当てられる値は、以下に示すように引数として渡されます。

let a = 5;
b = 10;
console.log('Sum of %d and %d is %d.', a, b, (a + b));

出力：

Sum of 5 and 10 is 15.

この変数の値への解決は、console.log() でのみ機能します。したがって、別の変数に割り当てるために使用することはできません。また、HTMLUI で新しい解決された文字列を表示するために使用することもできません。

備考

• console.log() 関数を使用してログを記録するときに、このメソッドを使用できます。したがって、このメソッドは変数に値を割り当てるためには機能しません。したがって、ロギング以外のシナリオには値しない可能性があります。
• 基本的なフォーマットを使用する場合、文字列で使用されるプレースホルダーは、パラメーターとして渡されるデータのタイプに対応している必要があります。たとえば、数値を表示する場合、文のプレースホルダーは%d である必要があります。文字列データ型の場合は%s です。

let op1 = 5, op2 = 10, operation = 'Sum';
console.log('%s of %d and %d is %d.', operation, op1, op2, (op1 + op2));

出力：

Sum of 5 and 10 is 15.

渡されたパラメーターのタイプを考慮するのを忘れると、タイプの不一致が発生します。JavaScript は変数を型キャストしようとし、結果の値を文字列に追加します。次のコードは、この現象を説明しています。

let op1 = 5, op2 = 10, operation = 'Sum';
console.log('%s of %d and %d is %d.', op1, op2, (op1 + op2), operation);

出力：

5 of 10 and 15 is NaN.

op1 は Number データ型であり、%s を使用して最終的な文字列に挿入しています。%s は、数値を文字列データ型に自動型キャストします。この変換はスムーズに進みます。ただし、operation 変数の場合、値はシーケンスの次に来るプレースホルダーに割り当てられます。このプレースホルダーは %d です。したがって、ここでは文字列データ型が数値に変換されています。変換は行われません。したがって、返される結果は NaN であり、これは出力の終了ワードと見なされます。

(op1 + op2) の場合に見たように、パラメーターで式を使用できます。javascript はそれを理解し、それに応じて合計として解決します。

この場合、エスケープ文字を使用せずに最後の文字列で二重引用符を使用することはできません。ただし、構造全体を二重引用符で囲む場合は、一重引用符を使用できます。次のコードを参照してください。

let op1 = 5, op2 = 10, operation = 'Sum';
console.log('\'%s\' of %d and %d is %d.', operation, op1, op2, (op1 + op2));

出力：

'Sum' of 5 and 10 is 15.

JavaScript　で　sprintf() を使用して文字列に変数を挿入する

JavaScript の ES6 の Template Literals の前は、開発コミュニティは sprintf.js の機能豊富なライブラリに従いました。ライブラリには、sprintf() と呼ばれるメソッドがあります。sprintf.js は JavaScript 用のオープンソースライブラリです。Node.js とブラウザ用の実装があります。セットアップと構成については、git-hub ページにアクセスしてください。sprintf() は、文字列の連結を使用せずに、変数を文字列に含めるために使用されます。使い方は以下の通りです。

let sprintf = require('sprintf-js').sprintf;

let op1 = 5, op2 = 10, operation = 'Sum';
sprintf('%s of %d and %d is %d.', operation, op1, op2, (op1 + op2));

出力：

Sum of 5 and 10 is 15.

以下のような便利な機能があります。

• sprintf() 関数を使用すると、変数を異なる順序で指定できます。
• テンプレートリテラルの機能と同様に、sprintf() は文字列内にカプセル化された式を解決します。
• さまざまな形式をサポートしています。sprintf-js ライブラリは、標準の文字列と数値の他に、変数値を文字列に出力するためのブール形式、バイナリ形式などをサポートしています。
• さらに、ライブラリが提供する vsprintf() メソッドを使用して、引数を配列として指定できます。
• また、2 番目の引数でオブジェクトを直接渡すことができ、変数を自動的に解決します。

このライブラリが提供する機能は他にもたくさんあります。詳細については、GitHub リンクで指定されている Read.me ファイルを参照してください。

まとめ

+ と二重引用符を使用して面倒な文字列の連結を行わずに文字列に変数値を含める場合、最良のオプションは、バッククォートを備えた機能であるテンプレートリテラルを使用することです。ロギングの目的でのみ出力文字列に値を挿入する必要がある場合は、JavaScript の console.log() 関数が役立ちます。デフォルトでフォーマットオプションが含まれています。sprintf.js ライブラリは機能が豊富で、変数値の埋め込みに関してはテンプレートリテラルよりもはるかに多くの機能を提供するため、スペースを支配します。しかし、それはライブラリに慣れるのに少しの費用がかかります。