JavaScriptのきほんを学ぼう
■第15話：便利な文字列操作関数
（最終更新日：2023.04.09）
（絵が小さい場合はスマホを横に）
「実践的な技術を身に着けたい！」
文字列操作の基本、応用、実践と説明するなかで、文字列操作に有用な関数を紹介してきた。
しかしながら、便利な関数全てを紹介できた訳ではない。
今回は、まだ紹介しきれていない文字列操作に便利な関数を幾つか紹介する。
どんどん使って、自分のものにしていこう。
１. 文字列の切り取り（substr）
文字の切り取りは、 第13話でsubstringとsliceの使い方を紹介した。
後ろから文字数を設定できるsliceが特徴的だった。今回は、もう一つの文字の切り取り関数、substrについて説明する。
substrは文字列を切り出す終了位置ではなく、切り出す文字数を指定して、どこまで切り取るのかを設定する。
例えば下記の場合は、最初のコンソールは1要素目（0から始まるので2個目）の1から3文字分切り取るので、123となる。
二個目のコンソールは後ろから-5要素目の5から3文字分切り取るので、567となる。
このように文字数で切り取るというのは、「〇文字分のデータが欲しい」という場合に分かりやすい表現になるのだが、
残念ながらこのsubstrは非推奨になった。将来的には削除されるので、今後は使うのはやめよう。
この関数の実行結果は読めるようにはしておき、自分たちがコーディングするときは、substringやsliceで対応しよう。
substr関数、文字の切り取り
２. 文字列の検索（lastIndexOf）
文字の検索は、 第13話で正規表現を用いて検索する方法と、 第12話で指定した文字列が含まれているかどうかのinclude、先頭から検索するindexOfを紹介した。 ここでは、文字列の最後から検索するlastindexOfを紹介する。下記はlastindexOfを使用して、ubを検索した例である。 検索は後ろから行われる。2つ目の引数を指定しない最初のconsole.log内のパターンだと、一番後ろにある「ub」がヒットして、 そのuの位置8が出力される。ここで注意したいのは、出力される位置は前からの順番になる。 2つ目のconsole.logのパターンは、第2引数に6が指定されている。この6も前からの位置を示しており、 6要素目（7文字目）から検索して始めにでるubをヒットしている。そのため、後ろから数えて2つめの「ub」がヒットし、その位置5が出力される。 あるキーワードで最後に出た場所を検出するということは、ケースとしては結構ある。 例えば、この命令（文字列）で一番最後に実行したコマンドは何処かという具合である。 indexOfと共に使えるようにしよう。
後方から文字列を検索（lastIndexOf）
３. 文字列を繰り返し生成（repeat）
本項ではrepeatメソッドを使用して、文字列を指定された回数だけ繰り返して新しい文字列を生成する方法について説明する。 repeatメソッドは、同じ文字列やパターンを繰り返し作成する際に非常に便利だ。 repeatメソッドは、文字列オブジェクトのメソッドであり、引数として繰り返し回数を受け取る。 繰り返し回数が0の場合は空の文字列が返される。 下記の例では、repeatメソッドを使用して、与えられた文字列（'すたば'）を3回繰り返している。 結果として得られる文字列は 'すたばすたばすたば' である。 repeatメソッドは、例えばテキストの装飾や図形の生成、インデントの追加など、さまざまな状況で役立つ。 このメソッドを使用することで、簡単かつ効率的に文字列を繰り返し生成できる。
文字列を繰り返し生成（repeat）
４. 文字列の開始と終了をチェック（startsWith、endsWith）
本項では、startsWith()およびendsWith()メソッドを使用して、文字列が指定された接頭辞で始まるか、 指定された接尾辞で終わるかどうかをチェックする方法について説明する。 startsWith()メソッドは、文字列が指定された接頭辞で始まるかどうかを判定する。このメソッドは真偽値を返す。 下記は、Helloで始まるか、helloで始まるかをチェックしている。前者はtrueで、後者はfalseになる。
指定した文字列で始まるかをチェック（startsWith）
endsWith()メソッドは、文字列が指定された接尾辞で終わるかどうかを判定する。このメソッドも真偽値を返します。 下記は、Worldで終わるか、worldで終わるかをチェックしている。前者はtrueで、後者はfalseになる。
指定した文字列で終わるかをチェック（endsWith）
５. ゼロ埋めする（padStart、padEnd）
本項では、padStart()およびpadEnd()メソッドを使用して、文字列の長さを指定された長さに調整する方法について説明する。 これらのメソッドは、文字列の先頭または末尾に指定された文字を追加して、文字列の長さを調整することできる。 追加する文字が指定されていない場合、デフォルトでスペースが使用される。 この機能は、整形されたテキストや揃えた表示が必要な場合に特に役立つ。例えば、よく使うのが通し番号の先頭ゼロ埋めである。 番号が6桁と決まっている場合、例えば500番は000500にする必要がある。
指定した文字で文字列の長さを調整（padStart）
padEnd()メソッドは、文字列の末尾に指定された文字を追加して、文字列の長さを指定された長さに増やす。 こちらも追加する文字が指定されていない場合、デフォルトでスペースが使用される。 下記の例では、10文字になるまで末尾を....で調整している。表示の長さを揃えたい場合などに有効である。
指定した文字で文字列の長さを調整（padEnd）
６. まとめ
今回、今まで紹介しきれなかった便利な文字列操作関数の数々を紹介した。 文字列の検索やゼロ埋めという部分は、実務でもかなり使うことは多いだろう。 また、他にも、testやsearchといった検索に関する便利な関数で紹介しきれていないものもある。 全てを覚える必要はないが、これらの便利な関数を用いると自分で処理を書くことなく、文字列を操作できる。 頭の片隅で覚えておいて、必要に応じて調べて使えるようにしよう。
▼参考図書、サイト
【JavaScript】 substring(), slice(), substr()の違い Motoki's Brain
指定の文字列が含まれているか検索し見つかった場合は位置を返す JavaDrive
JavaScript 文字列の始まり/終わり ITSakura