slice と substring を中心に、基本・よくある間違い・実務での使いどころ、練習問題（易〜難）と解答・解説までまとめます。
1. まず大事な前提（超重要）
- 文字列の最初の文字はインデックス 0（ゼロ）から数えます。
例："ABC"→Aは0、Bは1、Cは2。 slice/substringは 元の文字列を変更しない（新しい文字列を返す）メソッドです。
2. slice(start[, end]) のやさしい説明
- 使い方：
str.slice(開始インデックス, 終了インデックス) - 取り出されるのは 開始インデックスから「終了インデックスの1つ前」まで。
endを省略すると開始位置から最後まで取得します。- 負の値が使える（
-1は最後の1文字、-2は最後から2番目、…）。 end <= startのときは 空文字列""を返す。
例：
let s = "JavaScript";
// s[0] = 'J', s[1] = 'a', ... s[9] = 't'
s.slice(4, 10); // "Script" (4..9)
s.slice(4); // "Script" (4..末尾)
s.slice(-6); // "Script" (最後から6文字を取得)
s.slice(2,2); // "" (終了と開始が同じ -> 空)
s.slice(5,3); // "" (終了 < 開始 -> 空)
実用例：ファイル名から拡張子を取り出す
let filename = "photo.jpg";
let ext = filename.slice(filename.lastIndexOf('.'));
console.log(ext); // ".jpg"
3. substring(start[, end]) のやさしい説明
- 使い方はほぼ同じ：
str.substring(開始インデックス, 終了インデックス) - 取り出されるのは 開始インデックスから終了インデックスの1つ前まで（
sliceと同じ見た目）。 - でも重要な違いがある：
- 負の値は 0 とみなされる（
-3→0）。 - end < start のときは自動で入れ替える（
substring(6,3)はsubstring(3,6)と同じ）。 - 終了が長さを超えると末尾まで扱う（
sliceも同様に末尾扱い）。
- 負の値は 0 とみなされる（
例：
let s = "JavaScript";
s.substring(4,10); // "Script" (4..9). end が長くても末尾まで
s.substring(-3,4); // "Java" (-3は0として → substring(0,4))
s.substring(6,3); // "Scr" (自動で入れ替え -> (3,6))
実用例：文字列の先頭 N 文字だけを取り出す
let id = "AB12345";
let head = id.substring(0,2); // "AB"
4. slice と substring のまとめ（使い分け）
sliceは負のインデックスを使いたいとき便利。substringは負の値を指定してしまったミスを自動で0に直してくれる（安全寄り）。sliceはend <= startだと空文字になるので、開始・終了を厳密に扱いたいとき向き。- 実務ではどちらでも使われますが、負のインデックスで末尾から切りたい場合は
sliceを使うのが自然です。
5. よくある間違いとチェックポイント
- 「終了インデックスは含まれない」ことを忘れる → 1文字ズレの原因に。
- 負の数の扱いが違う（
sliceは負数OK、substringは0扱い）。 - 文字列長を確認するには
str.lengthを使う。sliceの-nはstr.length - nと同等。
6. 例題（初心者向け）
例題A（基本）
文字列 "Hello, World!" から "Hello" と "World" を取り出すコードを示し、その出力を答えよ。
解答例：
let s = "Hello, World!";
let a = s.slice(0,5); // "Hello"
let b = s.slice(7,12); // "World"
console.log(a); // Hello
console.log(b); // World
例題B（負のインデックス）
文字列 "abcdefg" から最後の2文字 "fg" を slice を使って取り出せ。
解答例：
let s = "abcdefg";
let last2 = s.slice(-2); // "fg"
例題C（substring の入れ替え挙動）
str = "1234567890" に対して str.substring(7,3) は何を返す？理由も答えよ。
解答：
str.substring(7,3)は自動で(3,7)に入れ替えられる →str.substring(3,7)="4567"を返す。
7. 練習問題（レベル別） — 自分で解いてみてね
初級（A）
"Tokyo2025"から"Tokyo"を取り出すコードを書け。"apple"の最後の1文字をsliceで取り出せ。
中級（B）
- ファイル名
"report.final.pdf"から拡張子を取り出す（.を含む）。 "banana"の中央3文字（"nan"）をsliceで取り出すコードを書け。
上級（C）
- 関数
truncate(str, n)を作って、strの先頭n文字だけを取り、長さがnを超えていたら末尾に"..."をつける実装を作れ（例：truncate("HelloWorld",5)→"Hello..."）。 sliceとsubstringの挙動の違いを利用して、与えられたstart,endがどちらが正しいか（負の値が与えられたとき等）判別するスニペットを書け（ヒント：sliceは負の値を扱うがsubstringは0扱い）。
8) 練習問題 解答と解説
初級解答
let s = "Tokyo2025";
s.slice(0,5); // "Tokyo"
解説：Tが0番、oが4番まで。
let s = "apple";
s.slice(-1); // "e"
解説：-1 は最後の文字。
中級解答
let fname = "report.final.pdf";
let ext = fname.slice(fname.lastIndexOf('.')); // ".pdf"
解説：lastIndexOf('.') で最後のドット位置を得て、そこから末尾まで slice。
let s = "banana";
// インデックス: b(0) a(1) n(2) a(3) n(4) a(5)
// "nan" はインデックス2..4 -> slice(2,5) (終点は含まれない)
s.slice(2,5); // "nan"
上級解答
function truncate(str, n) {
if (str.length <= n) return str;
return str.slice(0, n) + "...";
}
console.log(truncate("HelloWorld", 5)); // "Hello..."
解説：str.lengthで長さを判定、slice(0,n) で先頭 n 文字を取得。末尾に “…” を付ける。
6.（例：start, end の与え方で slice と substring の差を示す）
function compareBehaviors(str, start, end) {
console.log("slice:", str.slice(start, end));
console.log("substring:", str.substring(start, end));
}
// 例:
compareBehaviors("abcdef", -3, 4);
// slice: "def". (start=-3 -> 最後から3文字 => index 3)
// actually slice(-3,4) => start resolves to index 3, end=4 => slice(3,4)="d"
// be careful: slice(-3,4) may produce different outputs depending on positions
（解説）slice は負数を末尾からの位置に変換するため、結果が substring と異なることがある。substring は負値を 0 とみなす。
注：練習6は差が出るケースを実際に手で試すと理解が早いです。
9. どちらを選べば良い？実務上の目安
- 「末尾から数えて取りたい」または「負のインデックスで直感的に書きたい」 →
slice。 - 「入力値が負になったり順番が逆になったときでも自動で補正してほしい（より安全に）」 →
substring。 - どちらかに統一してチームでコーディング規約を作るのもオススメ（可読性が上がる）。
10. ブラウザで試す方法（超簡単）
- ブラウザを開く → 任意のページで右クリック → 「検証（デベロッパーツール）」 → 「Console」タブ。
- そこに上のコード（例えば
let s="Hello, World!"; s.slice(0,5);）を貼って Enter。すぐに結果が見れます。