【JavaScript】toLowerCase / toUpperCase – 文字列を小文字・大文字に変換するためのメソッド

JavaScriptには、文字列を小文字・大文字に変換するためのメソッドとして toLowerCase() と toUpperCase() があります。これらを使うことで、ユーザーの入力処理や文字列の比較を簡単に行うことができます。今回は、これらのメソッドの基本的な使い方や注意点についてまとめていきたいと思います。

toLowerCase() とは？

toLowerCase() は、文字列内のアルファベットをすべて小文字に変換するメソッドです。

基本構文

string.toLowerCase();

使用例

const text = 'Hello, JavaScript!';
const lowerText = text.toLowerCase(); // すべて小文字に変換
console.log(lowerText); // "hello, javascript!"

このメソッドは、ユーザー入力の正規化や、大文字・小文字を区別しない検索処理 などに役立ちます。

toUpperCase() とは？

toUpperCase() は、文字列内のアルファベットをすべて大文字に変換するメソッドです。

基本構文

string.toUpperCase();

使用例

const text = 'Hello, JavaScript!'';
const upperText = text.toUpperCase(); // すべて大文字に変換
console.log(upperText); // "HELLO, JAVASCRIPT!"

toUpperCase() は、フォーム入力の正規化 や、一貫性のあるフォーマットを作成する場合 に便利です。

サンプルコード

大文字・小文字を区別せずに比較する

JavaScriptでは、文字列の比較時に大文字・小文字を区別します。toLowerCase() や toUpperCase() を使うことで、大文字・小文字を無視した比較 が可能になります。

const userInput = 'JavaScript';
const keyword = 'javascript';

// 大文字・小文字を無視した比較
if (userInput.toLowerCase() === keyword.toLowerCase()) {
  console.log('同じ単語です！');
} else {
  console.log('違う単語です！');
}

このコードでは、ユーザーが入力した単語と比較対象の単語を小文字に変換することで、 大文字・小文字を気にせず比較 できるようになります。

フォーム入力の正規化

ユーザーがフォームに入力したメールアドレスを、すべて小文字に変換することで、 一貫性を持たせることができます。

See the Pen toLowerCase by tones (@tonescodedesign) on CodePen.

const emailInput = document.getElementById('email');

emailInput.addEventListener('blur', () => {
  emailInput.value = emailInput.value.toLowerCase(); // メールアドレスを小文字に統一
});

<input type="email" id="email">

使用時の注意点

toLowerCase() や toUpperCase() は元の文字列を変更せず、新しい文字列を返します。

let originalText = 'Hello';
let newText = originalText.toLowerCase();

console.log(originalText); // "Hello"（元の文字列は変わらない）
console.log(newText); // "hello"（変換後の新しい文字列）

そのため、変換結果を使いたい場合は、新しい変数に代入する必要があります。