【JavaScript入門】文字列操作を完全マスターする5つの技!

javascript-string-tutorial-top
マサト
書いた人 マサト

こんにちは、ライターのマサトです!

今回は、JavaScriptで「文字列」を操作するためのテクニックをまとめて学習します!

プログラミング全般において文字を扱うことはよくあるのですが、JavaScriptでは「文字列」を操作するためのメソッドがたくさん用意されているのが特徴です。

そのため、初学者の人はどこから学習を進めていけば良いのか迷うことも多く、また注意するべきポイントも多岐にわたるため勉強が難しくなりがちです。

そこで、この記事では文字列操作について「比較」「検索」「置換」「分割」「連結」の5つに分割して解説をし、それぞれの使い方や注意するべきポイントなどを整理しながらまとめました。

この記事を最初から順番に読んでいけば、JavaScriptにおける文字列操作をマスター出来るようになっているので、ぜひ一緒に頑張っていきましょう!

JavaScriptの文字列について!

まずは、JavaScriptにおける基本的な「文字列」の扱い方から学んでいきましょう。

文字操作のすべては、ここで学習する基礎がベースになっているので、いくつか注意するべきポイントも踏まえて忘れないようしておきましょう!

文字列を作ってみよう!

それでは、簡単な文字列の作り方から学習しましょう。

JavaScriptでは、文字列を作る方法として2つの書き方があり、それぞれ意味が違うので次の構文を確認しておきましょう!

JavaScriptでは、「’ ‘(シングルクォート)」又は「" "(ダブルクォート)」で文字列を囲む必要があるのですが、最もよく使われる方法としては、①の文字列を直接代入する方法です。

基本的には、この方法で文字列を作れば問題ありませんが、②のStringオブジェクトでも文字列を作ることが可能です。
①と②の決定的な違いは、「型」が異なるという点です。

①の方法で作った文字列は「String型」ですが、②の方法で作った文字列は「Object型」になるということを忘れないようにしましょう!

文字列のエスケープシーケンスについて

今度は、文字列の「エスケープシーケンス」について見ていきましょう。

どのような時に必要になるかというのは、次のサンプルを確認すると分かりやすいでしょう。

このサンプルは、実行するとエラーになります。

理由としては、文字列を「’ ‘(シングルクォート)」で囲んでいるものの、「that’s」に記述している「’」同じシングルクォートなので誤認識してしまうのです。

これは、次のようにエスケープシーケンスを使うことで回避できます。

出力結果は…

となります。

このサンプルのように、エスケープシーケンスは「\」を組み合わせることで実現できます。

「\’」と記述すると、「’(シングルクォート)」をそのまま出力することができるので、エラーになることはありません。

他にも、文字列内に「\n」と記述すると改行を行ってくれるので覚えておきましょう!

文字列の参照方法!

JavaScriptの文字列は、「配列」のように扱うこともできます。

イメージとしては、「おはよう」という文字列が[‘お’, ‘は’, ‘よ’, ‘う’]という配列になっている感覚に近いでしょう。

次のサンプルで具体的に見てみましょう!

出力結果は…

となります。

「str」に文字列「おはよう」が代入されていますが、添字で「[0]」を指定することで、0番目の文字を指定する意味になり、結果的に「お」だけが表示されます。

つまり、文字列は場所を指定することで、任意の1文字を抽出することもできるというわけです。

また、配列のように扱えるという点で「length」メソッドも利用可能なので、「文字数」を取得することも簡単です。

出力結果は…

となり、文字数が「4」ということが分かりますね!

文字列を「比較」してみよう!

ここからは、JavaScriptで文字列を操作するための具体的な方法を学習していきましょう!

まずは、文字列の「比較」について学習します。

一般的に、文字列を扱う場合は「比較」を行うことから始まるため、最初に覚える内容としては最適でしょう。

基本となるパターン

文字列の「比較」は、基本的に「===(厳密等価演算子)」を使って行います。

出力結果は…

となります。

「===」を使うと、左右の文字列が同じ場合には「true」が返されて、違う場合は「false」になります。

これにより、例えばユーザーが入力した文字列が、指定の文字列であるかどうかを確認する条件分岐が簡単に実現できます!

また、他にも「>」「<=」などの演算子を使った比較方法や、大文字・小文字を処理する方法などを、次の記事で詳しく解説しているので、ぜひ参考にしてみてください!

注意するべきポイント

文字列の「比較」で注意が必要な点は、同じ文字列であっても作り方によって判定が「false」になるケースがあるということです。

次のサンプル例を見てみましょう!

出力結果は…

となります。

「str1」と「str2」は、それぞれ同じ文字列の「こんにちは」を作成しています。

ただし、str1は「Stringオブジェクト」を利用しているのに対して、str2は文字列を直接代入しているので、それぞれ「Object型」「String型」となっており「型」が異なるわけです。

つまり、「===」による比較の場合、「値」と「型」が両方とも同じでないと「true」にならない点を忘れないようにしましょう!

文字列を「検索」してみよう!

ここからは、文字列の「検索」について学習しましょう!

ある文字列から、任意の「文字」を探し出すためには「検索」を行う必要があるわけですが、これを便利に実装できるメソッドがあります。

これらのメソッドの使い方や、注意するポイントを1つずつ勉強していきましょう!

基本となるパターン

JavaScriptで「検索」を行えるメソッドとしては、一般的に「indexOf」「match」の2つがあります。

「indexOf」メソッドを使うと、任意の文字列を検索して発見した「文字の位置」を数値で返してくれるのが特徴です。

サンプル例として、次のコードを見てください!

出力結果は…

となります。

このサンプルでは、「indexOf」を使って「ち」という文字を検索しています。

変数「str」の文字列は「こんにちは」なので、0番目から数えて3番目に「ち」が存在するので、出力結果に「3」が表示されたというわけです。(存在しなかった場合は「-1」が返ります)

このように、「indexOf」は使い方が直感的に分かりやすいので、最も気軽に利用できるメソッドと言えるでしょう。

次に、「match」を使った「検索」方法を見てみましょう!

こちらは、正規表現を利用した検索方法となっており、かなり具体的で強力なメソッドと言えます。

正規表現の基本的な使い方については、12種類の特殊文字を覚えるだけでマスターできる次の記事で詳しく解説しているので、ぜひ参考にしてみてください!

「match」の一般的な構文はこのようになります!

簡単に言えば、先ほど「indexOf」と記述していた箇所を「match」に置き換えただけですが、正規表現が扱えるので強力な検索が可能です。

例えば、次のサンプルでは「特定の条件」に一致した文字列を検索しています。

出力結果は…

を検出した配列が表示されます。

このサンプルでは、正規表現によって「user-」から始まるユーザー番号だけを検索しているのが分かります。
複数のパターンがある場合に、目的の文字列を効率よく検索するために正規表現はとても便利ですね。

「検索」のメソッドは他にも、後方検索で文字位置を特定する「lastIndexOf」や、文字位置の特定に正規表現が使える「search」などもあります。
これらの基本から応用までを、次の記事で詳しく解説していますのでぜひ参考にしてみてください!

注意するべきポイント

ここまでの学習で「indexOf」「match」を使った検索方法を学んできましたが、注意するべきポイントがあります。

JavaScriptの検索は、基本的に最初に一致した文字列を発見したら終了するという点です!

例えば、次のサンプルを見てみましょう!

出力結果は…

となります。

このサンプルでは、「indexOf」を使って「apple」という文字列を検索しており、文字の8番目に位置する「apple
」が抽出されてプログラムは終了しています。

しかし、よく見ると22文字目にも「apple」が存在しているのですが、こちらは検索されていませんね。

このように、通常は最初に一致した文字を検索した時点で終了するのですが、すべての文字を検索する方法もあります!

それが、正規表現のフラグオプションを使う方法です!

出力結果は…

を検出した配列が表示されます。

このように、正規表現にフラグオプション「g」を付与することで、文字列内に存在する特定の文字をすべて抽出することが可能になるわけです。

次の記事では、正規表現を使った全文検索の手法や、その結果によって条件分岐させる方法なども合わせて解説しているので、ぜひ参考にしてみてください!

文字列を「置換」してみよう!

今度は、文字列を「置換」する方法を学んでいきましょう!

「置換」は、任意の文字を別の文字に置き換える方法で、よく使うメソッドとしては「replace」があります。

このメソッドさえ覚えておけば、文字列の置換においてほとんどのケースに対応できるため、ぜひ覚えておきましょう!

基本となるパターン

まずは、一般的な構文を見てみましょう!

「replace」は、文字列の中から「対象の文字」を探し出し、「置換する文字」に置き換える作業を行ってくれます。

次のサンプルを見てください!

出力結果は…

となります。

このサンプルでは、「replace」を使って文字列の「晴れ」という部分を「雨」に置き換えているのが分かります。

このように、置き換えたい文字を指定するだけなので、非常にシンプルに扱えるのが特徴でしょう。

「replace」は、他にも正規表現を利用したり、独自の関数を組み込んだりすることも可能で、次の記事に詳しい活用法をまとめて解説しているので、ぜひ参考にしてみてください!

注意するべきポイント

「replace」による「置換」は、検索を行った時と同じように、最初に一致した文字を置換したら終了します。

例えば、次のサンプルを見てみましょう!

出力結果は…

となります。

サンプルの出力結果を見ると分かりますが、最初の「 , 」「 – 」に置換しているだけですね。

つまり、最初に一致した「 , 」を置換したところでプログラムが終了しているわけですが、すべての対象文字を置換したい場合はやはり正規表現のフラグオプションが活躍します!

出力結果は…

となります。

このサンプルでは、「g」フラグを付与しているので、すべての「 , 」が「 – 」に置換されているのが分かります。

また、正規表現を使わない方法としては、ちょっとトリッキーですが配列の「split」「join」メソッドを組み合わせることでも実現できます。
次の記事で、その手法を詳しく解説しているので、ぜひ参考にしてみてください!

文字列を「分割」してみよう!

ここからは、文字列の「分割」を行う方法を勉強していきましょう!

JavaScriptには、ある文字列を「指定した範囲」で分割し、抽出することができるメソッドがいくつか用意されています。

これらを活用することで、文字列操作のバリーエーションが確実に増えるので、ぜひマスターしておきましょう!

基本となるパターン

JavaScriptにおける「分割」で利用するメソッドは、一般的に「substr」「substring」「slice」の3つがあります。

これら3つのメソッドは、使い方が非常によく似ているのですが、細かい部分で使い勝手が違っています!

まずは、各メソッドの一般的な構文を見てみましょう!

基本的な使い方はどれも同じで、文字列の何文字目から分割するのかを「開始位置」で指定し、何文字目で終了するのかを「終了位置」で指定します。

ただし、「substr」のみ「終了位置」ではなく、開始位置からの「文字数」を指定するという点に注意してください。

それでは、具体的なサンプルを見てみましょう!

出力結果は…

となります。

このサンプルを見ると、各メソッドの出力結果がどれも同じになっているのが分かります。

「substr」は、0文字目から3文字分だけを分割し、「substring」「slice」は、0文字目から3文字目までを分割しているので、結果的にどれも同じ内容になっているわけです。

ここまでの内容だと、どのメソッドも同じ使い方で同じ結果を得られるように思いますが、実は細かい部分が少しずつ違うので詳しく見ていきましょう!

注意するべきポイント

ここからは、「substr」「substring」「slice」の細かい相違点をまとめていきます!

まず、大前提として先ほども解説しましたが、「substr」の指定が「開始位置 – 文字数」なのに対して、「substring」「slice」は「開始位置 – 終了位置」という違いがあります。

また、「終了位置」が省略可能というのはいずれのメソッド同じなのですが、開始位置に「マイナス値」を指定すると変化が現れます!

出力結果は…

となります。

このサンプルは、開始位置に「-1」を指定していますが、「substr」「slice」の出力結果が同じになっているのが分かります。

実は、マイナス値を指定すると、「substr」「slice」は「全体の文字数 – マイナス値」を開始位置とするしくみになっており、「substring」は無条件に「0」へと変換されるのです。

つまり、全体の「文字数(11文字) – マイナス値(1)」となり、開始位置は「10文字目」になるので、「substr」「slice」は「!」だけが表示され、「substring」は0文字目から末尾までを表示したわけです!

もう1つ相違点としては、開始位置が終了位置よりも大きな数値になった場合です。

出力結果は…

となります。

このサンプルの場合、開始位置が「4」で終了位置が「0」なので、開始位置の方が大きな数値を指定しています。

すると、「substring」だけは自動的に反転して「 0, 4」に変更されるので、0文字目から4文字目までを表示しているわけです。
「sunstr」「slice」に関しては、認識できずに「空文字」が返るようになっています。

これらの細かい違いを表にまとめましたので、ぜひ参考にしてみてください!
javascript-string-sheet-tutorial

また、1文字だけを分割する「charAt」や、結果を配列データとして取得できる「split」などを活用した分割手法を次の記事で詳しく解説していますので、こちらも参考にしてみて下さい!

文字列を「連結」してみよう!

ここからは、文字列の「連結」を学習していきます!

ある文字列を別の文字列と連結して、1つの文字列にすることが可能で、例えばユーザー入力を受けて別のメッセージに差し替えるような機能を簡単に作ることができます。

基本となるパターン

文字列を連結する一般的な方法としては、「+」を使った例が多いでしょう。

このように、文字と文字を「+」で繋げるだけで、1つの文字列にすることが出来るので便利ですね!

また、別の方法としては、「join」メソッドを使う手法もあります。

出力結果は…

となります。

「join」は、配列の要素を1つの文字列として繋ぎ合わせることが出来るので、文字列を配列データとして格納しておけば利用できるわけです。

また、サンプルでは「join(”)」のように空文字を指定していますが、「(‘。’)」「(‘、’)」などを指定することで、繋ぎ目を調整することも可能です!

出力結果は…

となります。

次の記事では、さらなる「連結」の活用方法や、「concat」を使った手法などをいくつか詳しく解説しているので、ぜひ参考にしてみてください!

注意するべきポイント

文字列の「連結」において、注意が必要となるのが「文字と数字」を組み合わせた場合です。

JavaScriptでは、文字と文字を「+」で連結することができますが、「数字」も同じように連結できます。

例えば、次のサンプルを見てください!

これは、文字列と数字を組み合わせた例で、変数「num」には数値の「5」が代入されているので、出力結果が「答えは15です」と表示される気がします。

ところが、出力結果は…

となります。

これは、文字列と連結してしまうと、数値であっても「文字列」の扱いになってしまうという特性があるためで、あくまで文字列の「10」と「5」という意味になり、そのまま連結して「105」となっているわけです。

ところが、注意しなければいけないのは、最初に数値が記述されていると文字列扱いにならないという点です!

出力結果は…

となります。

先ほどのサンプルは、「文字+数値+文字」という組み合わせでしたが、今回のサンプルは「数値+文字」という組み合わせであり、最初に数値が評価されるため、そのまま計算されて「15」になっているわけです。

つまり、最初に文字列を評価した場合は、それ以降をすべて文字列扱いにするのがJavaScriptの特徴なので、忘れないようにしておきましょう!

まとめ

今回は、JavaScriptにおける文字列操作を一通り学習しました!

もう1度、ポイントを絞ってまとめてみましょう!

・文字列は、Stringオブジェクトから作る方法と、直接代入する方法がある!

・文字列の比較は、「値」と「型」に注意する!

・文字列の検索と置換は、最初に一致した文字を処理したら終了する!

・文字列の分割は、各メソッドの数値指定における細かい仕様の違いに注意する!

・文字列の連結は、文字と数字の組み合わせ順序に注意する!

という内容でした!

これらのポイントを誰かに説明できるようになるまで、自分でも実際にコードを書きながら学習を進めていくように頑張りましょう!

JavaScriptカリキュラム無料公開中!

この記事はJavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】の一部になります。このカリキュラムは、プログラミング入門者が、JavaScriptの基礎学習からアプリ開発、さらには仕事獲得まで体系的に学べる内容となっています。

JavaScript学習に必要な情報を一つにまとめていますので効率よくJavaScriptを学ぶことが出来ます。この機会に是非活用していただければと思います。


33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーでWEBエンジニアをやられている濱口直行さん。33歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。


JavaScriptを最短で習得したい方へ

弊社マンツーマンレッスンでは、未経験者の方でも安心して学習できるように

  • プログラミング基礎学習
  • オリジナルアプリ開発
  • 仕事獲得

まで徹底したサポートを行っています。

まずは『無料体験レッスン』で、弊社のコンサルタントと一緒にあなた専用の学習方法やカリキュラムを考えてみませんか?

JavaScriptならではの学習方法や仕事獲得方法など、より具体的なアドバイスもさせていただいています。

詳しくは下の画像をクリックして弊社サービス内容をご確認ください。

cta_js5

学習者インタビュー

32歳ベンチャー企業元役員が起業してプログラミングを学んだ話
ヨガスタジオのマネージャーだった私が3ヶ月でWeb制作をマスターするためにした”たった1つ”のこと
Uターン女子がRubyを学んで理想のライフスタイルを手に入れた話
ダメ営業マンがわずか3ヶ月でエンジニアデビューできた理由

プログラミング学習者必見

専属講師に質問し放題、レッスンし放題、最短1ヶ月でフリーランスエンジニア
プログラミング学習カリキュラム無料公開中
Ruby学習カリキュラム無料公開中
 1記事最大11,000円!テックライター募集


LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。

JavaScript以外の趣味は、旅をしながらの登山やアジア巡りなど。