JavaScript 大文字と小文字を変換(toLower/toUpperCase)

JavaScriptの英字の大文字と小文字を変換するサンプルです。

サンプル	英字の大文字を小文字にする(toLowerCase)
	英字の小文字を大文字にする(toUpperCase)
	先頭の文字のみ大文字にする
	最初の文字を大文字にして他の文字を小文字にする
	大文字を小文字にし、小文字を大文字にする

英字の大文字を小文字にする(toLowerCase)

文字列.toLowerCase()

toLowerCaseメソッドは、英字の大文字を小文字にします

<script>
  const str1 = "ABC";
  console.log(str1.toLowerCase()); // abc

  const str2 = "Abc";
  console.log(str2.toLowerCase()); // abc

  const str3 = "あいう";
  console.log(str3.toLowerCase()); // あいう
</script>

8行目は全角文字ですがこの場合は変化ありません。

英字の小文字を大文字にする(toUpperCase)

文字列.toUpperCase()

toUpperCaseメソッドは、英字の小文字を大文字にします。

<script>
  const str1 = "abc";
  console.log(str1.toUpperCase()); // ABC

  const str2 = "AbC";
  console.log(str2.toUpperCase()); // ABC

  const str3 = "あいう";
  console.log(str3.toUpperCase()); // あいう
</script>

8行目は全角文字ですがこの場合は変化ありません。

先頭の文字のみ大文字にする

const str1 = "abcde";
console.log(str1.slice(0,1).toUpperCase() + str1.slice(1)); // Abcde

const str2 = "abcDE";
console.log(str2.slice(0,1).toUpperCase() + str2.slice(1)); // AbcDE

sliceの引数が2つの場合は、1つめの引数は開始位置で2つめの引数は終了位置です。
sliceの引数が1つの場合は、指定した位置の文字から最後の文字まで取得します。
5行目は、後ろ2つの文字は大文字のままです。

最初の文字を大文字にして他の文字を小文字にする

const str1 = "abcde";
console.log(str1.slice(0,1).toUpperCase() + str1.slice(1).toLowerCase()); // Abcde

const str2 = "abcDE";
console.log(str2.slice(0,1).toUpperCase() + str2.slice(1).toLowerCase()); // Abcde

sliceの引数が2つの場合は、1つめの引数は開始位置で2つめの引数は終了位置です。
sliceの引数が1つの場合は、指定した位置の文字から最後の文字まで取得します。
5行目は、後ろ2つの文字も小文字になっています。

大文字を小文字にし、小文字を大文字にする

<script>
  var str1 = "AbCdEfg"
  var str2 = "";
  for (let i = 0; i < str1.length; i++) {
    if (str1[i] === str1[i].toLowerCase()) {
      str2 = str2 + str1[i].toUpperCase();
    } else {
      str2 = str2 + str1[i].toLowerCase();
    }
  }
  console.log(str2); // aBcDeFG
</script>

for文のループで文字列を1文字ずつみていきます。
if文で小文字か判定しtrueであれば大文字に、そうでなければ小文字に変換します。