【JavaScript】toUpperCase()/toLowerCase()で文字列を大文字/小文字に変換!

(この記事は2022年9月22日に投稿されました。)

JavaScriptで指定した文字列を大文字や小文字にする方法として、toUpperCase()やtoLowerCase()があります。

toUpperCase()とは指定した文字列を大文字に変換するメソッドになります。

大文字に変換することから、指定した文字列を大文字に変換した文字列を返り値として返すようになります。

また、toLowerCase()とは指定した文字列を小文字に変換するメソッドになります。

小文字変換することから、指定した文字列を小文字に変換した文字列を返り値として返すようになります。

こちらの両メソッドはパラメータを指定する必要はないので、とても使いやすいメソッドにはなりますが、ひらがなやカタカナには使用できませんので注意してください。

しかし、アルファベットには使用することができますので、大文字や小文字に変換したいと思った場合は、toUpperCase()やtoLowerCase()を使用しましょう。

今回はJavaScriptのstoUpperCase()/toLowerCase()で文字列を大文字/小文字に変換する方法について紹介していきます。

この記事はこんな方におすすめ
・アルファベットの文字列を大文字や小文字に変換したい人
・受け取ったデータを大文字や小文字の決まった形に変換したい人




toUpperCase()とは

toUpperCase()とは、指定した文字列を大文字に変換するメソッドになります。

toUpperCase()の書き方

split()の書き方は下記のようになります。

toUpperCase()のパラメータ

toUpperCase()にパラメータはありません。

toUpperCase()の返り値

toUpperCase()の返り値は、指定した文字列の大文字となります。

toLowerCase()とは

toLowerCase()とは、指定した文字列を小文字に変換するメソッドになります。

toLowerCase()の書き方

toLowerCase()の書き方は下記のようになります。

toLowerCase()のパラメータ

toLowerCase()にパラメータはありません。

toLowerCase()の返り値

toLowerCase()の返り値は、指定した文字列の小文字となります。

toUpperCase()/toLowerCase()で文字列を大文字/小文字に変換するサンプルコード

toUpperCase()/toLowerCase()で文字列を大文字/小文字に変換するサンプルコードについてご紹介します。

ここでは、下記の4つの場合でtoUpperCase()とtoLowerCase()を使用してみます。

  1. アルファベットを大文字/小文字に変換する場合
  2. ひらがなを大文字/小文字に変換する場合
  3. カタカナを大文字/小文字に変換する場合
  4. ギリシャ文字を大文字/小文字に変換する場合
  5. キリル文字を大文字/小文字に変換する場合

アルファベットを大文字/小文字に変換する場合

アルファベットを大文字/小文字に変換する場合に、toUpperCase()とtoLowerCase()を使用してみます。

⚫︎ Main.js

⚫︎ 実行結果

toUpperCase()とtoLowerCase()でアルファベットを大文字/小文字に変換した結果

toUpperCase()によって指定したアルファベットの文字列が大文字に変換されています。

また、toLowerCase()によって指定したアルファベットの小文字が大文字に変換されています。

ひらがなを大文字/小文字に変換する場合

ひらがなを大文字/小文字に変換する場合に、toUpperCase()とtoLowerCase()を使用してみます。

⚫︎ Main.js

⚫︎ 実行結果

toUpperCase()とtoLowerCase()でひらがなを大文字/小文字に変換した結果

toUpperCase()やtoLowerCase()はひらがなを大文字や小文字に変更することができません。

そのため、変更されずそのままの文字列が表示されています。

カタカナを大文字/小文字に変換する場合

カタカナを大文字/小文字に変換する場合に、toUpperCase()とtoLowerCase()を使用してみます。

⚫︎ Main.js

⚫︎ 実行結果

toUpperCase()とtoLowerCase()でカタカナを大文字/小文字に変換した結果

toUpperCase()やtoLowerCase()はカタカナを大文字や小文字に変更することができません。

そのため、変更されずそのままの文字列が表示されています。

ギリシャ文字を大文字/小文字に変換する場合

ギリシャ文字を大文字/小文字に変換する場合に、toUpperCase()とtolowerCase()を使用してみます。

⚫︎ Main.js

⚫︎ 実行結果

toUpperCase()とtoLowerCase()でギリシャ文字を大文字/小文字に変換した結果

toUpperCase()によって指定したギリシャ文字の文字列が大文字に変換されています。

また、toLowerCase()によって指定したギリシャ文字の小文字が大文字に変換されています。

キリル文字を大文字/小文字に変換する場合

キリル文字を大文字/小文字に変換する場合にtoUpperCase()とtolowerCase()を使用してみます。

⚫︎ Main.js

⚫︎ 実行結果

toUpperCase()とtoLowerCase()でキリル文字を大文字/小文字に変換した結果

toUpperCase()によって指定したキリル文字の文字列が大文字に変換されています。

また、toLowerCase()によって指定したキリル文字の小文字が大文字に変換されています。

指定した文字列の一部だけを大文字/小文字に変換する場合

指定した文字列の一部だけを大文字/小文字に変換する場合はsubstr()を使用します。

substr()とは、指定した文字列の一部を取り出すメソッドになります。

つまり、substr()で文字列を一部だけ取り出し、取り出した文字列に対してtoLowerCase()やtoUpperCase()を使用することで、指定した文字列だけを大文字や小文字に変換することができます。

⚫︎ Main.js

⚫︎ 実行結果

substr()と組み合わせてtoLowerCase()やtoUpperCase()で指定した文字列の一部だけを大文字/小文字に変換した結果

substr()で取り出した文字列に対して、大文字や小文字に変換して表示されています。

そのため、文字列内にある「underground」が大文字に、「UNDRGROUND」が小文字に変換されて表示されています。

もし、substr()について詳しく知りたい場合は下記の記事をご参考ください。

toUpperCase()/toLowerCase()を実際に使用したケース

toUpperCase()/toLowerCase()を実際に使用したケースについてご紹介します。

例えば、テキストエリアで文字を入力した後にフィーカスを外すと、文字列が大文字や小文字に強制変換されるようになります。

⚫︎ index.html

⚫︎ main.js

⚫︎ 実行結果

toUpperCase()/toLowerCase()でテキストエリアの文字列を大文字や小文字に強制変換したj結果

toUpperCase()によってテキストエリアに入力された文字列を強制的に大文字へ変換しています。

また、toLowerCase()によってテキストエリアに入力された文字列を強制的に小文字へ変換しています。

Sossy

大文字や小文字のみのような規制のある入力エリアを設置したい場合、大文字か小文字かどうかのエラーチェックをするのは面倒です。
しかし、こちらの処理を使用すると強制的に大文字や小文字に変換されるのでエラーチェックが楽になります。

まとめ

⚫︎ toUpperCase()とは、指定した文字列を大文字に変換するメソッドである

⚫︎ toLowperCase()とは、指定した文字列を小文字に変換するメソッドである

⚫︎ toUpperCase()とtoLowperCase()にパラメータはない

⚫︎ toUpperCase()とtoLowperCase()の返り値は指定した文字列の大文字/小文字となる

⚫︎ アルファベットにtoUpperCase()とtoLowperCase()を使用すると、大文字/小文字へと変換して返す

⚫︎ ひらがなにtoUpperCase()とtoLowperCase()を使用すると、変換されずそのまま返す
(ひらがなは対応していない)

⚫︎ カタカナにtoUpperCase()とtoLowperCase()を使用すると、変換されずそのまま返す
(カタカナは対応していない)

⚫︎ ギリシャ文字にtoUpperCase()とtoLowperCase()を使用すると、大文字/小文字に変換して返す

⚫︎ キリル文字にtoUpperCase()とtoLowperCase()を使用すると、大文字/小文字に変換して返す

⚫︎ toUpperCase()とtoLowperCase()で指定した文字列の一部だけを大文字/小文字に変換するにはsubstr()と組み合わせて使用する

コメントを残す

メールアドレスが公開されることはありません。