JavaScriptの文字列を大文字に変換する方法

●JavaScriptで文字列を大文字に変換しよう！

JavaScriptで文字列を操作する際、大文字に変換したいというシーンは意外と多いのではないでしょうか。

例えば、ユーザーの入力をすべて大文字で統一したい場合や、文字列の比較を行う際に大文字小文字を区別しないようにしたい場合などです。

そんなときに役立つのが、JavaScriptのtoUpperCase()メソッドです。

この関数を使えば、文字列を簡単に大文字に変換することができます。

ここからは、toUpperCase()の使い方を具体的なサンプルコードとともに解説していきましょう。

○toUpperCase()メソッドとは？

toUpperCase()は、文字列を大文字に変換するためのメソッドです。

使い方はとてもシンプルで、変換したい文字列の後ろにドット(.)を付けてtoUpperCase()を呼び出すだけ。

次のように記述します。

文字列.toUpperCase()

○サンプルコード1：文字列を大文字に変換

では実際に、toUpperCase()を使って文字列を大文字に変換してみましょう。

const str = "Hello, World!";
console.log(str.toUpperCase()); // "HELLO, WORLD!" と出力される

strに格納されている文字列"Hello, World!"を、toUpperCase()で大文字に変換しています。

結果は"HELLO, WORLD!"となり、すべての文字が大文字になっていますね。

実行結果

HELLO, WORLD!

このように、toUpperCase()を使えばとても簡単に文字列を大文字に変換できます。

ただし、注意点として、toUpperCase()は元の文字列は変更せず、新しい文字列を返す、ということを覚えておきましょう。

●大文字小文字を区別しない比較をするには？

さて、JavaScriptで文字列を比較する場合、デフォルトでは大文字小文字が区別されます。

つまり、"apple"と"APPLE"は別の文字列として扱われるわけです。

ただ、プログラムを書いていると、入力された文字列を大文字小文字を区別せずに比較したいこともありますよね。

例えば、ユーザーがフォームに入力した文字列を、あらかじめ用意しておいた文字列リストと照合する場合などです。

そんなときは、toUpperCase()と組み合わせて次のような比較を行うのが一般的です。

const str1 = "Hello";
const str2 = "HELLO";

if (str1.toUpperCase() === str2.toUpperCase()) {
  console.log("str1とstr2は等しい");
} else {
  console.log("str1とstr2は等しくない");
}

実行結果

str1とstr2は等しい

比較する両方の文字列をtoUpperCase()で大文字に変換してから、===で厳密に等価比較をしています。

これなら、str1とstr2の大文字小文字の違いを無視して、中身が同じかどうかをチェックできます。

○localeCompare()メソッドを使う

ただ、toUpperCase()を使った方法だと、比較のたびに大文字変換の処理が必要になるので、少し冗長に感じるかもしれません。

そこでもう一つ、localeCompare()というメソッドを使った比較方法を紹介しましょう。

localeCompare()は次のように使います。

文字列1.localeCompare(文字列2, ロケール, オプション)

ロケールには言語コードを指定します。

そして、オプションのsensitivityに"base"を設定すると、アクセントや大文字小文字の違いを無視して比較してくれるのです。

○サンプルコード2：大文字小文字を区別しない比較

localeCompare()を使って、大文字小文字を区別せずに文字列を比較してみましょう。

const str1 = "Hello";
const str2 = "HELLO";

if (str1.localeCompare(str2, "en", { sensitivity: "base" }) === 0) {
  console.log("str1とstr2は等しい");
} else {
  console.log("str1とstr2は等しくない");
}

実行結果

str1とstr2は等しい

localeCompare()の返り値が0なら等しく、そうでなければ等しくない、と判定しています。

ロケールは英語の"en"を指定し、sensitivityオプションには"base"をセットしていますね。

○サンプルコード3：関数化して使いまわす

大文字小文字を区別しない比較は、プログラムの様々な場所で使われるはず。

そこで、比較ロジックを関数化してみましょう。

function equalIgnoreCase(str1, str2) {
  return str1.localeCompare(str2, "en", { sensitivity: "base" }) === 0;
}

console.log(equalIgnoreCase("Hello", "HELLO")); // true
console.log(equalIgnoreCase("Hello", "hello")); // true
console.log(equalIgnoreCase("Hello", "World")); // false

実行結果

true
true
false

equalIgnoreCase()という関数を定義し、そこにlocaleCompare()を使った比較ロジックを記述しました。

引数で受け取った2つの文字列の比較結果を真偽値で返しています。

これで、大文字小文字を区別しない比較を手軽に呼び出せるようになりましたね。

●文字列の一部だけ大文字にするには？

さて、ここまでで文字列全体を大文字に変換する方法や、大文字小文字を区別しない比較の方法について解説してきました。

でも、文字列の一部分だけ大文字にしたい場合ってありますよね。

例えば、ユーザーが入力した文字列の先頭だけ大文字にして整形したいとか、特定の位置から大文字に変えたいといったケースです。

そんなときは、toUpperCase()とslice()を組み合わせるのが得策ですよ。

○slice()とtoUpperCase()を組み合わせる

slice()は、文字列の一部分を切り出すメソッドです。

始まりの位置と終わりの位置を指定して、その範囲の文字列を取り出せます。

これとtoUpperCase()を一緒に使えば、文字列の一部だけを大文字に変換できるというわけです。

○サンプルコード4：先頭1文字だけ大文字に

まずは、文字列の先頭1文字だけを大文字にする例を見てみましょう。

const str = "hello, world!";
const capitalized = str.slice(0, 1).toUpperCase() + str.slice(1);
console.log(capitalized);

実行結果

Hello, world!

slice(0, 1)で、最初の1文字だけを切り出しています。

それをtoUpperCase()で大文字に変換した後、slice(1)で切り出した2文字目以降と結合しているんですね。

これで、先頭だけ大文字になった文字列が完成します。

○サンプルコード5：指定した位置から大文字に

先頭だけでなく、任意の位置から大文字に変換することもできます。

function capitalizeFrom(str, pos) {
  if (pos < 0 || pos >= str.length) {
    return str; // 不正な位置なら元の文字列を返す
  }
  return str.slice(0, pos) + str.slice(pos).toUpperCase();
}

console.log(capitalizeFrom("hello, world!", 7)); // "hello, WORLD!"
console.log(capitalizeFrom("hello, world!", 0)); // "HELLO, WORLD!"
console.log(capitalizeFrom("hello, world!", 99)); // "hello, world!"

実行結果

hello, WORLD!
HELLO, WORLD!
hello, world!

capitalizeFrom()は、文字列とpos を投票し、文字列の pos 番目の文字から最後までを大文字にします。

posには、大文字に変換したい位置を指定しています。

●よくあるミスと注意点

さて、ここまでtoUpperCase()を使った文字列の大文字変換について見てきましたが、実際にコードを書く際によく遭遇するミスや注意点についても触れておきましょう。

初心者のうちは、些細なことでつまずいてしまうことも多いと思います。

でも、そういったミスを一つ一つ潰していくことが、Javascriptの学習には大切なんですよね。

○大文字に変換しても元の文字列は変わらない

まず押さえておきたいのが、toUpperCase()は元の文字列を変更するわけではないということです。

新しい文字列を返すだけで、元の文字列はそのまま残ります。

let str = "Hello";
str.toUpperCase();
console.log(str); // "Hello"

実行結果

Hello

str.toUpperCase()としても、strの中身は変化しませんでした。

大文字に変換した結果を使うなら、別の変数に代入するなどの処理が必要ですね。

○空文字を渡すとどうなる？

空文字（""）をtoUpperCase()に渡すと、どうなるでしょうか。

console.log("".toUpperCase()); // ""

実行結果

空文字をそのまま返してくれました。

JavaScriptでは、空文字も立派な文字列として扱われるので、toUpperCase()で変換できるんですね。

○null/undefinedを渡すとエラーになる

では、nullやundefinedを渡したらどうでしょうか。

console.log(null.toUpperCase());      // エラー
console.log(undefined.toUpperCase()); // エラー

実行結果

TypeError: Cannot read property 'toUpperCase' of null

残念ながら、エラーが発生してしまいました。

toUpperCase()は文字列にしか使えないので、文字列でないnullやundefinedでは呼び出せません。

このように、toUpperCase()に何を渡すかによって挙動が変わるので、input値が何なのか確認することが大切です。

●toUpperCase()の便利な使い方

さて、ここまでtoUpperCase()の基本的な使い方から、注意点までを見てきました。

最後に、実務でも役立ちそうなtoUpperCase()の活用例をいくつか紹介したいと思います。

普段のコーディングの中で、文字列を大文字に変換したいシーンは意外と多いものです。

例えば、ユーザー入力のバリデーションや、データベースに保存する前にデータを正規化するなどの場面で役立ちます。

○サンプルコード6：ユーザー入力を大文字で統一

まずは、フォームから入力された文字列を大文字に統一する例です。

function submitForm() {
  const form = document.querySelector('form');
  const input = form.querySelector('input[type="text"]');
  const value = input.value.toUpperCase();
  console.log(`フォームの入力値は ${value} です`);
  // 実際にはここでバリデーションなどを行う
}

ここでは、フォームの送信時にsubmitForm()が呼ばれることを想定しています。

input要素から入力値を取得し、それをtoUpperCase()で大文字に変換しています。

これで、例えば「John」と入力しても「JOHN」と統一することができます。

大文字で統一しておけば、データベースでの照合時に、大文字小文字の違いで意図しない結果になるのを防げますね。

○サンプルコード7：複数の文字列を連結して大文字に

次は、複数の文字列を連結した後に大文字変換する例を見てみましょう。

const firstName = "john";
const lastName = "smith";
const fullName = `${firstName} ${lastName}`.toUpperCase();
console.log(fullName); // "JOHN SMITH"

実行結果

JOHN SMITH

テンプレートリテラルを使って、firstNameとlastNameを半角スペースで連結しています。

その結果の文字列に対してtoUpperCase()を呼び出せば、連結後の文字列を簡単に大文字に変換できました。

フルネームだけでなく、住所や電話番号など、複数の情報を繋げて大文字で保持したいケースにも応用できるでしょう。

こんな風に、他の文字列操作と組み合わせて使うのもtoUpperCase()の強みだと言えます。

まとめ

JavaScriptのtoUpperCase()メソッドを使えば、文字列を簡単に大文字に変換できることがわかりました。

toUpperCase()は、文字列のすべての文字を大文字に変えてくれる便利な関数です。

また、slice()と組み合わせることで、文字列の一部だけを大文字にすることもできましたね。

さらに、localeCompare()と一緒に使えば、大文字小文字を区別せずに文字列を比較できるのもtoUpperCase()の魅力です。

実務では、ユーザー入力のバリデーションや、複数の文字列を連結して処理するシーンなどで活躍してくれるでしょう。

これからは、文字列操作が必要になったら、ぜひtoUpperCase()を思い出してみてください。

きっと、JavaScriptを使いこなすための強い味方になってくれるはずです。