文字列を加工する方法
Updated
2021/8/8 9:33
Author
Jumpei Ikegamiorder
8
JavaScriptで、文字列を加工して別の文字列を作るときの主な方法について説明します。
文字列を連結する
複数の文字列をつなげて1つの文字列にするには、
+記号を使います。3つ以上の文字列も連結できます。JavaScript
チュートリアルでは、URLのクエリ文字列を動的に設定する部分で文字列の連結を使いました。
2. ワンクリックでAmazonの商品名をGoogle検索するボタンを作る2021/6/20 4:332021/8/8 8:00JavaScript
文字列の一部を別の文字列で置換する
replace()というメソッドを使うと、文字列の中から条件に合う文字列を検索し、その部分を別の文字列で置換することができます。replace()メソッドの使い方は次の通りです。JavaScript
次の例は、全角スペースを半角スペースで置き換える例です。（見た目は地味でわかりにくいですが、大事。）
JavaScript
実際には、不要な文字列を除去するときによく使います。その場合、「置換後の文字列」に空文字（
''）を設定します。JavaScript
複数箇所を同時に置換する
replace()メソッドの「検索したい文字列」には、正規表現を設定することができます。正規表現とは、文字列のパターンを表す特殊な表現方法です。最も正規表現を使う場面は、「検索したい文字列」にマッチする箇所が複数ある場合です。
たとえば、先ほどのカンマ区切り数字からカンマを除去する例ですが、元の文字列にカンマが複数ある場合は、うまく動きません。
JavaScript
このように、「検索したい文字列」にマッチする箇所が複数ある場合は、正規表現で「検索したい文字列にマッチする全ての箇所」というのを指定する必要があります。具体的には、正規表現を使って次のように記述します。
JavaScript
スラッシュで囲まれている部分は、正規表現になります。正規表現の末尾にgをつけると、「マッチした全ての箇所」という意味になります。
gは、globalの頭文字です。多くの場合は、「検索したい文字列」の囲み文字をクォーテーションからスラッシュに変えて最後にgを付ければ、「複数箇所を同時に置換する」が実現できます。JavaScript
ただし厳密には、正規表現を正しく理解して使う必要がある場面もあります。最もよくあるケースは、「検索したい文字列」の中に「正規表現として特別な意味がある文字」が入っている場合です。たとえば、ピリオド（
.）は正規表現上「改行以外の全ての文字」を表す特別な文字です。ピリオドをカンマに置換したいとき、ピリオドを正規表現中でそのまま使うとバグってしまいます。JavaScript
そんなときは、「正規表現として特別な意味がある文字」の前にバックスラッシュ（
\）を入れて、「これは特別な意味がある文字列じゃないですよ」というのを教えてあげる必要があります。ちなみに、このように特別な意味から逃れさせることを「エスケープする」といいます。JavaScript
ちなみに正規表現を駆使すると、「複数箇所を同時に置換する」以外にも、多様かつより複雑な文字列置換を実現することができます。詳しくは、正規表現のリファレンスで説明します。
文字列の一部を取り出して使う
slice()というメソッドを使うと、文字列のN番目からM番目までの文字列を取り出すことができます。slice()メソッドの使い方は次の通りです。JavaScript
次の例は、商品IDから最初の4文字を取り出して、それをカテゴリIDを表す変数に入れる例です。
JavaScript
slice()メソッドで指定する「N番目」や「M番目」は、文字列の中での位置を表す番号で、「インデックス」と呼ばれます。ここで、注意点が2つあります。
まず、インデックスは
1ではなく0から始まります。次に、このインデックス番号は、実は文字そのものではなく、文字と文字の間に振られています。何を言っているか全くわからないと思うので、具体例で説明します。'Ikegami'という文字列があったとき、インデックスの3が指すのはどこでしょうか？それは、「g」ではなく、「eとgの間」です。無理やり'Ikegami'の間に数字の0〜7を入れて表現してみると、次の通りです。JavaScript
たとえば、
'Ikegami'をslice()で色々と細切れにしてみると、次のようになります。JavaScript
上のインデックスと見比べてみると、どこがスライスされるかわかるのではないでしょうか。
文字列を配列に変換する
複数の要素が1つの文字列にまとめられている場合、配列に変換してから扱った方が便利なことがあります。
たとえばGoogleで複数の単語を用いて検索した場合、検索結果ページのURLクエリパラメータ
qの中では、検索単語が+区切りで含まれます。これら複数の検索単語を使って何かの処理をするプログラムを記述する場合、配列として扱う方が便利です。文字列の中から要素を取り出して配列に変換することで、配列を操作するための便利なメソッド群が使えるようになります。特に、検索ワードのように要素の数が固定されないケースの場合、配列の恩恵を強く受けることができます。
split()というメソッドを使うと、指定した区切り文字を使って文字列をスプリット（分割）し配列に変換してくれます。split()メソッドの使い方は次の通りです。JavaScript
次の例は、検索結果ページのURLクエリパラメータ
qを配列化して個別のログに出力するプログラムです。JavaScript
配列の操作については別の記事で詳しくご紹介しますが、
forEach()というメソッドによって、配列それぞれの要素に対して処理を実行できます。ちなみに、ChromeのアドレスバーからGoogle検索をすると、検索結果ページのURLクエリパラメータにはいくつかのパラメータが
&区切りで追加されます。'https://www.google.com/search?q=foo+bar+baz&oq=foo+bar+baz&aqs=chrome.0.69i59j0l7.13648j0j9&sourceid=chrome&ie=UTF-8'
そもそも、ここから
'foo+bar+baz' を取り出すにはどうすればいいでしょうか？1つの方法は、正規表現を使うことです。文字列全体の中から
'q=...&' というパターンに合う部分を一発で取り出すことができます。ただし、正規表現を書くのは難しいので、別のアプローチも知りたいところです。もう1つの方法は、クエリパラメータ全体を&記号で
split()することです。'パラメータ名=値'の組をいくつか持つ配列に変換してしまえば、その中から'q='で始まるパラメータを探すことができるようになります。さらにパラメータqの値を+記号でsplit()すれば、「Google検索結果ページのURLに含まれる複数検索ワードに対してそれぞれ処理をする」ということが実現できます。実際のプログラムは少し難しいので、いまは全てを理解する必要はないかもしれません。ただ、「複数の要素が1つの文字列にまとめられている場合、配列に変換してから扱った方が便利なことがある」ということだけが伝われば幸いです。
JavaScript