JavaScript の文字列に変数を挿入する方法

JavaScript の文字列に変数の値を入れるには、テンプレートリテラルを使います。文字列をバッククォートで囲み、値を表示したい位置に `${variableName}` と書きます。variableName は例として置いた名前なので、実際の変数名に置き換えてください。JavaScript がその時点の値を文字列に挿入します。通常の文字列を組み立てるなら、テンプレートリテラルが最も簡潔です。ログにはコンソールのプレースホルダーが便利で、機能が必要な場合は書式指定ライブラリも選択肢になります。

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

テンプレートリテラルは、シングルクォートやダブルクォートではなくバッククォートで囲みます。JavaScript は ${ と } の間にある式を評価し、その結果を文字列に変換します。完成した文字列は変数に代入したり、関数から返したり、別の関数に渡したりできます。たとえば "Hello, ${name}" のように引用符で囲んだ文字列では、補間構文はそのまま文字として扱われます。シングルクォートとダブルクォートでは値は挿入されません。

次の例では、あいさつ文を作り、合計を計算してから、完成したテキストを message に代入します。

const name = "Ada";
const price = 12;
const message = `Hello, ${name}. Your total is $${price + 3}.`;
console.log(message);

Hello, Ada. Your total is $15.

${price + 3} は先に評価されるため、その結果の 15 が文字列に入ります。その直前のドル記号は通常の文字です。埋め込む式には、算術演算、プロパティへのアクセス、関数呼び出しなどを使えます。最終的な文が読みやすくなるよう、式は簡潔に保ちましょう。テンプレートリテラルは複数行にわたって記述でき、中に引用符を含めてもエスケープは不要です。${ という文字列そのものを含めるにはドル記号を \${ のようにエスケープし、バッククォートを含めるにはバックスラッシュを付けます。式がオブジェクトを返すと、JavaScript はその値の文字列変換を使います。意図した表示にならない場合があるため、オブジェクトの内容を読みやすく示すには明示的に変換してください。補間で作られるのは通常のテキストであり、HTML 用に安全化された出力ではありません。信頼できない値を Web ページに表示する場合は、用途に合った安全な DOM API を使ってください。

JavaScript で基本的な書式指定を使って文字列に変数を挿入する

診断用の出力には、console.log() のプレースホルダーと後続の引数を使ってメッセージを表示できます。次の例では %s が名前を、%d が点数を扱い、引数は対応する順に並んでいます。

const name = "Ada";
const score = 42;
console.log("%s scored %d points.", name, score);

プレースホルダーの対応状況や変換方法はコンソールの実装によって異なります。そのため、これはログ出力のための便利な機能であり、どの環境でも使える文字列生成 API ではありません。console.log() は診断情報を出力するもので、整形済みメッセージを返して変数に代入したり、HTML ページに挿入したりするものではありません。文字列の値が必要なら、テンプレートリテラルか書式指定ライブラリを使いましょう。各引数を対応するプレースホルダーの順に渡してください。余分な値や対応しないプレースホルダーの表示方法は、コンソールごとに異なることがあります。

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

sprintf-js は、sprintf() 関数で文字列を返す任意利用のライブラリです。パッケージをインストール済みで CommonJS を利用できるプロジェクトでは、const { sprintf } = require("sprintf-js"); と読み込み、const message = sprintf("%s has %d items", name, count); のように値を作れます。このコードは API の使い方を示すものです。インストール方法や読み込み方はプロジェクトの環境によって異なるため、ブラウザーやモジュールを使う場合はリンク先のセットアップ手順を確認してください。

sprintf() が解釈するのは書式指定子と渡された引数です。書式文字列の中に書いた JavaScript の式を評価することはありません。各書式指定子には対応する引数が必要です。繰り返し使う複雑な書式など、追加の機能が依存関係を増やす価値をもたらす場合に、このライブラリを選びましょう。利用できる書式指定子やセットアップ方法はプロジェクトのドキュメントで確認できます。変数を含む短い文だけなら、組み込みのテンプレートリテラルのほうが通常は簡単です。

まとめ

通常の文字列を組み立てるときや、変数の値、JavaScript の式を埋め込むときはテンプレートリテラルを使いましょう。診断用の出力には console.log() のプレースホルダーを使えますが、表示方法は実装によって異なり、呼び出しから再利用可能な整形済み文字列は得られません。書式指定の機能が必要で、依存関係を追加する価値がある場合は sprintf-js を検討してください。単純な補間なら、バッククォートと ${...} を使う方法が、変数の現在の値を JavaScript の文字列に入れる最もわかりやすい選択肢です。