JavaScript：String.prototype.ucfirst - 文字列の先頭文字を大文字にする
2024-04-02
JavaScriptで文字列の最初の文字を大文字にする方法
charAt() と slice() を使う方法
この方法は、文字列の最初の文字を取得し、大文字に変換してから、残りの文字列と結合することで、新しい文字列を作成します。
function ucfirst(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
const str = "javascript";
const upperCaseStr = ucfirst(str);
console.log(upperCaseStr); // "Javascript"
replace() を使う方法
この方法は、文字列の最初の文字を正規表現で大文字に変換します。
function ucfirst(str) {
return str.replace(/^[a-z]/, (match) => match.toUpperCase());
}
const str = "string";
const upperCaseStr = ucfirst(str);
console.log(upperCaseStr); // "String"
toUpperCase() と slice() を使う方法
この方法は、文字列全体を大文字に変換してから、最初の文字のみ小文字に戻します。
function ucfirst(str) {
return str.toUpperCase().slice(0, 1) + str.slice(1).toLowerCase();
}
const str = "javascript";
const upperCaseStr = ucfirst(str);
console.log(upperCaseStr); // "Javascript"
- 処理速度を重視する場合は、charAt() と slice() を使う方法がおすすめです。
- 簡潔なコードを書きたい場合は、replace() を使う方法がおすすめです。
- 文字列全体を大文字に変換してから最初の文字のみ小文字に戻したい場合は、toUpperCase() と slice() を使う方法がおすすめです。
- これらの方法は、文字列の先頭が空白文字の場合、空白文字も大文字に変換します。
- 文字列の先頭が数字の場合、数字はそのままになります。
// 1. charAt() と slice() を使う方法
function ucfirst(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
const str = "javascript";
const upperCaseStr = ucfirst(str);
console.log(upperCaseStr); // "Javascript"
// 2. replace() を使う方法
function ucfirst(str) {
return str.replace(/^[a-z]/, (match) => match.toUpperCase());
}
const str = "string";
const upperCaseStr = ucfirst(str);
console.log(upperCaseStr); // "String"
// 3. toUpperCase() と slice() を使う方法
function ucfirst(str) {
return str.toUpperCase().slice(0, 1) + str.slice(1).toLowerCase();
}
const str = "javascript";
const upperCaseStr = ucfirst(str);
console.log(upperCaseStr); // "Javascript"
実行方法
<script src="ucfirst.js"></script>
<script>
const str = "javascript";
const upperCaseStr = ucfirst(str);
console.log(upperCaseStr); // "Javascript"
</script>
出力結果
Javascript
String
Javascript
補足
- 上記コードは、文字列の先頭が空白文字または数字の場合、そのまま出力されます。
- 文字列の先頭を大文字に変換する方法は他にもあります。
JavaScriptで文字列の最初の文字を大文字にする方法
String.prototype.charAt() と String.prototype.toUpperCase() を使う方法
function ucfirst(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
const str = "javascript";
const upperCaseStr = ucfirst(str);
console.log(upperCaseStr); // "Javascript"
String.prototype.replace() と正規表現を使う方法
この方法は、String.prototype.replace() メソッドと正規表現を使って、文字列の先頭文字を大文字に変換します。
function ucfirst(str) {
return str.replace(/^[a-z]/, (match) => match.toUpperCase());
}
const str = "string";
const upperCaseStr = ucfirst(str);
console.log(upperCaseStr); // "String"
function ucfirst(str) {
return str.charAt(0).toLocaleUpperCase() + str.slice(1);
}
const str = "javascript";
const upperCaseStr = ucfirst(str);
console.log(upperCaseStr); // "Javascript"
function ucfirst(str) {
return str.toUpperCase().slice(0, 1) + str.slice(1).toLowerCase();
}
const str = "javascript";
const upperCaseStr = ucfirst(str);
console.log(upperCaseStr); // "Javascript"
javascript string
