JavaScript で複数のケースを切り替える

Nithin Krishnan 2023年10月12日 JavaScript
  1. フォールスルーモデルを使用した Javascript の複数のケースを持つ Switch
  2. JavaScript で数式を使用して Switch で複数のケースを処理する
  3. Javascript で文字列式を使用して Switch で複数のケースを処理する
  4. Javascript で論理式を使用して Switch で複数のケースを処理する
JavaScript で複数のケースを切り替える

スイッチケースは、if-else ラダーよりもはるかに高性能です。それらには、switch(variable) ブロック内の変数から、case: value ブロック内の対応する値への値の直接マップがあります。単一の値マップでの通常の switch-case の使用法に精通していますが、複数のケースをサポートできますか？javascript で、switch-case ブロックに複数のケースを含めることができるいくつかの方法を見てみましょう。

フォールスルーモデルを使用した Javascript の複数のケースを持つ Switch

フォールスルーモデルは、JavaScript で複数の case ブロックを使用して switch をサポートするための最初のステップです。ここでは、複数のケースを通じてスイッチ変数の複数の値をキャプチャします。一連の有効なケースに break キーワードを適用します。たとえば、経過した月に応じて年の四半期名をログに記録する場合は、四半期に基づいて月のインデックスを作成します。次のコードを参照してください。

window.onload =
    function() {
  findQuarter('2021-08-08');
  findQuarter('2021-05-12');
  findQuarter('2021-02-28');
  findQuarter('2021-11-30');
}

function findQuarter(dateString) {
  var monthIndex = new Date(dateString).getMonth();
  switch (monthIndex) {
    case 0:
    case 1:
    case 2:
      console.log('First Quarter');
      break;
    case 3:
    case 4:
    case 5:
      console.log('Second Quarter');
      break;
    case 6:
    case 7:
    case 8:
      console.log('Third Quarter');
      break;
    case 9:
    case 10:
    case 11:
      console.log('Fourth Quarter');
      break;
  }
}

出力：

Third Quarter
Second Quarter
First Quarter
Fourth Quarter

findQuarter() 関数は、yyyy-mm-dd 形式の日付文字列を受け入れます。次に、最初に javascript date オブジェクトに変換し、次に date オブジェクトから月インデックスを取得することにより、dateString 引数から月インデックスを抽出します。getMonth() は、Date オブジェクトに適用され、0 で始まる月のインデックスを返す JavaScript 関数です。ここでは複数のケースを使用し、上下に積み重ねて、出力の複数の値をキャプチャします。

たとえば、1 月から 3 月までの月の場合、それぞれの月のインデックスは、getMonth() 関数によって返される出力に基づいて 0 から 2 の範囲になります。break キーワードを使用せずに、0 から 2 までのすべてのケースをスタックします。したがって、彼らはつまずき、値第 1 四半期を記録する case 2:行にある break に遭遇すると、switch-case から抜け出します。このコードのセットはかさばるようです。次のように書き直して、行数を減らすことができます。

window.onload =
    function() {
  findQuarter('2021-08-08');
  findQuarter('2021-05-12');
  findQuarter('2021-02-28');
  findQuarter('2021-11-30');
}

function findQuarter(dateString) {
  var monthIndex = new Date(dateString).getMonth();
  switch (monthIndex) {
    case 0:
    case 1:
    case 2:
      console.log('First Quarter');
      break;
    case 3:
    case 4:
    case 5:
      console.log('Second Quarter');
      break;
    case 6:
    case 7:
    case 8:
      console.log('Third Quarter');
      break;
    case 9:
    case 10:
    case 11:
      console.log('Fourth Quarter');
      break;
  }
}

出力：

Third Quarter
Second Quarter
First Quarter
Fourth Quarter

ここでの出力は同じままであることに注意してください。これは、フォールスルー``switch-case モデルを作成するもう 1つの方法です。これにより、コードがすっきりと見え、スペースが節約されます。

JavaScript で数式を使用して Switch で複数のケースを処理する

前のセクションで説明した例に従って、月の数値を処理しています。case ブロックで expressions を使用できますか？絶対そうです！機能を説明する前に、次のコードを参照してみましょう。

window.onload =
    function() {
  findQuarter('2021-08-08');
  findQuarter('2021-05-12');
  findQuarter('2021-02-28');
  findQuarter('2021-11-30');
  findQuarter('2021-2-30');
}

function findQuarter(dateString) {
  var monthIndex = new Date(dateString).getMonth();
  switch (monthIndex) {
        case ( (monthIndex < 2) ? monthIndex : -1 ):
            console.log('First Quarter');
          break;
        case ( ((monthIndex > 2) && (monthIndex < 5)) ?  monthIndex : -1):
            console.log('Second Quarter');
          break;
        case ( ((monthIndex > 5) && (monthIndex < 8)) ?  monthIndex : -1):
            console.log('Third Quarter');
          break;
        case ( ((monthIndex > 8) && (monthIndex < 11)) ?  monthIndex : -1):
            console.log('Fourth Quarter');
          break;
        default:
          console.log('Invalid date');
          break;
  }
}

出力：

Third Quarter
Second Quarter
First Quarter
Fourth Quarter

switch case で式を使用する場合、それらは数値を返す必要があります。それ以外の場合は -1。上記のコードスニペットでは、実際の値の代わりに、case ブロックに数式を追加しています。これらの式は、その月の対応する四半期を評価し、四半期名をログに記録します。ここでは、Invalid date を処理するために、switch case に default 句を含めました。javascript の getMonth() メソッドは、date の month が有効な場合（1 から 12 の範囲内）、値（0 と 11 の間）を返します。それ以外の場合は NaN を返します。default ブロックは、そのような無効な日付のシナリオをキャッチします。

Javascript で文字列式を使用して Switch で複数のケースを処理する

case ブロック内で文字列式を使用することもできます。これらの式は実行時に評価され、case 句が実行されます。月の例では、月の名前を切り替えてみましょう。このために、日付オブジェクトに toLocaleDateString() 関数を適用します。関数の options パラメーターで、{ month: 'long' } を指定します。toLocaleDateString('en-US', { month: 'long' }) の出力は、月の名前、完全な月の名前になります。次に、toLocaleDateString('en-US', { month: 'long' }) 関数から出力される完全な月の名前を切り替えます。

window.onload =
    function() {
  findQuarter('2021-08-08');
  findQuarter('2021-05-12');
  findQuarter('2021-02-28');
  findQuarter('2021-11-30');
  findQuarter('2021-21-30');
}

function findQuarter(dateString) {
  var monthName =
      new Date(dateString).toLocaleDateString('en-US', {month: 'long'});
  switch (true) {
    case['January', 'February', 'March'].includes(monthName):
      console.log('First Quarter');
      break;
    case['April', 'May', 'June'].includes(monthName):
      console.log('Second Quarter');
      break;
    case['July', 'August', 'September'].includes(monthName):
      console.log('Third Quarter');
      break;
    case['October', 'November', 'December'].includes(monthName):
      console.log('Fourth Quarter');
      break;
    default:
      console.log('Invalid date');
      break;
  }
}

出力：

Third Quarter
Second Quarter
First Quarter
Fourth Quarter
Invalid date

上記のコードでは、switch(true) ステートメントを使用しています。case 句には、文字列の比較があります。四半期ごとに一時的な月の配列を作成し、それらを各ケースに追加しました。次に、monthName がクォーター配列で使用可能かどうかを確認します。見つかった場合は、四半期の名前をログに記録します。日付が無効な場合、toLocaleDateString('en-US', { month: 'long' }) 関数は Invalid Date を出力します。このシナリオは、Invalid Date 文字列が四半期の月の名前を保持する事前定義された配列と一致しないため、default ブロックによってキャッチされます。したがって、ここでは無効な日付のシナリオをスムーズに処理します。

ノート
複数のブラウザをサポートするために、.includes() または find() 関数の代わりに .indexOf() を使用することもできます。.includes() および find() 関数は、Internet Explorer ではサポートされません。

Javascript で論理式を使用して Switch で複数のケースを処理する

数式と文字列式で見たように、switch-case ブロックの複数のケースで論理演算子を使用することもできます。月の例では、論理 OR 演算子||を使用して、月の名前が特定の四半期にあるかどうかを判断します。次のコードを参照してみましょう。

window.onload =
    function() {
  findQuarter('2021-08-08');
  findQuarter('2021-05-12');
  findQuarter('2021-02-28');
  findQuarter('2021-11-30');
  findQuarter('2021-21-30');
}

function findQuarter(dateString) {
  var monthName =
      new Date(dateString).toLocaleDateString('en-US', {month: 'long'});
  switch (true) {
    case (
        monthName === 'January' || monthName === 'February' ||
        monthName === 'March'):
      console.log('First Quarter');
      break;
    case (monthName === 'April' || monthName === 'May' || monthName === 'June'):
      console.log('Second Quarter');
      break;
    case (
        monthName === 'July' || monthName === 'August' ||
        monthName === 'September'):
      console.log('Third Quarter');
      break;
    case (
        monthName === 'October' || monthName === 'November' ||
        monthName === 'December'):
      console.log('Fourth Quarter');
      break;
    default:
      console.log('Invalid date');
      break;
  }
}

出力：

Third Quarter
Second Quarter
First Quarter
Fourth Quarter
Invalid date

コードでは、monthName の値が四半期の月と等しいかどうかを確認します。したがって、四半期の名前を慰めます。ここでも、無効な日付のケースを処理します。これは、case 句でコード化された条件のいずれも満たさず、default ブロックに分類され、ブラウザコンソールに Invalid date が出力されるためです。

チュートリアルを楽しんでいますか？ <a href="https://www.youtube.com/@delftstack/?sub_confirmation=1" style="color: #a94442; font-weight: bold; text-decoration: underline;">DelftStackをチャンネル登録</a> して、高品質な動画ガイドをさらに制作するためのサポートをお願いします。 Subscribe