文字列の基本についてはすでに見ました。ここからはレベルを上げて、組み込みのメソッドを使用して文字列に対して実行できる便利な操作について考えてみましょう。例えば、文字列の長さを調べたり、繋げたり、分割したり、ある文字を他の文字に置き換えたりなどです。

前提条件: 基礎的なコンピューターの知識、HTML と CSS の基本の理解、JavaScript が何かを知っていること。
目的: 文字列がオブジェクトであることを理解して、そのオブジェクトで使用できる基本的なメソッドを使って文字列を操作する方法を身に付ける。

オブジェクトとしての文字列

前にも言いましたが、もう一度言いましょう。JavaScript では全てのものはオブジェクトです。たとえば、次のように文字列を作った時も、

var string = 'This is my string';

この変数は文字列オブジェクトのインスタンスになり、大量のプロパティとメソッドが使用可能となります。Stringオブジェクトのページに行って、横にある一覧を眺めてみてください!

また、脳が溶け出しそうかもしれませんが、安心してください!先ほどのページにある、ほとんどのメソッドは学習の初期に覚える必要はありません。しかし、今から紹介する、文字列操作のメソッドはとてもよく使いますのでぜひ覚えましょう。 

すぐ下に新しいコンソールを用意したので、ここに入力してみましょう (このコンソールを新しいタブやウィンドウで開いたり、 ブラウザーのコンソールを使っても構いません)。

文字列の長さを調べる

ただlengthプロパティを使用すればよいので、とても簡単です。次の行を入力してみましょう。

var browserType = 'mozilla';
browserType.length;

これで 7 という数値が戻ります。なぜなら "mozilla" は 7文字だからです。例えば、文字の長さによって文字列を並べたいときや、ユーザーがある長さ以上のユーザー名をフォームの入力フィールドに入れたことを知らせたりするような場面で便利です。

特定の文字列を扱う

前の例と関連していますが、文字列に対して角括弧記法を使用することで文字列中の任意の 1文字が得られます。つまり角括弧 ([]) を変数名の後ろに付け、その中に数値を入れることで、その番目にある文字が返ってきます。例えば最初の一文字を取得するには次のようにします。

browserType[0];

コンピューターは 1 からではなく、0 から数えます!文字列の一番最後の文字を取得したいときは、先ほどの length プロパティと組み合わせて以下のようにします。

browserType[browserType.length-1];

"mozilla" の長さは 7 ですが、0 から始まるので、最後の文字の位置は 6 になります。よって length-1 とする必要があるのです。この書き方を、例えば文字列のリストをアルファベット順に並べるときに、先頭の文字を取ってくるのに使えます。

部分文字列を探して抽出する

  1. 長い文字列の中に、ある文字列が存在するか調べたいと思うことがあります (よく文字列中に部分文字列が存在するなどといいます)。これには、探したい部分文字列を引数に取る indexOf() メソッドを使用することで可能です。
    browserType.indexOf('zilla');
    このコードは 2 を返します。なぜならば、"mozilla"という文字列中で、部分文字列"zilla"の開始位置が 2 (0、1、2 — つまり 3文字目)であるからです。このようなコードは文字列を絞り込むときなどに使います。例えば、ウェブサイトのアドレスの一覧があったとき、その中から"mozilla"を含むものだけを表示したい場合などです。
  1. 部分文字列が含まれてることを確認するもう一つの方法があり、こちらのほうが効果的な場合があります。
    browserType.indexOf('vanilla');
    上記のコードは -1 を返します。これは部分文字列、この例では'vanilla'という文字列が、対象の文字列中に存在しないことを示しています。

    -1 が返ることを利用して'mozilla'という部分文字列が文字列全体に含まれていないかどうか調べることができます。以下のように否定演算子を使用することで、含まれていることを判定することができます。
    if(browserType.indexOf('mozilla') !== -1) {
      // 文字列で何かする
    }
  2. 部分文字列がその文字列のどこから始まるかが分かっており、どこで終わっているかがわかれば、その部分文字列を slice() メソッドを使用することで抽出することができます。
    browserType.slice(0,3);
    このコードは"moz"という文字列を返します。最初の引数は抽出を始める最初の位置で、2番目の引数が抽出する最後の文字の直後の位置です。つまり、この場合先頭から 4番目の手前までの文字列が切り出されたということです。言い換えると、この場合は 2番目の引数と同じ 3文字が切り出されました。
  3. また、ある文字より後の文字を抽出したい場合には、2 つ目の引数を省略することができます!代わりに抽出を開始したい文字の文字列中の位置を指定するだけでよいです。
    browserType.slice(2);
    この例は"zilla"という文字列を返します。なぜなら、2 の位置にある文字は z であり、2番目の引数を指定していないため、3文字目から最後までが部分文字列として戻ったのです。 

: slice() の 2番目の引数はオプション (任意指定) です。もし指定しなければ、元々の文字列の最後まで切り出しを行います。他にもオプションがありますので、さらに詳しく知りたければslice()のページで調べてみましょう。

大文字・小文字の切り替え

String にはtoLowerCase()toUpperCase()という 2 つのメソッドがあり、引数として渡された文字列のすべての文字の大文字・小文字を切り替えます。これは例えば、ユーザーの入力を DB に保存する場合に、値を標準化するのに便利です。

それでは次の行を入力し、何が起きるか見てみましょう。

var radData = 'My NaMe Is MuD';
radData.toLowerCase();
radData.toUpperCase();

文字列の一部分を書き換える

replace()メソッドを使用することで、ある部分文字列を他の文字列に置き換えることができます。基本レベルではとても単純に動作しますが、replace() メソッドは高度な機能を持っています (今回はその機能は紹介しませんが)。

検索する文字列と、置き換える文字列の 2 つを引数に取ります。次の例を実行してみてください。

browserType.replace('moz','van');

browserType 変数に対して文字列の置き換えをした結果を、実際のプログラムで使う場合、戻ってきた値をもう一度変数値に設定し直さなければないのに注意してください。つまりこのメソッドは変数に設定されている部分文字列を自動的には更新してくれないのです。実際に変数の内容を更新するためには browserType = browserType.replace('moz','van'); のように書きます。

アクティブ学習の実例

この章では、文字列を操作するコードを書いてもらいます。以下のどの問題も文字列の配列をループで回して、順序なしリスト形式で表示しますが、配列やループに関して今は理解する必要はありません。配列については今後の記事で説明します。必要なのは、どのような書式で出力するかという要求を満たすコードを書くことです。

どの例も「リセット」ボタンがあるので、コードが動かなくなった場合は使用してみてください。もし本当に行き詰まってしまった場合には、「答えを見る」ボタンを押すことで、回答を見ることができます。

挨拶を選別する

まずは簡単な問題から始めます。挨拶状に使用するメッセージの配列の中から、クリスマスのメッセージのみを選別し、並べ替えてください。やるべきことは、メッセージがクリスマスメッセージであることを判定しその場合のみ表示されるよう、if ( ... ) 文の条件式を埋めることです。

  1. まず、各メッセージがどうであればクリスマス(Christmas)メッセージとみなせるかを考えてください。こういうメッセージ中にはどんな文字列があり、それが存在するか判定するのにどんなメソッドが使えるでしょうか?
  2. それから、オペランド 1 演算子 オペランド 2 の形で条件を書いてください。その条件は左辺と右辺が等しいかというものでしょうか?もしくは左辺のメソッドの戻り値が、右辺であるかというものでしょうか。
  3. ヒント: 今回の場合、メソッドの戻り値の結果が何でないかを判定するとよいでしょう。

単語の最初の文字を大文字に直す

この課題ではイギリスの都市名を題材にします。ところが、単語の大文字と小文字がぐちゃぐちゃになっています。そこで最初の文字を大文字にし、残りをすべて小文字にしてみましょう。こういう手順でやってみます:

  1. input 変数に入っている文字列全体を小文字に変換し、それを新しい変数に格納します。
  2. この新しい変数にある最初の文字を取り出し、さらに別の変数に格納します。
  3. その新しい変数を部分文字列とし、小文字ばかりの文字列にある最初の文字を置換して、大文字化します。この置換処理の結果を別の新しい変数に格納します。
  4. input 変数ではなく、最終結果が result 変数の値に代入されるよう修正します。

: ヒント — 文字列メソッドのパラメーターは文字列リテラルである必要はありません。変数でもよいですし、メソッドが呼び出される変数であっても構いません。

既存の部分から新しい文字列を作成する

最後の課題では、北イングランドの駅に関する情報が入っている文字列を格納している配列を扱います。この文字列にはデータ項目として、アルファベット 3文字の駅コード、次にコンピューター読み取り用のデータ、次にセミコロン、そして人間が読める駅名が入っています。例:

MAN675847583748sjt567654;Manchester Piccadilly

駅コードと駅名を抽出し、それを文字列にまとめてこのような形にします:

MAN: Manchester Piccadilly

このようにプログラムしてみましょう:

  1. アルファベット 3文字のコードを抽出し、新しい変数に格納します。
  2. セミコロンの文字インデックス番号を検索します。
  3. セミコロンの文字インデックス番号を参照位置にして、人が読める駅名を抽出し、新しい変数に格納します。
  4. この 2 つの新しい変数と文字列リテラルとを連結し、最終的な文字列を作成します。
  5. input 変数ではなく、この最終結果が result 変数の値に代入されるよう修正します。

結論

プログラミング、特に JavaScript では単語や文を処理できるようになることが大事であるという現実から逃れることはできません。それはウェブサイトは人とのコミュニケーションがすべてとなるためです。この記事では、文字列を処理するのに当面知っておくべき基礎を解説しました。今後もっと複雑なトピックに進んで行くときに役立つはずです。次に、配列を見てみます。重要なデータ型のうち、短期間で押さえておくべき最後の 1 つです。

 

このモジュール内

 

ドキュメントのタグと貢献者

このページの貢献者: Uemmra3, chameleonhead, nishinos
最終更新者: Uemmra3,