JavaScript で文字列の最初の文字を大文字にする方法

Kirill Ibrahim 2023年10月12日 JavaScript JavaScript String
  1. JavaScript の最初の文字を大文字にするには toUpperCase() と slice() メソッドを使用する
  2. toUpperCase() と charAt() を併用して JavaScript の最初の文字を利用する
  3. toUpperCase() と replace() を使用して JavaScript の最初の文字を大文字にする
JavaScript で文字列の最初の文字を大文字にする方法

JavaScript で文字列の最初の文字を大文字にする方法はいくつかあります。

例えば：

  • "this is an example" -> "This is an example"
  • "the Atlantic Ocean" -> "The Atlantic Ocean"

JavaScript の最初の文字を大文字にするには toUpperCase() と slice() メソッドを使用する

toUpperCase() メソッドは文字列のすべての文字を大文字に変換します。

slice(start,end) メソッドは文字列の一部を抽出して新しい文字列として返します。

start は必須のパラメータです。これは文字列のスライスを開始する位置です。

end はオプションです。スライス文字列の終了位置です。省略した場合、slice() は文字列の末尾で終了します。

例：

<!DOCTYPE html>   
<html>   
    <head>  
        <title></title> 
    </head>  
        
    <body style = "text-align:center;">     
          
        <input id = "input" type="text" name="input"/>  
        <button onclick="capitalizeString()">  
            Capitalize 
        </button>  
        <h3 id = "modified-string" > 
        </h3> 
            
        <script>  
         
        function capitalizeString() {
          let input = document.getElementById("input"); 
          let headingElement = document.getElementById("modified-string"); 
          let string = input.value; 
          headingElement.innerHTML = string[0].toUpperCase() +  
            string.slice(1); 
        } 
        </script>  
    </body>   
</html>

出力：

JavaScript は文字列の最初の文字を利用する

もう一つの例：

// shortened version
function capitalize(sentence) {
  return sentence && sentence[0].toUpperCase() + sentence.slice(1);
}

toUpperCase() と charAt() を併用して JavaScript の最初の文字を利用する

charAt() メソッドは文字列の指定されたインデックスから文字を返します。インデックスは 0 から始まります。

例：

// We will use the same html above
function capitalizeString() {
  let input = document.getElementById('input');
  let headingElement = document.getElementById('modified-string');
  let string = input.value;
  headingElement.innerHTML = string.charAt(0).toUpperCase() + string.slice(1);
  ;
}

toUpperCase() と replace() を使用して JavaScript の最初の文字を大文字にする

replace() は JavaScript に組み込まれているメソッドで、指定された文字列から指定された値や正規表現パターンを検索し、それを置換して新しい文字列を返します。

JavaScript の replace() 構文

string.replace(paramA, paramB)

ここで、paramA は値または正規表現、paramB は paramA を置換する値です。

注意
元の文字列は変更されず、戻り値は置換された要素を含む新しい文字列となります。

replace() メソッドの簡単な例を示する

function replaceFunction() {
  let str = 'Google Event';
  let res = str.replace('Google', 'Microsoft');
  console.log(res)
}
replaceFunction();

function replaceAllFunction() {
  let str = 'Google Event will be in Headquarters of Google';
  let res = str.replace(/Google/g, 'Microsoft');
  console.log(res)
}
replaceFunction();
注意
replace() メソッドはデフォルトでは最初のインスタンスのみを置換します。すべてのインスタンスを置換するには、正規表現のグローバル (g) 修飾子を使用しなければなりません。

例：

// We will use the same html above
function capitalizeString() {
  let input = document.getElementById('input');
  let headingElement = document.getElementById('modified-string');
  let string = input.value;
  headingElement.innerHTML = string.replace(/^./, string[0].toUpperCase());
}

は文字列の最初の文字を表します。正規表現の詳細は RegExp チュートリアル および RegExp オブジェクトリファレンス を参照してください。

チュートリアルを楽しんでいますか？ <a href="https://www.youtube.com/@delftstack/?sub_confirmation=1" style="color: #a94442; font-weight: bold; text-decoration: underline;">DelftStackをチャンネル登録</a> して、高品質な動画ガイドをさらに制作するためのサポートをお願いします。 Subscribe

関連記事 - JavaScript String