Day11 文字列操作の練習問題
template literal / split / replace を「実際に使える」レベルにするための練習問題です。
初心者でも確実に理解できるように丁寧に解説します。
template literal の練習問題
問題1：テンプレートリテラルでメッセージを作る
次の変数を使って、
「Taro さんは 20 歳です。」
というメッセージを template literal で作ってください。
const name = "Taro";
const age = 20;
解答と解説
const message = `${name} さんは ${age} 歳です。`;
console.log(message);
template literal はバッククォート ` を使い、${} の中に変数や式をそのまま書けるため、
文字列の組み立てが読みやすく安全になります。
問題2：式を埋め込む
次の変数を使って、
「税込価格は 1100 円です。」
というメッセージを template literal で作ってください。
const price = 1000;
const taxRate = 0.1;
解答と解説
const message = `税込価格は ${price + price * taxRate} 円です。`;
console.log(message);
${} の中には「式」も書けます。
計算結果をそのまま埋め込めるのが template literal の強みです。
split の練習問題
問題3：カンマ区切りの文字列を配列にする
次の文字列を split を使って配列に変換してください。
const text = "apple,banana,orange";
解答と解説
const fruits = text.split(",");
console.log(fruits); // ["apple", "banana", "orange"]
split は「文字列を区切って配列にする」メソッドです。
区切り文字（ここでは “,”）を指定します。
問題4：スペース区切りの文章を単語ごとに分割する
次の文字列を split で単語ごとに分割してください。
const sentence = "JavaScript is fun";
解答と解説
const words = sentence.split(" ");
console.log(words); // ["JavaScript", "is", "fun"]
スペース " " を区切り文字にすると、単語ごとに分割できます。
replace の練習問題
問題5：文字列の一部を置き換える
次の文字列の「JavaScript」を「TypeScript」に置き換えてください。
const text = "I like JavaScript";
解答と解説
const replaced = text.replace("JavaScript", "TypeScript");
console.log(replaced);
replace は「最初に見つかった1か所だけ」を置き換えます。
元の文字列は変更されず、新しい文字列が返されます。
問題6：最初の apple だけを orange に置き換える
次の文字列の最初の apple を orange に置き換えてください。
const text = "apple, apple, apple";
解答と解説
const result = text.replace("apple", "orange");
console.log(result); // "orange, apple, apple"
replace は「最初の1つだけ」置き換える点が重要です。
応用問題（3つを組み合わせる）
問題7：カンマ区切りの数値を合計してメッセージを作る
次の文字列を split で分割し、
数値に変換して合計し、
template literal で「合計は ○○ です」と表示してください。
const input = "100,200,300";
解答と解説
const parts = input.split(",");
const numbers = parts.map((p) => Number(p));
let sum = 0;
for (let i = 0; i < numbers.length; i = i + 1) {
sum = sum + numbers[i];
}
const message = `合計は ${sum} です`;
console.log(message);
split → Number → 合計 → template literal
という流れは、実務でも非常によく使うパターンです。
セキュリティ視点の練習問題
問題8：メールアドレスの一部をマスクする
次の email の「@ より前の部分」を「****」に置き換えてください。
const email = "taro@example.com";
解答と解説
const masked = email.replace("taro", "****");
console.log(masked); // "****@example.com"
replace を使うことで、
「見せていい部分だけ残す」というマスク処理ができます。
ユーザー情報を扱うときの基本的なセキュリティ対策です。
Day11 練習問題まとめ
template literal は「読みやすく安全な文字列組み立て」。
split は「文字列を配列に変換する入り口」。
replace は「文字列の一部を安全に書き換えるツール」。
この3つを使いこなせると、
入力処理・ログ生成・データ整形など、
実務で頻出の文字列操作が一気に楽になります。