VIDEO LESSON

JavaScriptのlastIndexOf()：最後の区切り文字を探して文字列を分けるの解説動画

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

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

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

0:00こんにちは。
0:00今回はラストインデックスオブを紹介します。
0:04これは、指定した文字列が最後に現れる位置を返すメソッドです。
0:09たとえば、チーム、サービス、ワーカーとコロンでつながった識別子から、最後の名前と、
0:14その前の所属部分を取り出したい場面を考えてください。
0:19区切り文字が何個あるか決まっていなくても、最後の区切りの位置が分かれば処理できます。
0:26単なる有無の確認に加えて、どこで分けるかという判断材料が得られるのが特長です。
0:32この動画では、引数と戻り値、識別子を分ける実践例、検索位置の指定、失敗しやすい条件まで、
0:36実行結果と一緒に学びます。
0:41配列にも同名のメソッドがありますが、この動画で扱うのは文字列のメソッドです。
0:47まず動作環境を確認します。
0:49エムディーエヌでは、このメソッドは広く利用可能な機能とされ、二千十五年七月以降のブラウザー間で利用できると説明されています。
0:57現在のクローム、エッジ、ファイアーフォックス、サファリで使用できます。
1:01ブラウザー専用のエーピーアイではなく、ジャバスクリプトの組み込みメソッドなので、
1:05ノード・ジェイエスでも動作します。
1:09この記事の実行対象はノード二十二以降ですが、二十二で新しく追加された機能という意味ではありません。
1:15追加パッケージや実験用フラグは不要で、実機でも関数として備わっていることを確認済みです。
1:21書き方を確認します。
1:23対象の文字列に続けてラストインデックスオブと書き、カッコの中に探したい部分文字列を渡します。
1:31これは正規表現のパターンではなく、文字列そのものを探す指定です。
1:37第二引数のポジションは省略可能で、一致の開始位置の上限を指定します。
1:43省略した場合は文字列全体から最後の一致を探します。
1:47戻り値は、見つかった部分文字列の開始位置を表す整数で、先頭はゼロです。
1:54見つからなければマイナス一を返します。
1:57検索は大文字と小文字を区別します。
2:00対象の文字列自体は変更されません。
2:03基本例を見ます。
2:04チーム、サービス、ワーカーをコロンでつないだ識別子について、コロンを探すと、
2:09最後のコロンの位置である十二が返りました。
2:13あとはスライスを使い、位置より前を切り出すと所属部分、位置の次から切り出すと最後の名前が得られます。
2:20実機でもこの結果を確認しました。
2:23区切りの個数が分からなくても、最後の一個だけを基準にできるのが、このメソッドの強みです。
2:29インデックスオブが最初の一致を返すのに対し、こちらは最後の一致を返す、という対比で覚えると分かりやすいでしょう。
2:37位置が分かれば、あとは切り出すだけという流れを意識してください。
2:42実践として、最後の区切りで分ける独自関数を作ります。
2:46まず対象と区切りが文字列かどうかを確認し、区切りが空文字列ならエラーにします。
2:52次にラストインデックスオブで位置を探し、マイナス一なら見つからなかったとして、
2:56元の文字列を後半に入れて返します。
3:01見つかった場合は、位置より前を前半、位置に区切りの長さを足した場所からを後半として返します。
3:08区切りが二文字以上でも、長さの分だけ進めるので、区切りの一部が後半に残りません。
3:14記事のサンプルで実行すると、期待出力どおりの結果になることを実機でも確認しました。
3:20境界ケースを確認します。
3:22区切りがない識別子では、ファウンドがフォルスになり、前半は空、後半に元の文字列が入ります。
3:29区切りが先頭にある場合は、見つかっているのに前半が空になります。
3:33この二つは前半だけ見ると区別できないため、ファウンドという項目で区別できるようにしています。
3:40区切りが末尾にある場合は後半が空になります。
3:43また、区切りがコロン二つのような複数文字でも、正しく分割できました。
3:48実機でもすべて記事の期待出力と一致しています。
3:51境界の結果を先に決めておくことが、実践コードの要点です。
3:55検索位置を指定する使い方を見ます。
3:58エーババという文字列では、エーバが位置ゼロと位置二の両方で始まり、重なって一致します。
4:06引数なしでは最後の一致である二が返ります。
4:09そこから一を引いた位置を上限に再検索すると、前の一致であるゼロが得られました。
4:16ここで重要なのは、第二引数は一致の開始位置の上限だということです。
4:21一致全体の末尾の上限ではありません。
4:25位置二を指定した検索でも、位置二で始まる一致は対象になります。
4:30負数を渡すとゼロとして扱われ、末尾から数える指定にはならない点にも注意してください。
4:37失敗しやすい書き方を取り上げます。
4:39戻り値をそのまま条件式に入れてしまうことです。
4:42位置ゼロで見つかった場合、その値はゼロなので偽と判定されてしまいます。
4:47逆に、見つからなかった場合のマイナス一は、数値としては真と判定されます。
4:52つまり、見つかったのに処理されず、見つからないのに処理されるという、まったく逆の結果になりかねません。
4:59検索結果はいったん変数に保存し、見つかったかどうかはマイナス一ではないことと比較して判定してください。
5:06記事の実践コードで明示的に比較しているのは、この取り違えを避けるためです。
5:11空文字列と引数の省略にも注意します。
5:13空文字列を探すと、通常の区切り検索とは違う結果になり、たとえばエービーシーで探すと長さと同じ三が返ります。
5:22区切りとして意味が曖昧になるため、記事の実践コードでは独自に禁止しました。
5:28もう一つ、検索語を省略したりアンディファインドを渡したりすると、文字列のアンディファインドが検索されてしまいます。
5:37エーピーアイから受け取った値などは、意図した文字列かどうかを確認してから渡しましょう。
5:43実践コードの型チェックは、こうした暗黙の変換による見落としを減らすためのものです。
5:50位置の数え方についても確認します。
5:52ジャバスクリプトの文字列の添字は、ユーティーエフ十六のコード単位で数えます。
5:58絵文字は見た目では一文字でも二単位を使うため、絵文字の直後のコロンの位置は二になります。
6:04実機でも二を確認しました。
6:06取得した位置を同じ文字列のスライスへ渡す用途には適していますが、画面上の何文字目かという案内へそのまま転用するのは避けてください。
6:16また、このメソッドは同期処理でプロミスは返しません。
6:19引用符で囲まれた範囲などを理解するものでもないため、構文規則のあるデータ全体の解析には向きません。
6:27まとめです。
6:28ラストインデックスオブは、指定した文字列が最後に現れる開始位置を返し、なければマイナス一を返します。
6:36ポイントは三つです。
6:38まず、第二引数は開始位置の上限で、重なる一致も探せること。
6:43次に、判定はマイナス一との比較で明示し、戻り値を条件式に直接入れないこと。
6:49そして、空文字列の検索やユーティーエフ十六単位の位置など、境界の仕様を押さえることです。
6:56活用場面では、区切り規則を自分たちで決めた識別子に絞り、区切りなしを許すかなどの入力規則を先に決めるのがコツです。
7:06まずは記事の実践例を実行し、結果を予測してから確かめてみてください。
7:12お疲れさまでした。
7:13検索の道具として素直に使える範囲を見極めることが大切です。

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

この動画で学べること

String.prototype.lastIndexOf()で最後に現れる文字列の位置を調べる方法を解説。引数・戻り値、ブラウザーとNode.jsの実行手順、区切り文字の検索例、未検出やUnicodeの注意点を学べます。

解説記事・サンプルコードを読む：JavaScriptのlastIndexOf()：最後の区切り文字を探して文字列を分ける →