JavaScript

【JavaScript】文字列の大文字⇔小文字変換(toUpperCase/toLowerCase)

takahide

おはようございます。タカヒデです。

本日は、「JavaScriptにおける、『文字列の大文字⇔小文字変換』について、『toUpperCaseメソッド』『toLowerCaseメソッド』」を紹介します。

こんな人にオススメ
  • JavaScriptにおける『文字列の大文字⇔小文字変換』をしたい
  • 『toUpperCaseメソッド』『toLowerCaseメソッド』の記載方法を知りたい

ぜひ本記事を参考にしてください。

文字列の大文字⇔小文字変換は実務でどんな時に使う?

では今回は「文字列の大文字⇔小文字変換」を紹介していきます。

その前に、まずそもそも実務ではどのようなときに使うものなのか?を確認することで、イメージしやすくしていきましょう。

  • 入力フォームの大文字・小文字指定
    • Yes/YES/yEsをすべて同一扱いして、入力内容を安定させる
  • 商品コードの大文字・小文字指定
    • 商品コードはすべて大文字だが、小文字で入力しても検索できるようにする

こんなことに使うみたいですね。

確かに商品コードはすべて大文字指定とかあるので、小文字で入力しても変換されたらユーザとしては使いやすそうな気がします。

ではお待たせしました。
実際の変換方法に入っていきます。

大文字に変換(toUpperCaseメソッド)

まずは大文字への変換方法から見ていきます。

文字列を大文字に変換する場合、『toUpperCaseメソッド』を使用します。

こちらが記載方法です。

//記載方法

変換する文字列.toUpperCase()

以下が記載例です。

元々大文字の文字列を含め、すべての文字列が大文字に変換されていることが分かります。

let test1 = "TAKAHIDE-program";

console.log(test1.toUpperCase());
//実行結果:TAKAHIDE-PROGRAM

実行結果を見てみると、『TAKAHIDE-program』が『TAKAHIDE-PROGRAM』に変換されたことが分かります。

「program」の部分だけ変化していますね。

小文字に変換(toLowerCaseメソッド)

続けて、小文字への変換方法です。

文字列を小文字に変換する場合、『toLowerCaseメソッド』を使用します。

記載方法はこんな感じ。

//記載方法

変換する文字列.toLowerCase()

以下が記載例です。

元々小文字の文字列含め、すべての文字列が小文字に変換されます。

let test1 = "TAKAHIDE-program";

console.log(test1.toLowerCase());
//実行結果:takahide-program

『TAKAHIDE-program』が『takahide-program』に変換されたことが分かります。

先ほどとは逆に、「TAKAHIDE」のみ小文字になっていることが分かりますね。

頭文字のみ大文字に変換

最後に少し応用をしてみましょう。

『toUpperCaseメソッド』『toLowerCaseメソッド』を活用し、頭文字のみを大文字、頭文字以外の文字を小文字にしてみたいと思います。

人物名とかでよくあるパターンですね。

これは上記メソッドに加え、『substringメソッド』を使用します。
これは、開始位置と終了位置を指定することで文字を抽出できるというものです。

実際にやってみるとこんな感じ↓

let test1 = "TAKAHIDE-program";

console.log(test1.substring(0, 1).toUpperCase() + test1.substring(1).toLowerCase());
//実行結果:Takahide-program

『substring』で1文字目のみを取得し、『toUpperCaseメソッド』による大文字変換、
『substring』で2文字目以降を取得し、『toLowerCaseメソッド』による小文字変換を実施します。

このようにそれぞれのメソッドを組み合わせることで頭文字のみを大文字にすることを実現させています。

組み合わせることで様々な方法が実行できそうですね。

まとめ

以上が「JavaScriptにおける『文字列の大文字⇔小文字変換』について、『toUpperCaseメソッド』『toLowerCaseメソッド』」でした。

まとめ
  • toUpperCaseメソッド:文字列を大文字に変換
  • toLowerCaseメソッド:文字列を小文字に変換

この記事が誰かの参考になれば幸いです。

お疲れさまでした。

ABOUT ME
タカヒデ
タカヒデ
ITを楽しく勉強中
通信会社の企画職で働く30代 非エンジニアでありながら半分趣味でITエンジニアリングやプログラミングを学習中 IT初心者が楽しいと思えるように発信することを目指しています ↓Xもやっているのでフォローしてね
記事URLをコピーしました