こんにちは、大学院でIT系の研究を専攻している、ひらりんです。
JavaScriptは、Webページにて様々な機能を搭載したり、操作する際に使用されるプログラミング言語です。JavaScriptによって、ゲーム作成やサイトを動的にすることができ、フロントエンジニアを始めとした、プログラミング初学者など、多くの人におすすめしたい言語のひとつです！
本記事では、JavaScriptの文字列における空文字判定や空白のチェックをする方法について説明します。JavaScriptを使ったwebサービスなどにおいて、文字列に空白があった場合やオブジェクトに値が格納されていないと、エラーになる可能性があります。
JavaScriptの文字列の空文字判定方法や、空白かどうかチェックする方法について、メソッドの使い方や基本構文に加えて、実際のプログラム使用例まで説明するので、JavaScriptの学習を始めた方や、プログラムを書く予定の人はぜひ読んでみてください！
目次
空白があったり、オブジェクトが空だとどうなるの？
JavaScriptでWebサービスなどを作成するときに、ユーザーからの入力を求めるような場合があります。例えば、ログイン機能や会員登録機能がありますよね。しかし、入力の際にコピー&ペーストなどをして貼り付けたりすると、余分なスペースやタブなどが入力されてしまいます。
また、何も処理していないプログラムの場合、何も入力していないのに誤って登録ボタンを押してしまうと、未入力の状態の会員情報が作成されてしまうこともあります。
このようなエラー発生を防ぐためにも、オブジェクトの空判定や空白の有無の確認をすることが、品質の高いサービスを作成するには欠かせません。
空文字かチェックする方法
まずは、ユーザーが何も入力していない状態で登録をしようとしていないかチェックしたいときなどに使用される、空文字かチェックする方法について説明します。入力された文字列を変数に格納し、その変数が空かどうかチェックしたいときは、if構文を作成するだけで簡単に処理内容を変えることができます。
なお、次からメソッドなどについて解説しますが、nullとundefinedの違いについて知っておくと、理解がスムーズに進みます。nullやundefinedについては、以下の記事を参考にしてください。
参考 JavaScriptやjQueryでの変数が「空かどうか」のチェック方法ウェブカツ ブログ基本構文
|
1 2 3 4 5 6 |
// 変数が空文字かどうかで処理内容を変更する if (変数名) { // 変数が空文字でないときの処理 } else { // 変数が空文字のときの処理 } |
if文を用いた空文字判定は、このように書きます。調査したい変数を、if直後の括弧内にそのまま記述することで、空文字判定を行うことができます。空文字だった場合の処理を記述したい場合は、else後の括弧内に処理したい内容を書きましょう。
なお、空文字だったときのみの処理を記述したいときは、次のように書きます。
|
1 2 3 |
if (!変数名) { // 空文字だった場合の処理内容を記述 } |
変数名の前に、エクスクラメーションマーク「!」を書くことで、空文字だったらという条件文を作れます。エクスクラメーションマークには否定の意味があり、変数を否定したうえで、if直後の条件に指定することで、空文字だった場合の処理のみを書くことができます。
また、変数のnull判定やundefined判定のみを行いたいときは、次のように書きます。
|
1 2 3 4 5 6 7 8 9 |
// null判定 if (変数名 === null) { // 変数がnullのときの処理 } // undefined判定 if (変数名 === undefined) { // 変数がundefinedのときの処理 } |
nullのみやundefinedのみの判定を行いたい場合は、このように書きます。注意点として、等価判定はイコール3つ「===」使用してください。一般的な等価チェックはイコール2つですが、ここで「変数名==null」としてしまうと、undefinedも条件対象となってしまいます。
では、変数が空文字だった場合の処理を、実際に反映させたプログラム例を見てみましょう！
実践プログラム例
|
1 2 3 4 5 6 7 |
// 入力された文字列を格納する変数を宣言 var word = ""; // 空文字を代入 // 条件分岐を用いて、空かどうかを判別 if (!word) { console.log("入力されていません"); } |
ここでは、空文字だった場合に、メッセージを出力するプログラムを作成しました。2行目で受け取った値を、変数wordに格納しています。ここでは、空文字を代入しました。
5行目からは、変数wordに格納された値が空文字だったときのみ、処理されるようにif構文を用いて書かれています。ここでは、ifの条件を満たすため、「入力されていません」というメッセージが表示されるようになっています。
このようにして、空文字かどうかチェックすることができます。
文字列に空白が含まれているかチェックする方法
続いて、文字列に空白が含まれているかどうかチェックする方法を説明します。空白をチェックする方法は色々ありますが、ここでは置換する際に用いられるreplaceメソッドやlengthメソッド、正規表現を用いて記述します。replaceメソッドと正規表現についてよくわからない方は、以下の記事を参考にしましょう。
参考 【初心者向け】JavaScriptで文字の置換ってどうやるの？基本的な方法を分かりやすく解説します。ウェブカツ ブログ基本構文
大きく2つに分けて説明します。流れとしては、以下のようになります。
- 文字列に空白が含まれていたら、空白を削除
- 処理した文字列と、元の文字列の長さが同じかどうかで空白判定
では、まずは空白があったときに削除する方法を見てみましょう。
|
1 2 |
// 文字列に含まれる空白を削除する方法 処理後の変数名 = 調査対象の文字列.replace(/\s+/g, ""); |
まずは、replaceメソッドと正規表現を用いました。正規表現で”\s”とすることで、空白文字に一致させるという条件が作れます。これにオプション等を加え、replaceメソッドで調査し、空白があった場所は削除（空文字で置換）するようにし、処理した文字列を新たな変数に格納されます。
続いて、文字列の長さの値を取得するプログラム記述法について見てみましょう。
|
1 2 |
// 文字列の長さ（文字数）を取得する方法 文字数 = 調査対象の変数名.length; |
文字列の長さを取得したいときは、lengthメソッドを使います。使い方はシンプルで、文字数を調査したい文字列が格納されている変数に対して、lengthとするだけで、戻り値として文字数を取得することができます。また、lengthメソッドは空白もカウントするのが特徴です。
これらのメソッドを使いこなすことで、空白判定を行うことができます。では、実際のプログラム例を見てみましょう。
実践プログラム例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 文字列を変数strに格納 var str = "私は 映画鑑賞が趣味です"; // 空白を削除 str_1 = str.replace(/\s+/g, ""); // 空白があったかチェック if (str.length == str_1.length) { // 空白がなかった場合の処理 console.log("空白はありませんでした"); } else { // 空白があった場合の処理 console.log("空白がありました"); } |
文字列に空白が含まれているかどうかで処理内容が変わるプログラムを書きました。上から順に見ていきましょう。
5行目で、replaceメソッドと正規表現を用いて、変数strの文字列内の空白を削除した文字列が、変数str_1に格納されています。
8行目からはif構文を用いました。条件として、lengthメソッドを用いて変数strとstr_1、それぞに格納されている文字列の長さを取得し、その長さが一緒かどうかで、文字列に空白が含まれていたか判定しています。
今回は、「私は 映画鑑賞が趣味です」と空白が含まれていたので、13行目の処理が実行されて、「空白がありました」と表示されます。
まとめ
いかがでしたでしょうか？今回は、JavaScriptの文字列の空文字判定方法や空白をチェックする方法について説明しました。
JavaScriptでは、正規表現を用いた空白チェック方法や、isEmptyメソッドを使用した空判定が使えるようになると、とても便利です！ぜひ、JavaScriptの空白のチェック方法について理解し、Webサービス作成やシステム構築に活かしてください。
