JavaScriptは、Webページにて様々な機能を搭載したり、操作する際に使用されるプログラミング言語です。JavaScriptによって、ゲーム作成やサイトを動的にすることができ、フロントエンジニアを始めとした、プログラミング初学者など、多くの人におすすめしたい言語のひとつです！
本記事では、JavaScriptの文字列の切り取り方について説明します。プログラムにおいて、指定した文字からの切り取りや、決まったパターンの抽出などが必要なときがあります。しかし、文字列の操作には正規表現が絡んだり、他の言語とのやり方が異なり、使いこなすのは難しいですよね。
JavaScriptの文字列の切り取り方について、メソッドの使い方や基本構文に加えて、実際のプログラム使用例まで説明するので、JavaScriptの学習を始めた方や、プログラムを書く予定の人はぜひ読んでみてください！
目次
JavaScriptの文字列操作について
JavaScriptには、文字列の操作に関するメソッドがたくさん用意されています。今回ご紹介する切り取りの他に、置換や削除、結合などもプログラムを1行書くだけで簡単に行えます。
文字列の操作がプログラム上で書けると、時間短縮という面でメリットがあります。例えば、プログラムにおいて文字列を格納したデータなどを扱う際に、指定した箇所に書かれている文字を抽出したり、その文字内容によって実行処理を変更したりする場面があります。これをわざわざ目視でチェックして、その判断結果によって処理内容を変えたりするのはとてもめんどくさいですよね。
しかし、文字列の操作方法について理解しておくと、処理速度が格段にアップします。Webページなどで、顧客が打ち込むデータ次第で処理が変わる場合でも、簡単に対処できるためサービス向上にも繋がります！
一見難しそうな文字列操作ですが、メソッドの特徴を掴めば誰でも簡単に使えます。しかし、JavaScriptを始めとした多くのプログラミング言語において、正規表現という決まった文字列パターンを扱う際に役立つ表現技法については理解しておくことが必要です。理解が不十分だったり、書き方を確認したい方は以下の記事などを参考にしてください！
参考 JavaScriptの正規表現とは？一から分かりやすく説明しますウェブカツ ブログJavaScriptで文字列を切り取れるメソッド3選
それでは、JavaScriptにおいて、文字列を切り取る際に有効的なメソッドをご紹介します。ここでは、異なる使用場面を想定し、使用頻度が高いメソッドの中でも特徴が異なる3つのメソッドのsliceメソッド・substrメソッド・matchメソッドについて、基本構文から実際のプログラムでの使用例まで説明します。
sliceメソッド
sliceメソッドは、文字列の開始位置と終了位置を指定して、その間の文字を切り取ってくれるメソッドです。終了位置の指定がない場合は、文字列の最後まで切り取ります。
基本構文
|
1 |
調査対象の文字列名.slice(開始位置, 終了位置); |
sliceメソッドの基本構文は、このようになっています。調査対象の文字列を格納した変数に対してsliceをとり、第一引数には何文字目から切り取りたいかを指定します。第二引数に終了位置を指定することで、文字列から文字を切り取ることができます。
JavaScriptは、文字列や配列を0から数えるので、先頭から文字を切り取りたい場合は第一引数に0と指定してください！
実践プログラム例
|
1 2 3 4 5 6 7 8 |
// 調査対象の文字列を定義 var animal = '私はDogを飼っています'; // sliceメソッドを用いて抽出 var result = animal.slice(2, 4); // 抽出結果を変数resultに格納 // resultを表示 console.log(result); // 'Dog'と表示される |
ここでは、文字列からペットの種類を切り取るプログラムを記述しました。2行目で文字列を変数animalに定義してます。5行目でsliceメソッドを用い、変数animalに格納されている文字列より、0から数えて2番目から4番目までの文字を抽出して、変数resultに抽出結果を格納しています。最後の8行目で、抽出結果を表示し、ここでは’Dog’と表示されます。
- 開始位置と終了位置を指定して切り取れる
- 終了位置を指定しない場合は、末尾まで切り取る
- 先頭から切り取る場合は、第一引数に0を指定する
substrメソッド
substrメソッドは、抽出対象の文字列より、切り出したい文字の開始位置と、何文字切り取りたいかの文字数を指定し、その文字数分切り取ってくれます。こちらもsliceと同様、文字数を指定しない場合は、末尾まで切り取られます。
基本構文
|
1 |
調査対象の文字列名.substr(開始位置, 文字数); |
substrメソッドの使い方はこのようになっています。調査対象の文字列が格納された変数名に対して、substrと記述します。第一引数に、文字列内より、切り取り始めたい場所は何文字目かという開始位置を指定します。第二引数には、開始位置より何文字切り出したいかと文字数を指定します。第二引数は、開始位置を含めて何文字分切り出したいかの文字数なので、注意してください。
また、開始位置をマイナスにすると、文字列全体の文字数より引いた値の数より、値を切り取ります。
実践プログラム例
|
1 2 3 4 5 6 7 8 |
// 調査対象の文字列を定義 var animal = 'DogCatMouse'; // substrメソッドを用いて、文字を切り取る var result = animal.substr(3, 3); // 文字列内の3文字目から3文字分切り取る // resultを表示 console.log(result); // 'Cat'と表示される |
ここでは、動物名の羅列をしている文字列から指定した単語を切り取るプログラムを記述しました。2行目で文字列を変数animalに定義してます。5行目でsubstrメソッドを用い、変数animalに格納されている文字列より、0から数えて3番目より3文字分を抽出して、変数resultに抽出結果を格納しています。最後の8行目で、抽出結果を表示し、ここでは’Cat’と表示されます。
- 開始位置と文字数を指定して切り取れる
- 文字数を指定しない場合は、末尾まで切り取る
matchメソッド
matchメソッドは、調査対象の文字列より、正規表現を用いて切り取るときに用います。固定文字を切り取ることはもちろんのこと、決まったパターンを指定して取り出すこともできます。つまり、郵便番号や電話番号など、型が決まっている文字列パターンを抽出するのに適しています。
基本構文
|
1 |
調査対象の文字列.match(文字列パターンを指定); |
matchメソッドは、このように使います。調査したい文字列に対して、matchをとり、引数に正規表現を用いて切り取りたいパターンを記述します。固定文字列を切り取りたいときは、「/文字列/」とスラッシュで文字列を囲むことで、その文字のみ抜き取ることができます。
実践プログラム例
|
1 2 3 4 5 6 7 8 9 10 11 |
// 郵便番号を定義 var postcode_1 = '104-0061'; var postcode_2 = '1040061'; // matchメソッドを用いて切り取り var result_1 = postcode_1.match(/^[0-9]{3}-[0-9]{4}$/); var result_2 = postcode_2.match(/^[0-9]{3}-[0-9]{4}$/); // result_1とresult_2を表示 console.log(result_1); // '104-0061'と表示される console.log(result_2); // 'null'と表示される |
郵便番号を切り取るプログラムを記述しました。まず、2,3行目に銀座の郵便番号を、2つの記述方法で定義しています。6,7行目でmatchメソッドを用いて、正規表現を用いて文字の切り取りをしています。ここでは、「○○○-○○○○」と定義されていれば、変数に抽出結果を格納するようになっています。
そのため、10行目ではresult_1に格納された’104-0061’と表示されますが、result_2には文字が格納されていないため、11行目では’null’と表示されます。
- 正規表現を用いてパターンをを指定し、文字を切り取れる
- スラッシュで囲むことで、固定文字を切り取れる
まとめ
いかがでしたでしょうか？今回は、JavaScriptの文字列の切り取り方について説明しました。
JavaScriptには上記で紹介したメソッド以外にも、少し特徴の違うメソッドなども用意されており、組み合わせることで、処理速度や作製にかかる時間が短縮されます。ぜひ、JavaScriptの文字列の切り取り方について理解し、Webサービス作成やシステム構築に活かしてください。
