JavaScript switch文複数条件 数値と文字列

JavaScriptで条件式を使う場合if文だと2拓分岐になるため複数の条件式がある場合は少し大変です。その場合はswitch文を利用すると簡単です。ただしswitch文を利用する場合は==ではなく===を使う場合が多いです。

switch文の書き方

switch文の書式です。

switch文
switch ( 分岐条件 ) { case,defaultによる分岐 } caseはいくらでもつけることができます。

switch (分岐条件) {
case 分岐1:
式;
・・・
break;
case 分岐2:
式;
・・・
break;
case 分岐3:
式;
・・・
break;
default:
・・・
式;
break;
}

caseの下にはbreakが付きます、つけないとそのまま次の分岐式のところが実行されてしまいます。

switch文は括弧の分岐条件とcaseの分岐式と比較してあってればその処理をして、あってなければ次のcaseの分岐式と比較します。全てあってなければ最後にdefault:と比較します。defaultはその他の分岐です、なので場合によっては省略しても大丈夫です。

簡単なswitch文

テキストボックスに入力された数字をswitch文で比較しています。

<input type="text" id="tx"><br>
<button onclick="ck()">ボタン</button>
<script>
function ck() {
//実行する文字列変数
let str;
//テキストボックスに入力された数字を変数に格納
let txt = document.getElementById("tx").value;
switch (txt) {
case "0": str = "値は0です。"; break;
case "1": str = "値は1です。"; break;
case "2": str = "値は2です。"; break;
default: str = "その他の値です。";
}
alert(str);
}
</script>

サンプル(別窓）

条件はテキストボックスに入力された数字です、caseの分岐式と比較してあったものを変数に格納して最後にアラートで表示します。

switch文数値型と文字列型

switch文の比較は「==」ではなく「===」なので数値と文字列は別ものと判断されてしまいます。

上記の数字の部分を下記のようにするとなにも反応しません。

switch (txt) {
case 0: str = "値は0です。"; break;
case 1: str = "値は1です。"; break;
case 2: str = "値は2です。"; break;
default: str = "その他の値です。";
}

この状態で数字と文字列を判定させるにはテキストボックスに入力された数字を明確に数値に変換してあげるようにします。

<input type="text" id="tx"><br>
<button onclick="ck()">ボタン</button>
<script>
function ck() {
//実行する文字列変数
let str;
//テキストボックスに入力された数字を変数に格納
let txt = document.getElementById("tx").value;
//文字列が入った変数を数値に変換する
let hikaku = parseInt(txt, 10);
switch (hikaku) {
case 0: str = "値は0です。"; break;
case 1: str = "値は1です。"; break;
case 2: str = "値は2です。"; break;
default: str = "その他の値です。";
}
alert(str);
}
</script>

「let hikaku = parseInt(txt, 10);」の部分で10進数の整数値に変換しています。このようにするとswitch文が動作するようになります。

書き方のサンプル

サンプルを通してswitch文の書き方を解説します。

caseを連続させる

caseを複数書いて最後に処理する方法もあります。

<input type="text" id="tx"><br>
<button onclick="ck()">ボタン</button>
<script>
function ck() {
//実行する文字列変数
let str;
//テキストボックスに入力された数字を変数に格納
let txt = document.getElementById("tx").value;
//文字列が入った変数を数値に変換する
let hikaku = parseInt(txt, 10);
switch (hikaku) {
case 0:
case 1:
case 2:
case 3:
alert("0から3の値が入力されました。"); break;
}
}
</script>

サンプル(別窓）

上記のサンプルでは0から3の数字をテキストボックスに入力すると上のcase分岐式から順々に比較して適合した数字をアラート表示します。こんな書き方もあります。

今日の日付を表示してみよう

サンプルは本日の日付を表示しますが、コンピューターに記録されている日付のためコンピューターが間違ってると間違った結果が出てきます。

<script>
//曜日の番号を取得する
let dt = new Date();
let dtnum = dt.getDay();
//曜日の文字を格納する変数
let youbi;
switch (dtnum) {
case 0: youbi = "日"; break
case 1: youbi = "月"; break
case 2: youbi = "火"; break
case 3: youbi = "水"; break
case 4: youbi = "木"; break
case 5: youbi = "金"; break
case 6: youbi = "土"; break
}
//曜日を表示する
document.write("今日は" + youbi + "曜日です");
</script>

サンプル(別窓）

「let dtnum = dt.getDay();」で曜日の番号を変数に数値型として格納します。日曜日は0、月曜日は1、火曜日は2、・・・・と続きます。日付の部分は別ページで取り上げます。

caseのあとにつく番号は数値です。”0″とか”1″などのようにクォーテーションで括ると文字になります。

一致したところで変数youbiに曜日の文字を格納します。

最後に「今日は～曜日です」と表示します。

 

以上switch文の書き方使い方でした

 

今回はこれで終了です。

お疲れ様でした！

前のページ　 INDEX　 次のページ

コメント

ホーム