VIDEO LESSON

JavaScriptのString.prototype.slice()の使い方：引数・戻り値・実例と注意点の解説動画

再生時間 8:42動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:01今回はスライスを紹介します。
0:03これは、文字列の指定した範囲だけを切り出して、新しい文字列として返すメソッドです。
0:11たとえばファイル名から拡張子を取り除いたり、日付の文字列から年だけを取り出したりできます。
0:20この動画では、書き方と二つの引数、戻り値、記事の基本例である拡張子の処理、
0:26負の位置指定の使い方、範囲外や開始と終了が逆になる境界例、よく似たサブストリングとの違いまで、
0:32実行結果と一緒に学びます。
0:39位置を数える感覚が身につけば、文字列の欲しい部分だけを正確に取り出せるようになります。
0:47まずは、元の文字列は変わらず、切り出した部分だけが返る、という一点を確かめましょう。
0:55まず動作環境を確認します。
0:57スライスは、ジャバスクリプトの最初期から使える文字列メソッドです。
1:02クロームでは一以降、エッジでは十二以降、ファイアーフォックスでは一以降、
1:06サファリでは一以降で使えます。
1:10ノード・ジェイエスではゼロ・十・ゼロ以降に対応しています。
1:14記事の互換性情報はエムディーエヌのデータに基づく目安ですが、対応範囲が非常に広いため、
1:18通常は環境を心配せず使えます。
1:22追加の読み込みは不要で、空文字列にも関数として備わっていることを実機で確認済みです。
1:29迷ったときは、実際に使う環境で小さなコードを試すのが確実です。
1:33対応が広い分、古い環境向けのコードでも安心して使えるのが強みです。
1:38書き方を確認します。
1:40対象の文字列に続けてスライスと書き、カッコの中に開始位置と終了位置を指定します。
1:48第1引数は開始位置で、その位置の文字から結果が始まります。
1:53第2引数は終了位置ですが、ここが大切で、終了位置の文字自体は結果に含まれません。
2:00第2引数を省略すると、開始位置から文字列の最後までが返ります。
2:06戻り値は切り出した新しい文字列で、元の文字列自体は変更されません。
2:12スライドの例では、先頭の四文字と、五文字目以降がそれぞれ取り出せることを実機で確認しました。
2:21結果を使いたい場合は、戻り値を変数に保存してください。
2:26終了位置は含めない、という数え方がスライスを使いこなす鍵です。
2:32記事の基本例を見ます。
2:33レポート・ドット・シーエスブイというファイル名の文字列から、拡張子を除いた名前と、
2:38拡張子そのものを取り出すコードです。
2:42開始位置ゼロから、末尾から四つ手前までを切り出すと、ドットと拡張子が除かれてレポートだけが残ります。
2:49逆に、末尾から三文字だけを切り出すと、シーエスブイという拡張子が得られます。
2:55どちらも記事の期待出力と一致し、ノードの実機結果とも一致しました。
3:00記事が説明するように、末尾の位置を意識して切り出すのがポイントです。
3:05拡張子の種類が複数ある実際の処理では、末尾の位置を検証してから切り出してください。
3:11まずはこの基本例を手で実行してみましょう。
3:14負の位置指定を確認します。
3:16スライスでは、引数に負の数を渡すと、文字列の末尾から数えた位置として扱われます。
3:22マイナス一は最後の文字、マイナス三は末尾から三文字の始まり、という数え方です。
3:29スライドの例では、末尾から六文字を取り出すとスクリプトが得られ、末尾から六つ手前から三つ手前までを切り出すと、
3:35その先頭の三文字が得られることを実機で確認しました。
3:41文字列の長さが変わっても、末尾を基準に指定できるため、拡張子や末尾のコードを取り出す処理で特に便利です。
3:50長さを数えて先頭から指定し直す必要がありません。
3:53末尾から数える感覚に慣れると、位置指定がぐっと楽になります。
3:58引数の省略と、範囲外の指定を確認します。
4:01まず、引数をすべて省略すると、文字列全体がそのまま返ります。
4:06次に、終了位置に文字列の長さを超える大きな数を指定しても、エラーにはならず、
4:11最後の文字までが返ることを実機で確認しました。
4:16逆に、開始位置が文字列の長さ以上だと、切り出す範囲がないため、空文字列が返ります。
4:22はみ出した位置は、端の位置にそろえて扱われる、と覚えておくと結果を予測しやすくなります。
4:29範囲外で例外が出ないのは扱いやすい反面、位置の計算ミスに気づきにくい面もあります。
4:36意図した範囲になっているか、小さな例で確かめる習慣が大切です。
4:41記事の境界条件の例を見ます。
4:43エー・ビー・シー・ディー・イーという五文字の文字列で、開始位置に三、終了位置に一を指定するコードです。
4:51開始が終了より後ろにあるため、切り出す範囲は存在せず、結果は空文字列になります。
4:57空文字列と等しいかどうかを調べる式がトゥルーになることが、記事の期待出力であり、
5:02実機でも同じ結果を確認しました。
5:07スライスは、開始と終了を自動で入れ替えたりはしません。
5:11開始と終了の前後関係が逆になると、例外ではなく空文字列が静かに返ります。
5:17成功例だけでなく、こうした境界条件を確かめておくと、位置指定のミスを早めに見つけられます。
5:24結果が空になる条件として覚えておきましょう。
5:27実務に近い実例を見ます。
5:29年月日がハイフンでつながった日付の文字列を、位置を指定して年と月と日に分解するコードです。
5:37先頭の四文字が年、六文字目から二文字が月、九文字目以降が日になることを、
5:41すべて実機で確認しました。
5:45形式が固定された文字列では、このように決まった位置で切り出すのが簡単で確実です。
5:52区切り文字の位置を数える際は、ハイフン自体も一文字として数える点に注意してください。
5:59逆に、形式がばらばらの入力では、位置がずれて誤った部分を切り出すおそれがあります。
6:06その場合は、先に形式を検証してから切り出しましょう。
6:10ファイル名の接頭辞や、固定長のコードの分解にも同じ考え方が使えます。
6:16よく似たサブストリングとの違いを確認します。
6:19まず、開始と終了が逆の場合です。
6:22スライスは空文字列を返しますが、サブストリングは開始と終了を自動で入れ替えて計算するため、
6:27ビー・シーが返ることを実機で確認しました。
6:32次に、負の数の扱いです。
6:34サブストリングは負数をゼロとして扱いますが、スライスは末尾から数えるため、
6:39マイナス三を指定すると末尾の三文字が得られます。
6:44末尾基準の指定が必要な場面ではスライスが向いています。
6:49どちらも元の文字列は変えません。
6:51名前が似ているため混同しやすいので、負数と入れ替えの二点で区別して覚えましょう。
6:58迷ったら、小さな文字列で両方を試して比べるのが確実です。
7:02注意点を二つ確認します。
7:04まず、記事も注意しているように、スライスの位置はユーティーエフ・シックスティーンのコード単位で数えます。
7:12そのため、絵文字のような文字を途中で分断してしまう可能性があり、画面に表示される文字数の制限とは区別して考える必要があります。
7:23表示文字数で切り出したい場合は、別の方法を検討してください。
7:27次に、スライドの例のように、切り出しても元の文字列は変わらず、新しい文字列が返ります。
7:34また、スライスは文字列のメソッドなので、数値に対して呼ぶとタイプエラーになることを実機で確認しました。
7:43結果を使いたい場合は、戻り値を変数に保存してください。
7:47まとめです。
7:48スライスは、文字列の指定した範囲を切り出して、新しい文字列を返すメソッドです。
7:55判断のポイントは三つです。
7:58まず、終了位置の文字は結果に含まれず、第2引数を省略すると最後まで返ること。
8:05次に、負の数は末尾から数えた位置になり、ファイル名や日付のような固定形式の文字列を分解するのに向いていること。
8:15そして、開始が終了以上だと空文字列になり、位置はユーティーエフ・シックスティーンのコード単位で数えるため、
8:21絵文字の分断に注意することです。
8:27まずは記事の基本例と境界例を実行し、位置を一つ変えて結果を予測してから確かめてみてください。
8:35お疲れさまでした。
8:37位置で切り出す感覚は、文字列処理全体の土台になります。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

String.prototype.slice()で文字列の指定範囲を切り出す方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのString.prototype.slice()の使い方：引数・戻り値・実例と注意点 →