Bagaimana cara membuat huruf pertama dari string huruf besar dalam JavaScript?

Bagaimana cara saya membuat huruf pertama dari string huruf besar, tetapi tidak mengubah huruf apa pun dari huruf lainnya?

Sebagai contoh:

• "this is a test" -> "This is a test"
• "the Eiffel Tower" -> "The Eiffel Tower"
• "/index.html" -> "/index.html"

Solusi dasarnya adalah:

function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

console.log(capitalizeFirstLetter('foo')); // Foo

Beberapa jawaban lain memodifikasi String.prototype(jawaban ini dulu juga), tetapi saya akan menyarankan ini sekarang karena rawatan (sulit untuk mengetahui di mana fungsi ditambahkan ke prototypedan dapat menyebabkan konflik jika kode lain menggunakan nama yang sama / browser menambahkan fungsi asli dengan nama yang sama di masa mendatang).

... dan kemudian, ada jauh lebih banyak dari pertanyaan ini ketika Anda mempertimbangkan internasionalisasi, seperti yang ditunjukkan oleh jawaban yang bagus (terkubur di bawah).

Jika Anda ingin bekerja dengan titik kode Unicode alih-alih unit kode (misalnya untuk menangani karakter Unicode di luar Basic Multilingual Plane), Anda dapat memanfaatkan fakta yang String#[@iterator]bekerja dengan titik kode, dan Anda dapat menggunakan toLocaleUpperCaseuntuk mendapatkan pelafalan yang benar secara lokal:

function capitalizeFirstLetter([ first, ...rest ], locale = navigator.language) {
  return [ first.toLocaleUpperCase(locale), ...rest ].join('');
}

console.log(capitalizeFirstLetter('foo')); // Foo
console.log(capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉")); // "𐐎𐐲𐑌𐐼𐐲𐑉" (correct!)
console.log(capitalizeFirstLetter("italya", 'tr')); // İtalya" (correct in Turkish Latin!)

Untuk opsi internasionalisasi yang lebih banyak lagi, silakan lihat jawaban asli di bawah ini .

Berikut ini pendekatan yang lebih berorientasi objek:

String.prototype.capitalize = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

Anda akan memanggil fungsinya, seperti ini:

"hello world".capitalize();

Dengan output yang diharapkan:

"Hello world" 

Dalam CSS:

p:first-letter {
    text-transform:capitalize;
}

Ini adalah versi singkat dari jawaban populer yang mendapatkan huruf pertama dengan memperlakukan string sebagai array:

function capitalize(s)
{
    return s[0].toUpperCase() + s.slice(1);
}

Memperbarui:

Menurut komentar di bawah ini tidak berfungsi di IE 7 atau di bawah.

Pembaruan 2:

Untuk menghindari undefinedstring kosong (lihat komentar @ njzk2 di bawah ), Anda dapat memeriksa string kosong:

function capitalize(s)
{
    return s && s[0].toUpperCase() + s.slice(1);
}

Jika Anda tertarik dengan kinerja beberapa metode berbeda yang dipasang:

Berikut adalah metode tercepat berdasarkan uji jsperf ini (dipesan dari yang tercepat ke yang terlambat).

Seperti yang Anda lihat, dua metode pertama pada dasarnya sebanding dalam hal kinerja, sedangkan mengubah String.prototypesejauh ini paling lambat dalam hal kinerja.

// 10,889,187 operations/sec
function capitalizeFirstLetter(string) {
    return string[0].toUpperCase() + string.slice(1);
}

// 10,875,535 operations/sec
function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

// 4,632,536 operations/sec
function capitalizeFirstLetter(string) {
    return string.replace(/^./, string[0].toUpperCase());
}

// 1,977,828 operations/sec
String.prototype.capitalizeFirstLetter = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

Untuk kasus lain saya membutuhkannya untuk huruf besar huruf pertama dan huruf kecil sisanya. Kasus-kasus berikut membuat saya mengubah fungsi ini:

//es5
function capitalize(string) {
    return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
capitalize("alfredo")  // => "Alfredo"
capitalize("Alejandro")// => "Alejandro
capitalize("ALBERTO")  // => "Alberto"
capitalize("ArMaNdO")  // => "Armando"

// es6 using destructuring 
const capitalize = ([first,...rest]) => first.toUpperCase() + rest.join('').toLowerCase();

Ini adalah 2018 ECMAScript 6+ Solution :

const str = 'the Eiffel Tower';
const newStr = `${str[0].toUpperCase()}${str.slice(1)}`;
console.log('Original String:', str); // the Eiffel Tower
console.log('New String:', newStr); // The Eiffel Tower

Jika Anda sudah (atau mempertimbangkan) menggunakan lodash, solusinya mudah:

_.upperFirst('fred');
// => 'Fred'

_.upperFirst('FRED');
// => 'FRED'

_.capitalize('fred') //=> 'Fred'

Lihat dokumen mereka: https://lodash.com/docs#capitalize

_.camelCase('Foo Bar'); //=> 'fooBar'

https://lodash.com/docs/4.15.0#camelCase

_.lowerFirst('Fred');
// => 'fred'

_.lowerFirst('FRED');
// => 'fRED'

_.snakeCase('Foo Bar');
// => 'foo_bar'

Vanilla js untuk huruf besar pertama:

function upperCaseFirst(str){
    return str.charAt(0).toUpperCase() + str.substring(1);
}

Huruf kapital pertama dari semua kata dalam string:

function ucFirstAllWords( str )
{
    var pieces = str.split(" ");
    for ( var i = 0; i < pieces.length; i++ )
    {
        var j = pieces[i].charAt(0).toUpperCase();
        pieces[i] = j + pieces[i].substr(1);
    }
    return pieces.join(" ");
}

Kita bisa mendapatkan karakter pertama dengan salah satu favorit saya RegExp, terlihat seperti smiley yang lucu:/^./

String.prototype.capitalize = function () {
  return this.replace(/^./, function (match) {
    return match.toUpperCase();
  });
};

Dan untuk semua pecandu kopi:

String::capitalize = ->
  @replace /^./, (match) ->
    match.toUpperCase()

... dan untuk semua orang yang berpikir bahwa ada cara yang lebih baik untuk melakukan ini, tanpa memperluas prototip asli:

var capitalize = function (input) {
  return input.replace(/^./, function (match) {
    return match.toUpperCase();
  });
};

Menggunakan:

var str = "ruby java";

console.log(str.charAt(0).toUpperCase() + str.substring(1));

Ini akan ditampilkan "Ruby java"ke konsol.

Jika Anda menggunakan underscore.js atau Lo-Dash , pustaka underscore.string menyediakan ekstensi string, termasuk huruf besar:

_.capitalize (string) Mengubah huruf pertama dari string menjadi huruf besar.

Contoh:

_.capitalize("foo bar") == "Foo bar"

String.prototype.capitalize = function(allWords) {
   return (allWords) ? // if all words
      this.split(' ').map(word => word.capitalize()).join(' ') : //break down phrase to words then  recursive calls until capitalizing all words
      this.charAt(0).toUpperCase() + this.slice(1); // if allWords is undefined , capitalize only the first word , mean the first char of the whole string
}

Lalu:

 "capitalize just the first word".capitalize(); ==> "Capitalize just the first word"
 "capitalize all words".capitalize(true); ==> "Capitalize All Words"

Perbarui Nov.2016 (ES6), hanya untuk MENYENANGKAN:

const capitalize = (string = '') => [...string].map(    //convert to array with each item is a char of string by using spread operator (...)
    (char, index) => index ? char : char.toUpperCase()  // index true means not equal 0 , so (!index) is the first char which is capitalized by `toUpperCase()` method
 ).join('')                                             //return back to string

kemudian capitalize("hello") // Hello

Solusi SHORTEST 3, 1 dan 2 menangani kasing saat sstring "", nulldan undefined:

 s&&s[0].toUpperCase()+s.slice(1)        // 32 char

 s&&s.replace(/./,s[0].toUpperCase())    // 36 char - using regexp

'foo'.replace(/./,x=>x.toUpperCase())    // 31 char - direct on string, ES6

let s='foo bar';

console.log( s&&s[0].toUpperCase()+s.slice(1) );

console.log( s&&s.replace(/./,s[0].toUpperCase()) );

console.log( 'foo bar'.replace(/./,x=>x.toUpperCase()) );

Hanya CSS

p::first-letter {
  text-transform: uppercase;
}

• Meskipun dipanggil ::first-letter, itu berlaku untuk karakter pertama , yaitu dalam hal string %a, pemilih ini akan berlaku untuk %dan karena aitu tidak akan dikapitalisasi.
• Dalam IE9 + atau IE5.5 + itu didukung dalam notasi warisan dengan hanya satu titik dua ( :first-letter).

ES2015 satu-liner

Karena ada banyak jawaban, tetapi tidak ada dalam ES2015 yang akan menyelesaikan masalah asli secara efisien, saya datang dengan yang berikut:

const capitalizeFirstChar = str => str.charAt(0).toUpperCase() + str.substring(1);

Catatan

• parameters => functiondisebut fungsi panah .
• Saya menggunakan nama capitalizeFirstCharalih-alih capitalizeFirstLetter, karena OP tidak meminta kode yang menggunakan huruf kapital pada huruf pertama di seluruh string, tetapi karakter pertama (jika huruf, tentu saja).
• constmemberi kami kemampuan untuk menyatakan capitalizeFirstCharsebagai konstan, yang diinginkan karena sebagai seorang programmer Anda harus selalu secara eksplisit menyatakan niat Anda.
• Dalam benchmark yang saya lakukan tidak ada perbedaan yang signifikan antara string.charAt(0)dan string[0]. Namun perlu dicatat, bahwa string[0]akan undefineduntuk string kosong, sehingga harus ditulis ulang untukstring && string[0] , yang terlalu verbose, dibandingkan dengan alternatif.
• string.substring(1)lebih cepat dari string.slice(1).

Tolok ukur

• 4,956,962 ops / s ± 3,03% untuk solusi ini,
• 4,577.946 ops / s ± 1,2% untuk jawaban yang paling banyak dipilih.
• Dibuat dengan JSBench.me di Google Chrome 57.

Ada cara yang sangat sederhana untuk mengimplementasikannya dengan mengganti . Untuk ECMAScript 6:

'foo'.replace(/^./, str => str.toUpperCase())

Hasil:

'Foo'

Tampaknya lebih mudah di CSS:

<style type="text/css">
    p.capitalize {text-transform:capitalize;}
</style>
<p class="capitalize">This is some text.</p>

Ini dari Properti text-transform CSS (di W3Schools ).

var capitalized = yourstring[0].toUpperCase() + yourstring.substr(1);

Saya tidak melihat ada disebutkan dalam jawaban yang ada masalah yang berkaitan dengan poin kode pesawat astral atau internasionalisasi. "Huruf Besar" tidak berarti hal yang sama di setiap bahasa menggunakan skrip yang diberikan.

Awalnya saya tidak melihat jawaban yang membahas masalah yang terkait dengan poin kode pesawat astral. Ada satu , tapi agak terkubur (seperti ini, saya kira!)

Sebagian besar fungsi yang diusulkan terlihat seperti ini:

function capitalizeFirstLetter(str) {
  return str[0].toUpperCase() + str.slice(1);
}

Namun, beberapa karakter yang berada di luar BMP (bidang multibahasa dasar, titik kode U + 0 hingga U + FFFF). Misalnya ambil teks Deseret ini:

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉"); // "𐐶𐐲𐑌𐐼𐐲𐑉"

Karakter pertama di sini gagal menjadi huruf besar karena properti string yang diindeks array tidak mengakses "karakter" atau titik kode *. Mereka mengakses unit kode UTF-16. Ini benar juga ketika mengiris - nilai indeks menunjuk pada unit kode.

Kebetulan bahwa unit kode UTF-16 adalah 1: 1 dengan titik kode USV dalam dua rentang, U + 0 hingga U + D7FF dan U + E000 ke U + FFFF inklusif. Sebagian besar karakter berhubung jatuh ke dalam dua rentang, tetapi tidak semuanya.

Dari ES2015 dan seterusnya, berurusan dengan ini menjadi sedikit lebih mudah. String.prototype[@@iterator]menghasilkan string yang sesuai dengan poin kode **. Jadi misalnya, kita bisa melakukan ini:

function capitalizeFirstLetter([ first, ...rest ]) {
  return [ first.toUpperCase(), ...rest ].join('');
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

Untuk string yang lebih lama, ini mungkin bukan *** yang sangat efisien - kita tidak benar-benar perlu untuk mengulanginya. Kita dapat menggunakan String.prototype.codePointAtuntuk mendapatkan surat pertama (mungkin) itu, tetapi kita masih harus menentukan di mana potongan harus dimulai. Salah satu cara untuk menghindari iterasi sisanya adalah dengan menguji apakah codepoint pertama berada di luar BMP; jika tidak, irisan dimulai pada 1, dan jika ya, irisan dimulai pada 2.

function capitalizeFirstLetter(str) {
  const firstCP = str.codePointAt(0);
  const index = firstCP > 0xFFFF ? 2 : 1;

  return String.fromCodePoint(firstCP).toUpperCase() + str.slice(index);
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

Anda bisa menggunakan matematika bitwise daripada di > 0xFFFFsana, tetapi mungkin lebih mudah untuk memahami cara ini dan juga akan mencapai hal yang sama.

Kami juga dapat membuat ini bekerja di ES5 dan di bawah dengan mengambil logika itu sedikit lebih jauh jika perlu. Tidak ada metode intrinsik dalam ES5 untuk bekerja dengan codepoint, jadi kita harus menguji secara manual apakah unit kode pertama adalah pengganti ****:

function capitalizeFirstLetter(str) {
  var firstCodeUnit = str[0];

  if (firstCodeUnit < '\uD800' || firstCodeUnit > '\uDFFF') {
    return str[0].toUpperCase() + str.slice(1);
  }

  return str.slice(0, 2).toUpperCase() + str.slice(2);
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

Pada awalnya saya juga menyebutkan pertimbangan internasionalisasi. Beberapa di antaranya sangat sulit untuk diperhitungkan karena mereka membutuhkan pengetahuan tidak hanya tentang bahasa apa yang digunakan, tetapi juga mungkin memerlukan pengetahuan khusus tentang kata-kata dalam bahasa tersebut. Misalnya, digraf Irlandia "mb" menggunakan huruf kapital sebagai "mB" pada awal kata. Contoh lain, eszett Jerman, tidak pernah memulai kata (afaik), tetapi masih membantu menggambarkan masalahnya. Eszett huruf kecil ("ß") menggunakan huruf kapital untuk "SS," tetapi "SS" dapat menjadi huruf kecil menjadi "ß" atau "ss" - Anda memerlukan pengetahuan out-of-band dari bahasa Jerman untuk mengetahui mana yang benar!

Contoh paling terkenal dari masalah semacam ini, mungkin, adalah bahasa Turki. Dalam bahasa Latin Turki, bentuk huruf kapital dari i adalah İ, sedangkan bentuk huruf kecil dari I adalah ı - keduanya adalah huruf yang berbeda. Untungnya kami memiliki cara untuk menjelaskan hal ini:

function capitalizeFirstLetter([ first, ...rest ], locale) {
  return [ first.toLocaleUpperCase(locale), ...rest ].join('');
}

capitalizeFirstLetter("italy", "en") // "Italy"
capitalizeFirstLetter("italya", "tr") // "İtalya"

Di browser, tag bahasa yang paling disukai pengguna ditunjukkan oleh navigator.language, daftar menurut preferensi ditemukan di navigator.languages, dan bahasa elemen DOM yang diberikan dapat diperoleh (biasanya) dengan Object(element.closest('[lang]')).lang || YOUR_DEFAULT_HEREdokumen multi bahasa.

Di agen yang mendukung kelas karakter properti Unicode di RegExp, yang diperkenalkan di ES2018, kami dapat membersihkan hal-hal lebih lanjut dengan secara langsung mengekspresikan karakter apa yang kami minati:

function capitalizeFirstLetter(str, locale=navigator.language) {
  return str.replace(/^\p{CWU}/u, char => char.toLocaleUpperCase(locale));
}

Ini bisa sedikit di-tweak untuk menangani kapitalisasi beberapa kata dalam sebuah string dengan akurasi yang cukup baik. Properti CWUatau Changes_When_Uppercased karakter cocok dengan semua titik kode yang, baik, berubah ketika huruf besar. Kita dapat mencoba ini dengan karakter digraf titlecased seperti Belanda ij misalnya:

capitalizeFirstLetter('ijsselmeer'); // "IJsselmeer"

Pada saat penulisan (Feb 2020), Firefox / Spidermonkey belum mengimplementasikan fitur RegExp yang diperkenalkan dalam dua tahun terakhir *****. Anda dapat memeriksa status terkini dari fitur ini di tabel compat Kangax . Babel dapat mengkompilasi literal RegExp dengan referensi properti ke pola yang setara tanpa mereka, tetapi perlu diketahui bahwa kode yang dihasilkan mungkin sangat besar.

Dalam semua kemungkinan, orang yang mengajukan pertanyaan ini tidak akan peduli dengan kapitalisasi Deseret atau internasionalisasi. Tapi ada baiknya menyadari masalah ini karena ada kemungkinan Anda akan menemukan mereka pada akhirnya, bahkan jika mereka tidak masalah saat ini. Mereka bukan kasus "tepi", atau lebih tepatnya, mereka bukan kasus tepi menurut definisi - ada seluruh negara di mana kebanyakan orang berbicara bahasa Turki, dan menggabungkan unit kode dengan codepoint adalah sumber bug yang cukup umum (terutama dengan berkaitan dengan emoji). Baik string dan bahasa cukup rumit!

* Unit kode UTF-16 / UCS2 juga merupakan titik kode Unicode dalam arti bahwa misalnya U + D800 secara teknis merupakan titik kode, tetapi bukan itu "artinya" di sini ... semacam ... meskipun ... kabur. Apa yang pasti bukan pengganti adalah USV (nilai skalar Unicode).

** Meskipun jika unit kode pengganti "yatim" - yaitu, bukan bagian dari pasangan logis - Anda masih bisa mendapatkan pengganti di sini juga.

*** mungkin. Saya belum mengujinya. Kecuali jika Anda telah menentukan kapitalisasi adalah hambatan yang berarti, saya mungkin tidak akan berkeringat - pilih apa pun yang Anda yakini paling jelas dan mudah dibaca.

**** fungsi seperti itu mungkin ingin menguji unit kode pertama dan kedua bukan hanya yang pertama, karena mungkin unit pertama adalah pengganti yatim piatu. Misalnya input "\ uD800x" akan menjadi huruf kapital X apa adanya, yang mungkin atau mungkin tidak diharapkan.

***** Inilah masalah Bugzilla jika Anda ingin mengikuti progres lebih langsung.

Selalu lebih baik untuk menangani hal-hal seperti ini menggunakan CSS terlebih dahulu , secara umum, jika Anda dapat menyelesaikan sesuatu menggunakan CSS, coba dulu itu, kemudian coba JavaScript untuk menyelesaikan masalah Anda, jadi dalam hal ini coba gunakan :first-letterdalam CSS dan terapkantext-transform:capitalize;

Jadi coba buat kelas untuk itu, jadi Anda bisa menggunakannya secara global, misalnya: .first-letter-uppercasedan tambahkan sesuatu seperti di bawah ini di CSS Anda:

.first-letter-uppercase:first-letter {
    text-transform:capitalize;
}

Juga opsi alternatifnya adalah JavaScript, jadi yang terbaik adalah seperti ini:

function capitalizeTxt(txt) {
  return txt.charAt(0).toUpperCase() + txt.slice(1); //or if you want lowercase the rest txt.slice(1).toLowerCase();
}

dan menyebutnya seperti:

capitalizeTxt('this is a test'); // return 'This is a test'
capitalizeTxt('the Eiffel Tower'); // return 'The Eiffel Tower'
capitalizeTxt('/index.html');  // return '/index.html'
capitalizeTxt('alireza');  // return 'Alireza'

Jika Anda ingin menggunakannya kembali berulang kali, lebih baik lampirkan ke javascript String asli, jadi sesuatu seperti di bawah ini:

String.prototype.capitalizeTxt = String.prototype.capitalizeTxt || function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

dan menyebutnya sebagai berikut:

'this is a test'.capitalizeTxt(); // return 'This is a test'
'the Eiffel Tower'.capitalizeTxt(); // return 'The Eiffel Tower'
'/index.html'.capitalizeTxt();  // return '/index.html'
'alireza'.capitalizeTxt();  // return 'Alireza'

Jika Anda ingin memformat ulang teks lengkap, Anda mungkin ingin mengubah contoh lain seperti:

function capitalize (text) {
    return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
}

Ini akan memastikan bahwa teks berikut diubah:

TEST => Test
This Is A TeST => This is a test

function capitalize(s) {
    // returns the first letter capitalized + the string from index 1 and out aka. the rest of the string
    return s[0].toUpperCase() + s.substr(1);
}


// examples
capitalize('this is a test');
=> 'This is a test'

capitalize('the Eiffel Tower');
=> 'The Eiffel Tower'

capitalize('/index.html');
=> '/index.html'

Berikut adalah fungsi yang disebut ucfirst () (kependekan dari "huruf besar huruf pertama"):

function ucfirst(str) {
    var firstLetter = str.substr(0, 1);
    return firstLetter.toUpperCase() + str.substr(1);
}

Anda dapat menggunakan huruf kapital string dengan memanggil ucfirst ("some string") - misalnya,

ucfirst("this is a test") --> "This is a test"

Ia bekerja dengan memisahkan string menjadi dua bagian. Pada baris pertama ia mengeluarkan firstLetter dan kemudian pada baris kedua ia menggunakan huruf kapital firstLetter dengan memanggil firstLetter.toUpperCase () dan menggabungkannya dengan sisa string, yang ditemukan dengan memanggil str.substr (1) .

Anda mungkin berpikir ini akan gagal untuk string kosong, dan memang dalam bahasa seperti C Anda harus memenuhi ini. Namun dalam JavaScript, saat Anda mengambil substring dari string kosong, Anda hanya mendapatkan string kosong kembali.

String.prototype.capitalize = function(){
    return this.replace( /(^|\s)([a-z])/g , function(m,p1,p2){ return p1+p2.toUpperCase();
    } );
};

Pemakaian:

capitalizedString = someString.capitalize();

Ini adalah string teks => Ini adalah string teks

var str = "test string";
str = str.substring(0,1).toUpperCase() + str.substring(1);

Lihat solusi ini:

var stringVal = 'master';
stringVal.replace(/^./, stringVal[0].toUpperCase()); // returns Master 

yourString.replace(/^[a-z]/, function(m){ return m.toUpperCase() });

(Anda dapat merangkumnya dalam suatu fungsi atau bahkan menambahkannya ke prototipe String jika Anda sering menggunakannya.)

The ucfirstfungsi bekerja jika Anda melakukannya seperti ini.

function ucfirst(str) {
    var firstLetter = str.slice(0,1);
    return firstLetter.toUpperCase() + str.substring(1);
}

Terima kasih JP untuk aksinya.

Anda bisa melakukannya dalam satu baris seperti ini

string[0].toUpperCase() + string.substring(1)

yourString.replace(/\w/, c => c.toUpperCase())

Saya menemukan fungsi panah ini paling mudah. Ganti cocok dengan karakter huruf pertama ( \w) dari string Anda dan mengubahnya menjadi huruf besar. Tidak ada yang lebih menarik.