JavaScript | 文字列を連結する方法

console.log('東京' + '駅');       // → 東京駅
console.log(2 + 3);              // → 5（足し算）
console.log('合計:' + 2 + 3);    // → 合計:23（文字列連結に切り替わった）

console.log('東京' + '駅');       // → 東京駅
console.log(2 + 3);              // → 5（足し算）
console.log('合計:' + 2 + 3);    // → 合計:23（文字列連結に切り替わった）

console.log(200 + '円');             // → 200円
console.log('結果は' + true + 'です'); // → 結果はtrueです

console.log(200 + '円');             // → 200円
console.log('結果は' + true + 'です'); // → 結果はtrueです

let price = 200;
console.log('値段は' + price + '円'); // → 値段は200円

let price = 200;
console.log('値段は' + price + '円'); // → 値段は200円

let fruits = ['Orange', 'Apple', 'Grape'];
console.log('商品: ' + fruits); // → 商品: Orange,Apple,Grape

let fruits = ['Orange', 'Apple', 'Grape'];
console.log('商品: ' + fruits); // → 商品: Orange,Apple,Grape

let user = { name: 'Taro', age: 20 };
console.log('ユーザー: ' + user);                        // → ユーザー: [object Object]
console.log('ユーザー: ' + JSON.stringify(user));        // → ユーザー: {"name":"Taro","age":20}

let user = { name: 'Taro', age: 20 };
console.log('ユーザー: ' + user);                        // → ユーザー: [object Object]
console.log('ユーザー: ' + JSON.stringify(user));        // → ユーザー: {"name":"Taro","age":20}

console.log(100 + 80 + '円');     // → 180円（先に足し算が終わる）
console.log('値段は' + 100 + 80); // → 値段は10080（途中から文字列連結）

console.log(100 + 80 + '円');     // → 180円（先に足し算が終わる）
console.log('値段は' + 100 + 80); // → 値段は10080（途中から文字列連結）

console.log('値段は' + (100 + 80) + '円'); // → 値段は180円

console.log('値段は' + (100 + 80) + '円'); // → 値段は180円

let a = 10, b = 20;
// 悪い例
console.log('合計:' + a + b);           // → 合計:1020
// 良い例
console.log('合計:' + (a + b));         // → 合計:30

let a = 10, b = 20;
// 悪い例
console.log('合計:' + a + b);           // → 合計:1020
// 良い例
console.log('合計:' + (a + b));         // → 合計:30

let name;
console.log('こんにちは、' + name + 'さん'); // → こんにちは、undefinedさん
// 回避
console.log('こんにちは、' + (name ?? 'ゲスト') + 'さん'); // → こんにちは、ゲストさん

let name;
console.log('こんにちは、' + name + 'さん'); // → こんにちは、undefinedさん
// 回避
console.log('こんにちは、' + (name ?? 'ゲスト') + 'さん'); // → こんにちは、ゲストさん

let price = 180;
let item = 'りんご';
console.log(`商品名: ${item} / 値段: ${price}円`);
// → 商品名: りんご / 値段: 180円

let price = 180;
let item = 'りんご';
console.log(`商品名: ${item} / 値段: ${price}円`);
// → 商品名: りんご / 値段: 180円

let taxRate = 0.1;
let base = 200;
console.log(`税込み: ${Math.round(base * (1 + taxRate))}円`);
// → 税込み: 220円

let taxRate = 0.1;
let base = 200;
console.log(`税込み: ${Math.round(base * (1 + taxRate))}円`);
// → 税込み: 220円

let item = 'バナナ';
let qty = 3;
let unit = 120;

// NG（意図が伝わりにくい）
console.log('合計' + qty * unit + '円です');

// OK（順序を明示）
let total = qty * unit;
console.log(`商品: ${item} / 数量: ${qty} / 合計: ${total}円です`);

let item = 'バナナ';
let qty = 3;
let unit = 120;

// NG（意図が伝わりにくい）
console.log('合計' + qty * unit + '円です');

// OK（順序を明示）
let total = qty * unit;
console.log(`商品: ${item} / 数量: ${qty} / 合計: ${total}円です`);

let users = ['山田', '佐藤', '田中'];

// そのまま連結するとカンマ区切り
console.log('参加者: ' + users); // → 参加者: 山田,佐藤,田中

// 読みやすく「さん」付けに
let labeled = users.map(name => `${name}さん`).join('、');
console.log(`参加者: ${labeled}`); // → 参加者: 山田さん、佐藤さん、田中さん

let users = ['山田', '佐藤', '田中'];

// そのまま連結するとカンマ区切り
console.log('参加者: ' + users); // → 参加者: 山田,佐藤,田中

// 読みやすく「さん」付けに
let labeled = users.map(name => `${name}さん`).join('、');
console.log(`参加者: ${labeled}`); // → 参加者: 山田さん、佐藤さん、田中さん

function greeting(name) {
  // null/undefined/空文字をまとめて扱う
  let safe = name?.trim() ? name.trim() : 'ゲスト';
  return `こんにちは、${safe}さん`;
}

console.log(greeting(''));        // → こんにちは、ゲストさん
console.log(greeting(' 太郎 '));  // → こんにちは、太郎さん
console.log(greeting());          // → こんにちは、ゲストさん

function greeting(name) {
  // null/undefined/空文字をまとめて扱う
  let safe = name?.trim() ? name.trim() : 'ゲスト';
  return `こんにちは、${safe}さん`;
}

console.log(greeting(''));        // → こんにちは、ゲストさん
console.log(greeting(' 太郎 '));  // → こんにちは、太郎さん
console.log(greeting());          // → こんにちは、ゲストさん