JavaScriptのtoLowerCase()とtoUpperCase():文字列の大文字・小文字変換完全ガイド
JavaScriptでの文字列操作は、Web開発の基本です。
この記事では、JavaScriptのtoLowerCase()
とtoUpperCase()
メソッドを深く掘り下げ、様々な使用シナリオを解説します。
これらのメソッドをマスターすることで、文字列のケース変換を簡単かつ効果的に行えるようになります。
toLowerCase()メソッドとは
toLowerCase()
メソッドは、文字列内の全ての大文字を小文字に変換します。
このメソッドは、ユーザー入力の正規化や、大文字・小文字を区別しない検索を行う際に特に役立ちます。
基本的なtoLowerCase()の使用例
以下は、toLowerCase()
メソッドを使って文字列の大文字を小文字に変換する基本的な例です。
ソースコード例
1 2 3 4 |
const originalText = "Hello, WORLD!"; const lowerCaseText = originalText.toLowerCase(); console.log(lowerCaseText); |
出力結果
hello, world!

「ほら見て!大文字が全部小文字になったよ!」
toLowerCase()の応用例
toLowerCase()
メソッドは、様々な文字列操作の前処理としても有効です。
例えば、ユーザーからの入力を小文字に変換してから処理を行うことで、大文字と小文字の違いを無視できます。
ソースコード例
1 2 3 4 5 6 7 8 |
const userInput = "JaVaScRiPt"; const normalizedInput = userInput.toLowerCase(); if (normalizedInput === "javascript") { console.log("入力はJavaScriptです!"); } else { console.log("別の入力です。"); } |
出力結果
入力はJavaScriptです!

「入力の大文字小文字を気にせずに、ちゃんとJavaScriptって識別できるんだね!」
toUpperCase()メソッドとは
toUpperCase()
メソッドは、文字列内の全ての小文字を大文字に変換します。
このメソッドは、特定の文字列を強調表示したい場合や、コード内での定数値の表記によく使用されます。
基本的なtoUpperCase()の使用例
以下は、toUpperCase()
メソッドを使って文字列の小文字を大文字に変換する基本的な例です。
ソースコード例
1 2 3 4 |
const originalText = "Hello, world!"; const upperCaseText = originalText.toUpperCase(); console.log(upperCaseText); |
出力結果
HELLO, WORLD!

「大文字にすると、なんだか重要な感じがするね!」
toUpperCase()の応用例
toUpperCase()
は、ログメッセージの整形やユーザーインターフェースの一部としても使えます。
例えば、警告メッセージを大文字で表示して目立たせることができます。
ソースコード例
1 2 3 4 |
const warning = "注意:システムが過負荷状態です!"; const upperCaseWarning = warning.toUpperCase(); console.log(upperCaseWarning); |
出力結果
注意:システムが過負荷状態です!

「大文字で表示されると、警告が目立っていいね!」
toLowerCase()とtoUpperCase()の組み合わせ
toLowerCase()
とtoUpperCase()
は組み合わせて使用することもできます。
これにより、文字列の一部を大文字にし、残りを小文字にするなど、より複雑なケース変換が可能になります。
toLowerCase()とtoUpperCase()の組み合わせ例
以下の例では、文字列の最初の文字だけを大文字にし、残りを小文字にしています。
ソースコード例
1 2 3 4 |
const text = "jaVaScrIPt"; const capitalizedText = text.charAt(0).toUpperCase() + text.slice(1).toLowerCase(); console.log(capitalizedText); |
出力結果
JavaScript

「最初の文字だけ大文字にすると、きちんとした単語みたいになるね!」
まとめ
JavaScriptのtoLowerCase()
とtoUpperCase()
メソッドは、文字列の大文字・小文字変換に非常に役立ちます。
これらのメソッドを理解し、適切に使用することで、多様なシナリオでの文字列処理が簡単になります。
最後まで読んで頂き、ありがとうございました。少しでもお役にたてたなら幸いです!
