JavaScript 文字列連結 練習問題
では、レベル別の練習問題、その解答と解説を用意しました。
【初級】
- 次のコードの出力は何でしょうか？
console.log('合計:' + 100 + 50);
解答: 合計:10050
解説: 最初に '合計:' が文字列なので、その後の 100 も文字列に変換されて '合計:100' になります。さらに + 50 も文字列連結されて '合計:10050' となります。
- 次のコードの出力は？
let price = 200;
console.log('値段は' + price + '円です');
解答: 値段は200円です
解説: 数値 200 が文字列に変換されて '値段は200円です' になります。
【中級】
- 次のコードの出力は？
console.log(100 + 80 + '円');
解答: 180円
解説: 最初の 100 + 80 は数値同士なので 180 になります。その後 '円' が文字列として連結されます。
- 次のコードの出力は？
console.log('値段は' + 100 + 80 + '円');
解答: 値段は10080円
解説: '値段は' + 100 で '値段は100' という文字列になります。次に + 80 が文字列連結され '値段は10080' となり、最後に '円' がつきます。
【上級】
- 次のコードの出力は？
let users = ['山田', '佐藤', '田中'];
let result = users.map(name => name + 'さん').join('、');
console.log('参加者: ' + result);
解答:参加者: 山田さん、佐藤さん、田中さん
解説:
mapで各要素に'さん'を付ける →['山田さん', '佐藤さん', '田中さん']join('、')で「、」区切りにする →'山田さん、佐藤さん、田中さん''参加者: 'と連結 →参加者: 山田さん、佐藤さん、田中さん
JavaScript テンプレートリテラル 練習問題
それでは、テンプレートリテラルの練習問題をレベル別に紹介します。
【初級】
- 次のコードの出力は何でしょうか？
let name = '太郎';
console.log(`こんにちは、${name}さん`);
解説: ${name} の部分に変数 name の値が埋め込まれます。
【中級】
- 次のコードの出力は何でしょうか？
let price = 120;
let qty = 3;
console.log(`合計は${price * qty}円です`);
解答: 合計は360円です
解説: ${price * qty} の中で計算が行われ、120 * 3 = 360 が埋め込まれます。
- 次のコードの出力は何でしょうか？
let item = 'りんご';
let price = 200;
console.log(`商品: ${item}\n値段: ${price}円`);
解答: 商品: りんご 値段: 200円
解説: \n は改行を意味します。テンプレートリテラル内でも有効です。
【上級】
- 次のコードの出力は何でしょうか？
let users = ['山田', '佐藤', '田中'];
console.log(`参加者: ${users.map(u => u + 'さん').join('、')}`);
解答:参加者: 山田さん、佐藤さん、田中さん
解説:
mapで各要素に「さん」を付けるjoin('、')で「、」区切りにする- その結果が
${...}に埋め込まれます。
- 次のコードの出力は何でしょうか？
let tax = 0.1;
let base = 500;
console.log(`税込価格: ${Math.round(base * (1 + tax))}円`);
解答: 税込価格: 550円
解説: 500 * 1.1 = 550。Math.round で四捨五入して整数にしています。
ポイント
- テンプレートリテラルは バッククォート
`を使う ${...}の中に 変数や式 を直接書ける- 改行や複雑な処理もそのまま書けるので、可読性が高い
