JavaScript 文字列の連結 練習問題セット（レベル別）
では、JavaScript の「文字列の連結（concat / + / テンプレートリテラル）」をしっかり身につけるために、
レベル別（初級・中級・上級） に練習問題＋解答・解説を用意しました。
【初級編】（基本を確実にマスター）
問題1
次のコードの出力を答えなさい。
let msg = 'こんにちは'.concat('太郎さん');
console.log(msg);
解答：
こんにちは太郎さん
解説：concat は文字列をくっつけるメソッド。'こんにちは' に '太郎さん' を連結して新しい文字列を返します。
問題2
次のコードを実行したときの出力を答えなさい。
let a = 'Hello';
a.concat('World');
console.log(a);
解答：
Hello
解説：concat は元の文字列を 変更しません（非破壊的）。a は 'Hello' のまま。
結果を使いたい場合は let b = a.concat('World') のように代入が必要です。
問題3
+ を使って「私の名前は太郎です。」という文字列を作りなさい。
let name = '太郎';
let msg = ________;
console.log(msg);
解答：
let msg = '私の名前は' + name + 'です。';
解説：+ 演算子でも文字列の連結ができます。数値では「足し算」ですが、文字列では「つなぐ」になります。
問題4
次のコードの出力を答えなさい。
let num = 10;
let str = '点数は'.concat(num, '点');
console.log(str);
解答：
点数は10点
解説：concat に数値を渡すと、自動的に文字列 '10' に変換されてから連結されます。
問題5
テンプレートリテラルを使って、同じ内容を出力しなさい。
let num = 10;
let str = `点数は${num}点`;
console.log(str);
出力結果：
点数は10点
解説：
バッククォート（`）と ${} を使えば、変数を埋め込む形で直感的に書けます。
【中級編】（実践でよく使うパターン）
問題6
次のコードの出力を答えなさい。
let pref = '東京都';
let city = '新宿区';
let address = pref.concat(city);
console.log(pref);
console.log(address);
解答：
東京都
東京都新宿区
解説：concat は元の文字列 pref を変更せず、新しい文字列を返します。
「非破壊的」であることを覚えておきましょう。
問題7
次のコードをテンプレートリテラルを使って書き直しなさい。
let name = '花子';
let age = 22;
let msg = 'こんにちは、' + name + 'さん（' + age + '歳）';
解答：
let msg = `こんにちは、${name}さん（${age}歳）`;
解説：
テンプレートリテラルでは ${} の中に変数や式を入れられます。
文字列が長くなるほど可読性が上がります。
問題8
次のコードの出力を答えなさい。
let score = 50;
console.log('スコア:' + score + 20);
解答：
スコア:5020
解説：
左から順に評価され、'スコア:' + score で 'スコア:50' に、
その後 'スコア:50' + 20 で 'スコア:5020' になります。
文字列と数値を混ぜると、数値が文字列化される点に注意！
問題9
次のコードを、concat で同じ結果になるように書き換えなさい。
let msg = '合計:' + (100 + 200) + '円';
解答：
let msg = '合計:'.concat(100 + 200, '円');
解説：concat の中で計算 (100 + 200) は先に実行されるので、'合計:300円' という新しい文字列ができます。
問題10
次のコードを実行した結果を答えなさい。
let userName = null;
let msg = `ようこそ、${userName ?? 'ゲスト'}さん`;
console.log(msg);
解答：
ようこそ、ゲストさん
解説：??（Null合体演算子）は、左側が null または undefined のときに右側の値を使います。
テンプレートリテラルと組み合わせると、柔軟なメッセージ作りができます。
【上級編】（応用・実践トレーニング）
問題11
配列 ['リンゴ', 'バナナ', 'みかん'] を使って、
「フルーツ：リンゴ・バナナ・みかん」という文字列を作りなさい。
（方法はいくつでもOK）
解答例①（join を使う）
let fruits = ['リンゴ', 'バナナ', 'みかん'];
let msg = 'フルーツ：' + fruits.join('・');
解答例②（concat）
let fruits = ['リンゴ', 'バナナ', 'みかん'];
let msg = 'フルーツ：'.concat(fruits.join('・'));
解説：join('・') は配列の要素を '・' でつなげて1つの文字列にします。
複数のデータを人間が読める形に整える時によく使います。
問題12
次のコードを修正して、意図した出力が出るようにしなさい。
（※ 出力は「得点は100点です。」にしたい）
let score = 50;
let msg = '得点は' + score * 2 + '点です。';
console.log(msg);
解答：
let score = 50;
let msg = '得点は' + (score * 2) + '点です。';
出力：
得点は100点です。
解説：
演算子の優先順位に注意！+ は左から順に処理されるので、'得点は' + score * 2 → '得点は' + (score * 2) と括弧でまとめてあげる必要があります。
問題13
ユーザー情報をオブジェクトで受け取り、
テンプレートリテラルでメッセージを作る関数を完成させなさい。
function greet(user) {
// ここを埋める
}
console.log(greet({ name: '彩', age: 19 }));
// 出力例：こんにちは、彩さん（19歳）！
解答例：
function greet(user) {
return `こんにちは、${user.name}さん（${user.age}歳）！`;
}
解説：
テンプレートリテラルは ${} 内にオブジェクトのプロパティを直接書ける。
複数の値を1つの文字列にまとめるときに非常に便利。
問題14
concat を使って "A-B-C-D" を作りなさい（ループ使用OK）。
解答例：
let arr = ['A', 'B', 'C', 'D'];
let str = arr[0];
for (let i = 1; i < arr.length; i++) {
str = str.concat('-', arr[i]);
}
console.log(str); // A-B-C-D
解説：concat を繰り返し使うことで、文字列を順番に連結できます。
大量の文字列連結では通常は join() を使う方が効率的ですが、concat の理解度チェックとしてはよい練習です。
問題15（挑戦）
次のコードの出力を答え、なぜそうなるのか説明しなさい。
let x = 10;
let y = 20;
let msg = '合計は' + x + y;
console.log(msg);
解答：
合計は1020
解説：
左から順に評価されるため：
'合計は' + x→'合計は10'（ここで文字列化）'合計は10' + y→'合計は1020'
つまり数値の計算がされず、すべて文字列としてつながる。
もし計算したいなら'合計は' + (x + y)とする必要があります。
まとめ
| 方法 | 書き方 | 特徴 |
|---|---|---|
+ | 'A' + 'B' | シンプルで一番よく使う |
concat() | 'A'.concat('B') | メソッド形式。非破壊的 |
| テンプレートリテラル | `Hello, ${name}` | 読みやすく、変数や式を埋め込みやすい |