JavaScriptで空文字（空白の文字列）を判定する方法を現役エンジニアが解説【初心者向け】

JavaScriptで空文字（空白の文字列）を判定する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

目次

• はじめに
• 空文字とは
• 空文字を判定する方法
• 空文字とnullの違い
• まとめ
• JavaScriptを学習中の方へ

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

今回は、JavaScriptに関する内容だね！

どういう内容でしょうか？

空文字（空白の文字列）を判定する方法について詳しく説明していくね！

お願いします！

はじめに

今回は空文字について学んでいきます。

HTMLの未入力フォームの値をJavaScriptで取得した場合、今回説明する空文字が取得できます。

空文字判定はJavaScriptの実装でよく使いますので、この機会に覚えておきましょう。

また、混在しやすいnullとの違いも説明します。

JavaScriptのコーディングをする際には、ぜひ活用してくださいね。

空文字とは

そのままの説明になってしまいますが、空っぽの文字のことです。

文字列を書く際に”（ダブルクォート）または’（シングルクォート）で囲います。

文字列を書く例

"テックアカデミー　ジュニア"

これを文字を書かずに「”」または「’」の同じ記号を2つ並べると、0文字の文字列である空文字になります。

さっそく、空文字などいくつかのパターンをconsole.logで出力してみましょう。

let moji1      ='テック';      /*[1]*/
let moji2      ="アカデミー";  /*[2]*/
let karamoji1 = '';            /*[3]*/
let karamoji2 = "";            /*[4]*/
let nonobject;                 /*[5]*/
//コンソール出力
console.log(moji1);         //console =>テック
console.log(moji2);         //console =>アカデミー
console.log(karamoji1);     //console =>
console.log(karamoji2);     //console =>
console.log(nonobject);     //console =>undefined

ポイントは”（ダブルクォート）でも’（シングルクォート）でも、同じ記号を2つ並べることで空文字を設定できます。

また、[5]で何も定義しないものとコンソール出力の結果が異なりますね。

何も定義しない場合はundefinedと出力されますが、空文字は「空欄の文字」という立派なString型のデータですので、出力では何も表示されませんが、undefinedとはならず空文字になることを覚えておきましょう。

[PR] フロントエンドで副業する学習方法を動画で公開中

空文字を判定する方法

登録画面などで未入力を判定するような際に、空文字の判定が必要になります。

JavaScriptでは、空文字をfalseと判定します。

そのため、そのままif文の条件にすることで判定できます。

const checkKaraMoji = (checkStr) =>{
    if(!checkStr){
        console.log('空文字です');
    }else{
        console.log('1文字以上の文字列です');
    }
}
const kara = "";
const moji = "tech academy";
const mojiSpace = " ";
checkKaraMoji(kara);       //console => 空文字です 
checkKaraMoji(moji);       //console => 1文字以上の文字列です
checkKaraMoji(mojiSpace);  //console => 1文字以上の文字列です

空文字とnullの違い

どちらも空という意味では似ています。

空文字は0文字の文字列ですが、nullは存在がない状態を表します。

そのため、空文字は.lengthメソッドを使うことで文字数0が返却されます。

しかし、nullに.lengthメソッドを使うとエラーになります。

let karamoji   ='';
let nullObject =null;
/*コンソール出力*/
console.log(karamoji.length);  //console =>0
console.log(nullObject.length);//Uncaught TypeError: Cannot read property 'length' of null

また、nullの判定方法も空文字と同様にfalseと判定されるので、そのままif文の条件にすることで判定できます。

const checkKaraMoji = (checkStr) =>{
    if(!checkStr){
        console.log('空文字またはnullです');
    }else{
        console.log('1文字以上の文字列です');
    }
}
const kara = "";
let nullObject =null;
checkKaraMoji(kara);       //console => 空文字またはnullです
checkKaraMoji(kara);       //console => 空文字またはnullです 

nullは「何もない」、空文字は「空欄」です。

また空文字はStringオブジェクトで用意されている関数やプロパティを呼出・参照できますが、nullの場合はエラーとなりますので、実装の際にはnullでないかチェックを行ったり、nullを許容しない設計を行うこともあります。

nullと空文字の使い分けはアプリやWebサイトの仕様によりますが、一般的にサーバサイドでデータベースに値を保持する際に定義を決めます。

あくまで一例ですが、リストボックスで未選択だった場合やinputタグなどで未入力の場合には、空文字ではなくnullを設定することが一般的です。
空文字は基本的に使わず、必須項目（氏名など）の未入力時などに設定する際に利用することがあります。

一方JavaScriptではinputタグなどが未入力だった場合にvalueプロパティを参照するとnullではなく空文字が取得されるため、空文字を扱う頻度はサーバサイドよりも多くなります。

まとめ

空文字の宣言の仕方や判定方法について学びました。

先ほども説明した通り、空文字とnullを同じように扱うか分けて扱うかどうかは、アプリやWebサイトの仕様などによって変わります。

どちらも適切に判定できるように、ぜひ参考にしてくださいね。

内容が分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！