変数に入れた値の中に特定の文字列を含むかどうかで条件分岐させる方法をご紹介いたします。
JavaScriptを実装していると、結構使えるケースが出てくるので、覚えておくと役立つかと思います。
JavaScriptで変数内に特定の文字列が含まれる場合に条件分岐させる方法
対象文字列が1つの場合
indexOfメソッドを使うことで、簡単に変数内に特定の文字列を含むかどうかを調べることができます。
例えば、以下のように記述することで、str_data内に’晴れ’が含まれるかどうかで条件分岐できます。
var str_data = '今日の天気は晴れです';
if (str_data.indexOf('晴れ') !== -1) {
//'晴れ'が含まれる場合
} else {
//'晴れ'が含まれない場合
}indexOfで文字列を検索をした時に、対象の文字列が含まれなかった場合は”-1″が返ってきます。条件式を「!== -1」とすることで、”対象の文字列が含まれている場合”という意味になります。
indexOfは配列でも使えます。
var arr_data = ['カツ丼', '天丼', '牛丼'];
if (arr_data.indexOf('天丼') !== -1) {
//'天丼'が含まれる場合
} else {
//'天丼'が含まれない場合
}対象文字列が複数の場合(OR検索)
検索対象の文字列が複数、かつORで条件を指定したい時は、以下のようにします。
var str_data = '今日の天気は晴れです';
if (str_data.indexOf('天気') !== -1 || str_data.indexOf('晴れ') !== -1) {
//'天気'もしくは'晴れ'が含まれる場合
} else {
//'天気'と'晴れ'のいずれも含まれない場合
}indexOfでは正規表現が使えないので、文字列毎に条件を追加していく必要があります。これだと検索したい文字列の数が増えた時にわかりにくくなってしまいますね。
そこで、検索対象の文字列が複数ある場合は、testメソッドを使うと便利です。上記と同じ条件をtestメソッドに置き換えると以下のようになります。
var str_data = '今日の天気は晴れです';
if (/天気|晴れ/.test(str_data)) {
//'天気'もしくは'晴れ'が含まれる場合
} else {
//'天気'と'晴れ'のいずれも含まれない場合
}testメソッドでは正規表現が使えるので、このように完結に記述することが可能です。
なお、testメソッドも配列で利用可能です。
var arr_data = ['カツ丼', '天丼', '牛丼'];
if (/カツ丼|牛丼/.test(arr_data)) {
//'カツ丼'もしくは'牛丼'が含まれる場合
} else {
//'カツ丼'と'牛丼'のいずれも含まれない場合
}対象文字列が複数の場合(AND検索)
ORではなくANDで条件を指定したい場合は、indexOfを使うと以下のようになります。
var str_data = '今日の天気は晴れです';
if (str_data.indexOf('天気') !== -1 && str_data.indexOf('晴れ') !== -1) {
//'天気'と'晴れ'が両方とも含まれる場合
} else {
//'天気'と'晴れ'が両方とも含まれない場合
}ORの時と同じようにちょっと冗長になってしまいますね。
testメソッドを使うと以下のようになります。
var str_data = '今日の天気は晴れです';
if (/^(?=.*天気)(?=.*晴れ)/.test(str_data)) {
//'天気'と'晴れ'が両方とも含まれる場合
} else {
//'天気'と'晴れ'が両方とも含まれない場合
}ORの時よりは長くなりますが、だいぶスッキリしました。
あとがき
変数内に指定した文字列が含まれるかどうかを調べたい時は、testメソッドを使うとコードもスッキリしてわかりやすいですね。
indexOfメソッドを使うのがダメというわけではないので、ケースバイケースで使い分けると良いかと思います。