JavaScript Switch Case：ステップバイステップガイド

JavaScriptのswitchケースは複数のif else 声明。 ifステートメントと同じように条件式を取りますが、式の結果と一致してさまざまなコードブロックを実行できる多くの条件（またはケース）を持つことができます。

条件文はプログラミングの重要な部分であり、コンピュータープログラムのフローを制御するために使用されます。 JavaScriptでの条件文の最も一般的な形式は、“if”です。 および“if...else” コードブロック。特定の条件または一連の条件が満たされた場合にのみコードを実行するために使用できます。

JavaScriptに組み込まれている、複数の条件に対して式を評価するために使用できる別の条件ステートメントがあります。それは、switchcaseステートメントです。 Switch caseステートメントを使用して、特定の条件が複数のケースに対して満たされているかどうかを確認し、その条件が満たされたコードのブロックを実行できます。

このチュートリアルでは、JavaScriptのswitch式のcaseステートメントを使用して条件ステートメントを作成する方法について説明します。また、switchステートメントで複数のケースを使用して、より高度な式を作成する方法についても説明します。

JavaScript条件ステートメントの復習

条件付きステートメントを使用すると、特定の条件が満たされた場合にコードを実行し、その条件が満たされない場合にコードのブロックを実行することはできません。条件付きステートメントは、真と偽のステートメントの結果に基づいて、条件が満たされているかどうかを評価します。

条件付きステートメントは、ユーザーが注文ページのすべてのフォームに入力したことを確認する場合、またはユーザーがサインインしている場合にのみ製品オファーに関するメッセージをユーザーに表示する場合に役立ちます。

JavaScriptでは、条件ステートメントの最も一般的な形式は“if”です。 声明。 “if” ステートメントは、ステートメントがtrueかfalseかを評価し、ステートメントがtrueと評価された場合にのみ実行されます。 JavaScriptのifステートメントの例を次に示します。

var age = 17;

if (age >= 16) {
	console.log("You are aged 16 or over!");
}

コードを実行すると、次の出力が返されます：“You are aged 16 or over!”

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

“if” ステートメントには、“else if”も付属しています。 複数の条件をチェックするために使用できるステートメント。 JavaScriptのifおよびelseステートメントについて詳しく知りたい場合は、「if…else」ステートメントのチュートリアルに従ってください。

JavaScriptの条件文の基本がわかったので、“switch case”を調べることができます。 声明。

JavaScriptスイッチケース

JavaScriptの“switch” ステートメントはステートメントを評価し、そのステートメントがtrueと評価された場合、コードのブロックを実行します。 “switch” ステートメントは、“if”と同じように機能します ステートメントが真であるかどうかをチェックし、ステートメントが真に等しい場合に実行されるという点でステートメント。

“switch” ステートメントは、次の構文を使用して記述されています。

switch (statement) {
	case a:
		// Run code
		break;
	case b:
		// Run code
		break;
	default:
		// Run code
		break;
};

ここではたくさんのことが起こっているので、それを分解しましょう。これは、“switch”を読み取るときにプログラムが従う手順です。 声明：

• スイッチ式は、ステートメントの実行時に評価されます。
• ステートメントの値が各ケースと比較されます。
• ケースがステートメントと一致する場合、関連するコードブロックが実行されます。
• いずれのケースも満たされない場合は、“default”のコード ケースブロックが実行されます。

例を使用して、これが実際にどのように機能するかを説明しましょう。たとえば、ユーザーが人気のある飲み物の価格を簡単に確認できるようにプログラムを作成したいと考えているコーヒーショップのオーナーであるとします。この例では、ユーザーが選択した飲み物をコーヒーのリストと照らし合わせて評価し、選択した飲み物の価格を印刷します。

ユーザーが人気の飲み物の価格を確認できるようにするために使用するコードは次のとおりです。

const drink_name = "Americano";

switch (drink_name) {
	case "Americano":
		console.log("The price of an Americano is $2.60");
		break;
	case "Cappuccino":
		console.log("The price of a cappuccino is $2.75");
		break;
	case "Macchiato":
		console.log("The price of a macchiato is $3.00");
		break;
	case "Espresso":
		console.log("The price of an espresso is $2.40");
		break;
	default:
		console.log("This drink is not available");
}

変数“drink_name” を使用してプログラムを実行する場合 “Americano,”に等しい 以下が返されます。

The price of an Americano is $2.60.


“drink_name” を設定した場合 別の飲み物と同じになるように、その飲み物に対応する価格が表示されます。さらに、無効な飲み物の名前を入力した場合、コードは「default” の内容を返します。 ステートメント。この場合は、“This drink is not available.”を示すメッセージです。

“break”を追加していることに注意してください すべてのcaseステートメントの最後にあるキーワード。 breakステートメントを含めない場合、プログラムは、ステートメントが満たされた後もステートメントを評価し続けます。これは非効率的であり、“break case”を使用します キーワードが満たされると、プログラムがケースの検索を停止するようにします。

JavaScriptスイッチの複数のケース

上記の例では、式ごとに1つのケースを使用し、式ごとに出力が異なります。しかし、複数のケースで同じ出力が得られるようにするにはどうすればよいでしょうか。

バリスタがメニューに2つの新しい飲み物を追加し、それらの飲み物の価格がマキアートと同じだとします。独自のコードブロックを使用して複数の新しいケースを作成する代わりに、複数の“case”を使用できます。 コードのブロックごとに。

上記の例を使用して、複数のケースの使用方法を説明します。ただし、この例では、“The price of [drink name] is [price].”を変更します。 “The price of this drink is [price].” console.log（）ステートメントを再利用できるようにします。

また、ラテとモカの2つの新しい飲み物を追加します。それぞれの価格は、3.00ドル（マキアートと同じ）です。

新しい飲み物を含む改訂されたコードは次のとおりです。

const drink_name = "Mocha";

switch (drink_name) {
	case "Americano":
		console.log("The price of this drink is $2.60");
		break;
	case "Cappuccino":
		console.log("The price of this drink is $2.75");
		break;
	case "Latte":
	case "Mocha":
	case "Macchiato":
		console.log("The price of this drink is $3.00");
		break;
	case "Espresso":
		console.log("The price of this drink is $2.40");
		break;
	default:
		console.log("This drink is not available");
}

上記のコードを“drink_name” で実行すると “Mocha,”に等しい変数 次の応答が返されます。

The price of this drink is $3.00.


ご覧のとおり、プログラムは「モカ」がケースとしてリストされていることを検出し、関連するブロックでコードを実行しました。

結論

“switch” 条件ステートメントを使用して、式を評価し、その式が満たされているかどうかに応じて値を返すことができます。 switchステートメントは、考えられる複数の結果に対してステートメントを評価する場合に役立ちます。

このチュートリアルでは、JavaScriptの条件文の基本について説明しました。次に、“switch”の使用方法を検討しました。 および“case” ステートメントと、複数の“case”の使用方法の例を確認しました “switch”のステートメント ブロック。

これで、エキスパートのようにJavaScriptの「switchcase」ステートメントを使用するために必要な情報が得られました。