JavaScriptの文字列入門｜定義方法から比較演算子までわかりやすく解説

JavaScriptにおける文字列（String）は、他の多くのプログラミング言語と同様に、テキスト形式でデータを保持するデータ型です。Webアプリケーションにおいて文字列がよく使われる場面のひとつが、フォームからのユーザー入力の保持です。たとえば検索フォームでは、ユーザーが入力した検索キーワードは文字列として保存されます。

ユーザーが検索フォームに入力して送信すると、送信された文字列に対して比較操作が行われます。これは、一致する情報を見つけ出し、その結果をユーザーに返すためです。比較操作には「=」「==」「===」「<」「>」といったJavaScriptの演算子が使われ、これらは文字列が持つ値を比較した結果としてtrueまたはfalseを返します。

この記事では、文字列に対する等価演算子に焦点を当てて解説します。

JavaScriptの文字列とは？

文字列は、JavaScriptに組み込まれているネイティブなデータ型のひとつです。テキストとして表現される値を保持し、いくつかの異なる方法で生成できます。最初の方法は「文字列プリミティブ」と呼ばれるもので、文字列リテラルを変数に格納する形です。

const stringPrim1 = 'Hello World!'
const stringPrim2 = "Hello World!"
const stringPrim3 = `Hello World!`

文字列リテラルは、シングルクォート（''）、ダブルクォート（""）、バッククォート（``）のいずれかで囲んで記述します。なお、JavaScriptの文字列補間（インターポレーション）が使えるのはバッククォートのみです。文字列補間とは、文字列の中に式を埋め込む機能のことです。

const name = "John"
console.log(`Hello World! My name is ${name}`)

// 出力: "Hello World! My name is John"

この例では、変数nameに「John」という値を持つ文字列が格納されています。バッククォートを使うことで、JavaScriptの文字列補間が可能になり、変数nameの値を抽象的な形で参照できるようになります。

JavaScriptの文字列に比較演算子を使う

検索フォームを実用的なものにするには、文字列の大文字と小文字の違いを無視できるようにする必要があります。ユーザーの入力がデータベース内の値と完全一致していなければならないとしたら、ユーザーにとって非常に不便です。JavaScriptには、こうした問題への回避策としてtoUpperCase()メソッドとtoLowerCase()メソッドが用意されています。

動画アプリで可愛い子猫の動画を検索する場面を想定してみましょう。

const userInput = 'kittens'
const searchResult = 'Kittens'

console.log(userInput == searchResult)
// 出力: false

このように大文字小文字を区別したまま比較すると、検索結果は何も返ってきません。インターネットには子猫の動画があふれているのに、大文字小文字の違いだけで検索に失敗してしまうのはもったいないですね。そこで、大文字小文字の区別をなくし、ユーザーが意図した検索結果を返せるようにしましょう。

const userInput = 'kittens'
const searchResult = 'Kittens'

console.log(userInput.toUpperCase() === searchResult.toUpperCase())
// 出力: true

両方の文字列をすべて大文字へ変換してから比較することで、正確な検索結果を返せるようになりました。同様の結果は、両方の文字列をすべて小文字に変換することでも得られます。

const userInput = 'kittens'
const searchResult = 'Kittens'

console.log(userInput.toLowerCase() === searchResult.toLowerCase())
// 出力: true

この例は、検索フォームがどのような比較ロジックで書かれるのかを示すものです。JavaScriptの文字列には、ここで紹介した以外にも多数のメソッドや演算子が用意されており、それらを組み合わせることで柔軟な文字列処理が実現できます。

まとめ

この記事では、JavaScriptの文字列入門として、文字列とは何か、そしてその基本的な扱い方について解説しました。JavaScriptにおける文字列というテーマは非常に幅広く、「文字列とは何か」を理解すること自体はシンプルでも、文字列を操作するためのメソッドは非常に豊富に用意されています。

この記事の概念を理解したうえで、さらに文字列メソッドを学習すれば、より動的で堅牢なWebアプリケーションの開発につながるでしょう。JavaScriptの文字列は、動的なWebアプリを作るうえで欠かせない重要なデータ型です。