文字列を操作してみよう

このレッスンでは、JavaScriptで文字列を操作する代表的なメソッドを学び、テキストデータを自在に加工できるようになることを目標にします。「JavaScript 文字列 操作」「JavaScript toUpperCase 使い方」で調べている方向けの内容です。

文字列にもいろいろなメソッドが用意されています。.toUpperCase()は大文字に変換、.slice(開始, 終了)は一部を切り出す、.split(区切り文字)は区切り文字で分割して配列にする、といった具合です。文字列操作はユーザー入力の処理や画面表示の整形など、実際の開発で最も頻繁に使う機能の1つです。

サンプルコードではmessageという文字列に対して、大文字変換・.lengthによる文字数の取得・.slice(0, 5)による先頭5文字の切り出し・.split(", ")による分割を試しています。これらのメソッドは組み合わせて使うこともでき、「入力された文字列の前後の空白を取り除いてから大文字に変換する」といった一連の処理もスッキリ書けます。

初心者がよくつまずくのが、.slice()の終了位置は「その番号の1つ手前まで」を指す点です。.slice(0, 5)は0番目から4番目までの5文字を取り出す、という感覚のズレに戸惑いやすいので注意しましょう。また文字列は配列と違い、直接中身を書き換えることができない(常に新しい文字列が返る)点も覚えておくと混乱しません。

実際の開発現場では、ユーザーが入力した名前や住所を整形して表示したり、検索キーワードを分割して絞り込み検索を行ったりと、文字列操作はWebアプリのほぼすべての画面で登場します。正規表現(後のレッスンで学びます)と組み合わせると、さらに高度な文字列処理も可能になります。

テンプレートリテラル(バッククォート)と組み合わせれば、文字列の途中に変数の値を埋め込んだメッセージも簡単に組み立てられます。文字列操作のメソッドは種類が多いですが、まずは今回登場した基本の4つをしっかり覚えておけば、実務でもかなりの場面に対応できます。

.replace()を使うと、文字列の一部を別の文字列に置き換えられます。第1引数に置き換えたい文字列や正規表現、第2引数に置き換え後の文字列を指定する形で、テキストの一括置換にもよく使われる基本メソッドです。