JavaScript で文字列の最初の文字を大文字にする方法
Kirill Ibrahim
2023年10月12日
-
JavaScript の最初の文字を大文字にするには
toUpperCase()とslice()メソッドを使用する -
toUpperCase()とcharAt()を併用して JavaScript の最初の文字を利用する -
toUpperCase()とreplace()を使用して 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>
出力：
もう一つの例：
// 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 オブジェクトリファレンス を参照してください。