JavaScript 数値と文字列 練習問題集
初級編：基礎の理解
問題1：数値リテラルの理解
次のコードを実行すると、コンソールには何が出力されるでしょう？
console.log(0b1010); // ?
console.log(0x1A); // ?
console.log(1e3); // ?
解説：
| 表記 | 説明 | 値 |
|---|---|---|
0b1010 | 2進数（binary）で「1010」→ 10進数で10 | 10 |
0x1A | 16進数（hexadecimal）→ 1×16 + 10 = 26 | 26 |
1e3 | 指数表記。「1×10³」 | 1000 |
出力結果：
10
26
1000
問題2：NaNとInfinityを見分けよう
次のうち、NaN になるのはどれ？
console.log(10 / 0); // A
console.log("abc" * 3); // B
console.log(0 / 0); // C
解説：
| 式 | 結果 | 理由 |
|---|---|---|
10 / 0 | Infinity | 0で割る → 無限大 |
"abc" * 3 | NaN | 文字列を数値に変換できない |
0 / 0 | NaN | 「0を0で割る」は定義できない |
正解： B と C が NaN になります。
問題3：文字列の長さとインデックス
次のコードの出力を考えてみましょう。
let text = "JavaScript";
console.log(text.length); // ?
console.log(text[4]); // ?
解説：
"JavaScript"は 10 文字text[4]は 0から数えて5文字目 →"S"
出力結果：
10
S
問題4：テンプレートリテラルの基本
let name = "Halu";
let age = 25;
console.log("私は " + name + " で、" + age + "歳です。");
console.log(`私は ${name} で、${age}歳です。`);
解説：
- 上は「文字列の結合」
- 下は「テンプレートリテラル（${}で埋め込み）」
どちらも出力は同じ：
私は Halu で、25歳です。
中級編：操作・変換・比較
問題5：文字列 → 数値の変換
次の式の結果をすべて予想してみましょう。
console.log(Number("42"));
console.log(parseInt("42px"));
console.log(parseFloat("3.14abc"));
console.log(Number("abc"));
解説：
| 式 | 結果 | 説明 |
|---|---|---|
Number("42") | 42 | 文字列を数値化 |
parseInt("42px") | 42 | 数値部分だけを整数として読む |
parseFloat("3.14abc") | 3.14 | 浮動小数として読む |
Number("abc") | NaN | 数字に変換できない |
問題6：文字列メソッドの使いこなし
次のコードの出力は？
let str = " Hello World! ";
console.log(str.trim().toUpperCase().includes("HELLO"));
解説：
.trim()→ 前後の空白を削除 →"Hello World!".toUpperCase()→"HELLO WORLD!".includes("HELLO")→"HELLO"を含む →true
出力結果：
true
問題7：文字列を分割して配列に
let csv = "apple,banana,orange";
let fruits = csv.split(",");
console.log(fruits[1]);
解説：
.split(",")は「カンマで区切る」- 結果は
["apple", "banana", "orange"]
出力結果：
banana
問題8：数値を整形表示
let price = 1234.5678;
console.log(price.toFixed(2));
解説：
.toFixed(2)は「小数点以下を2桁まで表示」
👉1234.57（四捨五入される）
上級編：応用・実践
問題9：BigInt の注意点
const a = 10n;
const b = 5;
// console.log(a + b); // ←どうなる？
解説：
BigIntとNumberは混ぜて計算できない。- このままでは TypeError になる。
- 対処法：
console.log(a + BigInt(b)); // OK → 15n
問題10：テンプレートリテラルで式を埋め込む
let items = 5;
let price = 120;
console.log(`合計金額は ${items * price} 円です。`);
解説：${...} の中は式として評価される。
出力結果：
合計金額は 600 円です。
問題11：ゼロ埋めフォーマット
let num = 7;
console.log(num.toString().padStart(3, "0"));
解説：
.toString()→ 数字を文字列に変換"7".padStart(3, "0")→ 3文字になるまで前を"0"で埋める
→"007"
問題12：数値と文字列の型変換の落とし穴
console.log("5" + 3);
console.log("5" - 3);
解説：
| 式 | 結果 | 理由 |
|---|---|---|
"5" + 3 | "53" | + は文字列結合にも使われる |
"5" - 3 | 2 | - は数値演算しかないため自動変換される |
👉 + のときは「文字列結合」になりやすい点に注意！
おまけ：ミニチャレンジ
問題13：テンプレートリテラル＋計算＋文字列整形
let name = "ミカ";
let score = 83.456;
console.log(`${name}さんのスコアは ${score.toFixed(1)} 点です！`);
解説：
.toFixed(1)→ 小数点1桁に整形
👉ミカさんのスコアは 83.5 点です！
まとめ
| 分類 | 主な学び |
|---|---|
| 数値 | リテラル形式、NaN / Infinity、toFixed、BigInt |
| 文字列 | 長さ・検索・分割・整形・テンプレートリテラル |
| 型変換 | Number(), parseInt(), toString() など |
| 応用 | padStart, includes, 大文字変換, 式埋め込み |