英語表記の文字で「大文字と小文字を変換したい」という場面は多くあります。
最近ではサイト制作やアプリ開発で、デザインのなかで英語を使う場面が非常に多くなってきますしね。
結論から言うとJavaScript で大文字と小文字を変換するのは１行で終了します。
使う場面が多いにも関わらず実装は簡単なのでぜひ覚えておくと良いでしょう。
また動画もあるのでご参考までに。
JavaScriptで大文字→小文字に変換する方法
まず大文字→小文字に変換する方法を紹介します。
let text = "AAA";
text = text.toLowerCase();
console.log(text); // aaaと出力されるJavaScriptにはtoLowerCaseという関数があり、変換したい対象に続けて記載することで自動で小文字に変えてくれます。
ちなみに日本語でも「っ」をはじめとした小文字を使うことがありますが、日本語には使えないことには注意しましょう。
といっても日本語で大文字→小文字に変換したい場面なんて無いので大丈夫かとは思います。
JavaScriptで小文字→大文字に変換する方法
続いて小文字→大文字に変換する方法も見ていきましょう。
let text = "aaa";
text = text.toUpperCase();
console.log(text); // AAAと出力される小文字→大文字に変換するときはtoUpperCaseという関数を使います。
toLowerCaseとtoUpperCaseともに英語から見て直感的に覚えやすいですよね。
最後によくある場面を例題にして使ってみましょう。
JavaScriptで大文字→小文字に変換する例
例えばチャットアプリのslackを使ったことはあるでしょうか？
チャンネル名は英語の小文字のみになっていて、仮に間違えて大文字を入力してしまったとしても自動で変換してくれます。
そうしたケースにも今回の関数が使われています。
<body>
<div class="container">
<label for=""><input type="text" class="name" id="name"></label>
</div>
<p>チャンネル名: <span id="channel"></span></p>
</body>
HTMLの方で簡単に入力欄を作ってみました。
「チャンネル名：」となっている場所に入力されたチャンネル名が表示されるようにしていきたいと思います。
const inputName = document.querySelector("#name");
const channelName = document.querySelector("#channel")
inputName.addEventListener("keyup", keyup);
function keyup (){
const value = inputName.value;
channelName.innerHTML = value.toLowerCase();
}keyup関数のなかでtoLowerCaseを使っています。
こちらのJavaScriptファイルを先ほどのHTMLファイルに読み込んで使ってみましょう。
大文字で入力しても小文字に変換されていますね。
「小文字が来た場合はどうなるのか？」と思われる方がいるかもしれませんが安心してください。
問題なく出力されていますね。
ちなみに変換が一部だとしても大丈夫です。
大文字と小文字が混じった内容が来たとしても「全てを小文字に統一する」という動きをしてくれます、とても便利ですね。