JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript】ユーザーが入力した文字列が配列に含まれているかチェックする方法

本記事では、ユーザーに文字列を入力してもらうための入力欄を備えたJavaScriptプログラムを作成します。

プログラムは、入力された値が、あらかじめコード内で定義しておいた配列の要素と一致するかどうかを判定します。入力された文字列が配列内に存在すれば画面に「true」を、存在しなければ「false」を表示します。

実装例

この動作を実現するコードは以下のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CHECK EXISTENCE</title>
</head>
<body>
    <script>
        const arr = ['arsenal', 'chelsea', 'everton', 'fulham',
        'swansea'];
        const checkExistence = () => {
            const userInput = document.getElementById("input").value;
            const exists = arr.includes(userInput);
            document.getElementById('result').innerText = exists;
        };
    </script>
    <input type="text" id="input">
    <button onclick="checkExistence()">Check</button>
    <p id='result'></p>
</body>
</html>

出力結果

画面には以下のように表示されます。

【JavaScript】ユーザーが入力した文字列が配列に含まれているかチェックする方法


コードの解説

このプログラムの中心となるのは、配列のincludes()メソッドです。Array.prototype.includes()は、引数として渡した値が配列内に存在する場合にtrueを、存在しない場合にfalseを返す組み込みメソッドで、ES2015（ES6）以降で利用できます。

ボタンがクリックされるとcheckExistence()関数が実行され、document.getElementById("input").valueによって入力欄の値を取得します。取得した値をincludes()で配列と照合し、その結果をresult要素のテキストとして表示しています。

補足：大文字・小文字を区別しない比較

includes()は大文字と小文字を厳密に区別します。たとえば「Arsenal」と入力しても「arsenal」には一致しません。大文字・小文字を無視して比較したい場合は、次のように両者を小文字化してから判定するとよいでしょう。

const userInput = document.getElementById("input").value.toLowerCase();
const exists = arr.some(item => item.toLowerCase() === userInput);

このように、includes()を活用すれば、わずか数行のコードで「入力値が配列に含まれているか」の判定を簡単に実装できます。

  1. JavaScriptで文字列の重みを計算する方法

    アルファベット1文字の「重み」とは？英語のアルファベットにおける「重み」とは、その文字がアルファベットの中で何番目に位置するかを示す、1から始まるインデックスのことです。たとえば、「c」は3番目なので重みは3、「k」は11番目なので重みは11となります。この記事では、小文字の文字列を受け取り、その文字列全体の重みを計算して返すJavaScript関数を作成します。実装例実際のコードは以下のとおりです。const str = this is a string; {    str = str.toLowerCase();   &

  2. JavaScriptで配列内の唯一の異なる文字列を見つける方法

    問題 文字列の配列を受け取るJavaScript関数を作成する必要があります。配列内のすべての文字列は同じ文字（またはその並べ替え）で構成されていますが、ただ1つの文字列だけが異なる文字セットを含んでいます。この関数の目的は、その唯一の文字列を見つけ出して返すことです。 例： 次のような配列が与えられたとします。 [ba, abc, acb, bac, foo, bca, cab, cba] この場合、求めるべき文字列は「foo」です。 文字列には空白が含まれることがありますが、空白自体は意味を持たず、空白以外の記号のみが判定の対象となります。たとえば、空白だけで構成された文字列は空文字列と