JavaScript | 文字列操作で「部分文字列（文字列の一部）を取り出す」方法

では、JavaScript と CSS を使って、slice の開始・終了インデックスがスライドして文字列を切り取る様子を可視化する簡単なアニメを作るイメージを作ります。

ここでは 文字列の各文字がブロックになって並び、開始〜終了範囲がハイライトされるアニメ です。

See the Pen slice anime visualization by MONO365 -Color your days- (@monoqlo365) on CodePen.

説明

1. str の文字を1文字ずつ div.char に分割して並べる。
2. 開始インデックス start と終了インデックス end を順にスライドさせる。
3. start <= i < end の文字をハイライト (highlight クラス) して、実際に slice(start,end) が切り取る範囲を視覚化。
4. setInterval で 0.5秒ごとにスライド。
5. 終了すると自動停止。

💡 ポイント

• .highlight は色と拡大で「ここが切り取られる範囲」とわかるようにしている。
• アニメを進めるごとに、開始と終了が右に移動するので、slice の動きを直感的に理解できる。
• end を負の値にして slice(-n) の挙動も同様に可視化可能。

では slice と substring の挙動を同じ画面で比較できるアニメにします。

• 上段：slice(start,end)
• 下段：substring(start,end)
• 同じインデックスでスライドさせ、違いが一目でわかるようにハイライトします。

See the Pen slice vs substring anime comparison by MONO365 -Color your days- (@monoqlo365) on CodePen.

説明

1. slice は 緑色ハイライト、substring は オレンジ色ハイライト。
2. 開始・終了インデックスを毎ステップ 1 ずつ増やし、スライドさせる。
3. slice の負の値は末尾からの位置に変換、substring の負の値は 0 とみなす。
4. substring は終了 < 開始 の場合、自動で入れ替え。これで 挙動の違いが一目で理解できる。

💡 ポイント

• このアニメを動かすと、slice(-3,4) と substring(-3,4) の違い（どの文字が切り取られるか）が一目でわかる。
• ボタンを押すとアニメ開始。時間間隔（500ms）は調整可能。