JavaScriptで文字列を大文字・小文字に変換する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで文字列を大文字・小文字に変換する方法について現役エンジニアが解説しています。文字変換を行うのにはtoUpperCase、toLowerCaseメソッドを利用可能です。toUpperCaseで大文字に、toLowerCaseで小文字に文字列を変換することができます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptで文字列を大文字・小文字に変換する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

今回は、JavaScriptで文字列を大文字・小文字に変換する方法について詳しく説明していくね!

大石ゆかり

お願いします!

JavaScriptで文字列を大文字・小文字に変換する方法

大文字・小文字変換には、toUpperCaseメソッド・toLowerCaseメソッドを利用します。

toUpperCaseは小文字を大文字、toLowerCaseは大文字を小文字に変換します。

そのため、文字列を全て大文字または小文字に変換することが可能です。

 

toUpperCase、toLowerCaseメソッドの使い方

どちらも使い方は変わりません。

ここでは、toUpperCaseを例として使用しましょう。

 

String.toUpperCase()という形で記述します。

var str = new String("Hallo Japan!");
var UPstr = str.toUpperCase();

の様に利用するものです。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際のコード例

<!DOCTYPE html>
  <meta http-equiv="content-type" charset="utf-8">
  <html>
  <head>
    <title>JavaScriptで文字列を大文字・小文字に変換する方法</title>
  </head>
  <body>
    <h1>JavaScriptで文字列を大文字・小文字に変換する方法</h1>
    <p>最初の"String"の値:<label id="a_1">_____</label></p>
    <p>大文字にした"String"の値:<label id="a_2">_____</label></p>
    <p>小文字にした"String"の値:<label id="a_3">_____</label></p>
    <p>変換をしたもとの"String"の値:<label id="a_4">_____</label></p>
    <script type="text/javascript">
      var str = "Hello Japan!!";
      document.getElementById("a_1").innerHTML =str;
      var upstr = str.toUpperCase();
      document.getElementById("a_2").innerHTML =upstr;
      var lowstr = str.toLowerCase();
      document.getElementById("a_3").innerHTML =lowstr;
      document.getElementById("a_4").innerHTML =str;
    </script>
  </body>
</html>

 

監修してくれたメンター

小宮山晃史(こみやまこうじ)
現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

田島悠介

JavaScriptで文字列を大文字・小文字に変換する方法は理解できた?

大石ゆかり

はい!内容もよくわかったのでよかったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

ありがとうございます!これからもどんどん聞いていきますね!

 

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。