JavaScriptで予期しない文字列連結を回避する方法｜テンプレートリテラルの活用

バッククォートで予期しない連結を防ぐ

JavaScriptで文字列・複数の文字列・数値を連結する際、+ 演算子を使うと意図しない文字列結合が起こることがあります。こうしたトラブルを回避するには、バッククォート（`）を使ったテンプレートリテラルを活用するのが効果的です。

基本的な使い方

まず、次のように変数を用意します。

const concatValue = 'John,David,Mike';
var friendNames = `${concatValue}`;

この値に対して、さらに文字列や数値を組み合わせて連結できます。

var studentNameWithFriends = ` ${concatValue}| 'Carol' | 24 `;

サンプルコード

以下は、テンプレートリテラルによる文字列連結の完全なコード例です。

Example

const concatValue = 'John,David,Mike';
var friendNames = `${concatValue}`;
var studentNameWithFriends = ` ${concatValue}| 'Carol' | 24 `;
console.log(friendNames);
console.log(studentNameWithFriends);

プログラムの実行方法

上記のプログラムを実行するには、Node.js環境で次のコマンドを使用します。

node fileName.js

ここでは、ファイル名を「demo37.js」として実行します。

実行結果

プログラムを実行すると、以下の出力が得られます。

PS C:\Users\Amit\JavaScript-code> node demo37.js
John,David,Mike
John,David,Mike| 'Carol' | 24

ポイントまとめ

• テンプレートリテラルでは、変数を ${} で囲んで文字列中に埋め込めます。
• 文字列と数値を混在させても、+ 演算子による暗黙的な型変換の影響を受けにくくなります。
• 可読性が高く、改行を含む文字列もそのまま記述できるため、複雑な連結処理に最適です。