JavaScript | 文字列リテラルの記述方法

では先ほど出した 3 問の練習問題、それぞれの 解答例＋丁寧な解説 を紹介します。

練習問題1

問題：
文字列 'abc' を 'a-b-c' に変換するコードを書いてみよう。

✅ 解答例

🧩 練習問題1

問題：
文字列 'abc' を 'a-b-c' に変換するコードを書いてみよう。

✅ 解答例

🧩 練習問題1

問題：
文字列 'abc' を 'a-b-c' に変換するコードを書いてみよう。

✅ 解答例

💡 解説

1. split('') … 文字列を 1 文字ずつ分解して 配列 にします。
   → 'abc' → ['a', 'b', 'c']
2. join('-') … 配列の要素を '-' でつなぎます。
   → ['a', 'b', 'c'] → 'a-b-c'

👉 「区切って → つなぐ」パターンは、CSV処理やフォーマット整形でよく使います。

練習問題2

問題：
ユーザー入力（例: ' Alice '）の両端の空白を取り、
Hello, Alice! と出力する関数を作ろう。

✅ 解答例

function greet(name) {
  let clean = name.trim();           // 両端の空白を削除
  return `Hello, ${clean}!`;         // テンプレートリテラルで出力
}

console.log(greet('  Alice  '));  // => Hello, Alice!

function greet(name) {
  let clean = name.trim();           // 両端の空白を削除
  return `Hello, ${clean}!`;         // テンプレートリテラルで出力
}

console.log(greet('  Alice  '));  // => Hello, Alice!

💡 解説

• trim() は両端の空白（スペース・改行・タブなど）を削除する便利メソッド。
• テンプレートリテラル `Hello, ${clean}!` は、変数を ${} の中に埋め込む。

練習問題3

問題：
price = 500 を使って、税込価格: 550円 のように表示する
（テンプレートリテラルを使う）

✅ 解答例

let price = 500;
let taxRate = 0.1;  // 消費税10%
let result = `税込価格: ${price * (1 + taxRate)}円`;
console.log(result);  // => 税込価格: 550円

let price = 500;
let taxRate = 0.1;  // 消費税10%
let result = `税込価格: ${price * (1 + taxRate)}円`;
console.log(result);  // => 税込価格: 550円

💡 解説

• ${} の中に計算式も書けます！（price * (1 + taxRate)）
• 計算結果がそのまま文字列に変換され、埋め込まれます。

🌟 まとめ（練習で学べるポイント）