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


3763

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"

12
Underscore memiliki plugin yang disebut underscore.string yang mencakup ini dan banyak alat hebat lainnya.
Aaron

bagaimana dengan:return str.replace(/(\b\w)/gi,function(m){return m.toUpperCase();});
Muhammad Umer

111
Simpler:string[0].toUpperCase() + string.substring(1)
dr.dimitru

7
`${s[0].toUpperCase()}${s.slice(1)}`
noego

([initial, ...rest]) => [initial.toUpperCase(), ...rest].join("")
Константин Ван

Jawaban:


5811

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 .


9
Substring dipahami di lebih banyak browser daripada substr
mplungjan

6
untuk menambahkan ke karim79 - ini mungkin berlebihan untuk membuatnya berfungsi karena javascript akan melakukan hal yang sama pada variabel tanpa fungsi pembungkus. Saya kira itu akan lebih jelas menggunakan fungsi, tetapi aslinya jika tidak, mengapa mempersulit dengan pembungkus fungsi?
Ross

18
Bukankah kita juga harus Menurunkan slice (1)?
Hasen

177
Tidak, karena OP memberikan contoh ini: the Eiffel Tower -> The Eiffel Tower. Plus, fungsinya disebut capitaliseFirstLettertidak capitaliseFirstLetterAndLowerCaseAllTheOthers.
larangan geoengineering

22
Tidak ada yang peduli tentang aturan penting OOP? - Jangan pernah mengedit objek yang bukan milik Anda? . BTW, one-liner ini terlihat jauh lebih elegan:string[0].toUpperCase() + string.substring(1)
dr.dimitru

1350

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" 

24
Saya suka solusi ini karena itu seperti Ruby, dan Ruby manis! :) Saya huruf kecil semua huruf lain dari string sehingga berfungsi persis seperti Ruby:return this.charAt(0).toUpperCase() + this.substring(1).toLowerCase();
ma11hew28

164
Di dunia post-Prototype.js ini, tidak disarankan untuk mengubah atau memperluas objek asli.
Ryan

191
@rxgx - Boogeyman "jangan memperpanjang" sekarang mulai mati (terima kasih Tuhan), dan orang-orang menarik kepala mereka keluar dari jSand dan menyadari itu hanya fitur bahasa. Hanya karena Prototype.js memperpanjang Object itu sendiri untuk waktu yang singkat, tidak berarti memperpanjang Native itu buruk. Anda tidak boleh melakukannya jika Anda menulis kode untuk konsumen yang tidak dikenal (seperti skrip analitik yang berjalan di situs acak), tetapi selain itu tidak apa-apa.
csuwldcat

43
@csuwldcat Bagaimana jika perpustakaan lain yang Anda gunakan menambah kapitalisasi sendiri tanpa Anda menyadarinya? Memperluas prototipe adalah bentuk buruk terlepas dari apakah Prototype.js melakukannya atau tidak. Dengan ES6, intrinsik akan memungkinkan Anda untuk memiliki kue dan memakannya juga. Saya pikir Anda mungkin membingungkan "tukang boogey" sekarat untuk orang yang membuat shims yang sesuai dengan spesifikasi ECMASCRIPT. Shim ini benar-benar baik-baik saja karena perpustakaan lain yang menambahkan shim akan mengimplementasikannya dengan cara yang sama. Namun, menambahkan intrinsik non-spec Anda sendiri harus dihindari.
Justin Meyer

43
Memperluas penduduk asli adalah praktik yang sangat buruk. Bahkan jika Anda mengatakan "oh saya tidak akan pernah menggunakan kode ini dengan hal lain", Anda (atau orang lain) mungkin akan melakukannya. Kemudian mereka akan menghabiskan tiga hari untuk mencari tahu beberapa bug matematika aneh karena seseorang memperpanjang Number.money () untuk berurusan dengan mata uang yang sedikit berbeda dari perpustakaan Anda yang lain. Serius, saya telah melihat ini terjadi di sebuah perusahaan besar dan tidak ada gunanya waktu debugging untuk mencari tahu perpustakaan dev yang berantakan dengan prototipe asli.
phreakhead

574

Dalam CSS:

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

80
OP meminta solusi JS.
Antonio Max

129
$ ('# mystring_id'). text (string) .css ('text-transform', 'capitalize');
DonMB

21
Selain itu, ini hanya memengaruhi tampilan string - bukan nilai sebenarnya. Jika dalam bentuk, misalnya, nilainya akan tetap dikirim apa adanya.
dmansfield

12
Jawaban ini membantu saya menyadari bahwa solusi CSS benar-benar lebih tepat untuk apa yang saya lakukan. @dewewad: Jawabannya mungkin harus memberikan penafian bahwa ini bukan solusi JS tetapi mungkin lebih tepat tergantung pada kebutuhan.
joshden

58
Bagi sekitar 80% pemirsa yang datang ke pertanyaan ini, ini akan menjadi jawaban terbaik. Bukan jawaban untuk pertanyaan , tetapi untuk masalah saja.
Jivan

290

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);
}

23
Ini tidak akan berfungsi di IE <8, karena browser tersebut tidak mendukung pengindeksan string. IE8 sendiri mendukungnya, tetapi hanya untuk string literal - bukan untuk objek string.
Mathias Bynens

52
siapa peduli, pasar IE7 kurang dari 5%! dan itu mungkin mesin lama gremma dan grempa Anda. Saya katakan kode pendek FTW!
vsync

@MathiasBynens Tahukah Anda apakah ini memengaruhi peramban non-IE yang lebih lama atau hanya IE7? Jika tidak ada peramban lain yang terpengaruh oleh pengindeksan string literal pada tahun 2014, kami seharusnya baik-baik saja. :)
hexalys

3
@vsync Saya hanya bermaksud bahwa tergantung pada demografi pengguna Anda, kadang-kadang (meskipun dengan rasa terima kasih yang semakin sedikit saat kami melewati tahun 2014 dan seterusnya) menguntungkan untuk mendukung peramban lama seperti IE7 ...
joshuahedlund

2
@ njzk2 untuk menangani string kosong, Anda dapat memperbarui ini: return s && s[0].toUpperCase() + s.slice(1);
joelvh

188

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);
}

masukkan deskripsi gambar di sini


1
Tampaknya kode inisialisasi tidak membuat perbedaan baik: jsperf.com/capitalize-first-letter-of-string/2
user420667

6
Perhatikan juga, bahwa mengganti .slice(1)dengan .substr(1)akan meningkatkan kinerja lebih jauh.
Przemek

2
Pertimbangan yang masuk akal. Namun perlu diingat bahwa dalam banyak kasus kinerja hit bahkan tidak terlihat: Bahkan pendekatan "paling lambat" akan menangani string 19k dalam 10 ms. Jadi, gunakan yang paling nyaman untuk Anda gunakan.
Mengutip Eddie

1
Jika ada yang penasaran (seperti saya) bagaimana kinerja ini telah meningkat selama empat tahun terakhir, ops / detik dari fungsi ketiga pada macbook pro 2018 adalah 135.307.869, jadi pada dasarnya 12,4 kali lebih cepat.
Carlo Field

151

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();

1
"... tetapi tidak mengubah huruf dari salah satu surat lainnya". Ini bukan jawaban yang benar untuk pertanyaan OP.
Carlos Muñoz

2
@ CarlosMuñoz jika Anda membaca kalimat pembuka dia mengatakan ini untuk kasus yang berbeda.
TMH

3
@ TomHart Itulah mengapa itu bukan solusi untuk pertanyaan itu. Itu harus berupa komentar atau pertanyaan dan jawaban lain
Carlos Muñoz

15
Saya setuju dengan Anda dalam hal itu, tetapi saya dapat melihat banyak orang yang berakhir di sini mencari untuk melakukan apa yang dilakukan jawaban ini.
TMH

74

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


5
.slice()lebih lambat dari .substring(), str[0]akan undefineduntuk string kosong dan menggunakan literal template untuk bergabung dengan dua bagian memperkenalkan di sini 8 karakter, sementara +akan memperkenalkan hanya 3.
Przemek

4
Inti dari jawaban saya Prz adalah menampilkan fitur-fitur baru yang didukung ES6, khususnya templat literal yang tidak disebutkan dalam posting lain. Gagasan StackOverflow adalah untuk memberikan "opsi" kepada pencari. Mereka dapat mengambil konsep Templat Literal yang dijelaskan dalam jawaban ini dan menggabungkannya dengan peningkatan kecepatan mikro seperti Substring v. Slice jika aplikasi mereka membutuhkan milidetik ekstra yang disimpan. Jawaban saya juga tidak termasuk Pengujian Unit, yang menunjukkan bahwa Anda tidak boleh menyalin secara langsung jawaban StackOverflow. Saya menganggap pengembang akan mengambil jawaban saya dan mengadaptasinya.
Sterling Bourne

Anda tidak mendapatkan apa-apa dari menggunakan templat literal di sini dan ${}hanya menambahkan noise. const newStr = str[0].toUpperCase() + str.slice(1);lebih mudah dibaca.
Boris

1
Setuju untuk tidak setuju kemudian pada apa yang lebih mudah dibaca.
Sterling Bourne

67

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);
}

11
Saya pikir preferensi harus untuk vanilla Js karena kebanyakan orang tidak akan mengunduh seluruh kerangka kerja hanya untuk memanfaatkan string.
GGG

7
Dalam semua proyek saya sejauh ini saya belum pernah menggunakan lodash. Jangan lupa bahwa kebanyakan orang di google akan berakhir di halaman ini, dan mendaftar kerangka kerja sebagai alternatif tidak masalah, tetapi bukan sebagai jawaban utama.
GGG

2
Karena jawaban lain menggunakan vanilla js, senang memiliki jawaban seperti ini, karena banyak dari kita menggunakan lodash / garis bawah.
Lu Roman

1
Ini bukan jawaban yang benar karena OP meminta sekarang untuk melakukannya dalam Javascript, bukan perpustakaan Javascript, yang mengimpor seluruh perpustakaan sebagai ketergantungan pada proyek Anda. Jangan gunakan itu.
dudewad

1
Pertanyaan OP ada di vanilla di akhir jawaban saya.
chovy

62

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(" ");
}

14
Baca kembali pertanyaan: Saya ingin menggunakan huruf besar untuk karakter pertama dari string, tetapi tidak mengubah huruf dari salah satu huruf lainnya.
JimmyPena

2
Saya tahu saya melakukannya. Saya akan menambahkan satu hal, seandainya seluruh string mulai ditulis dalam huruf kapital: pieces [i] = j + pieces [i] .substr (1) .toLowerCase ();
Malovich

4
Solusi lain untuk kasus ini: function capitaliseFirstLetters (return) {return s.split ("") .map (function (w) {return w.charAt (0) .toUpperCase () + w.substr (1)}). Gabung ("")} Dapat menjadi one-liner yang bagus jika tidak dimasukkan ke dalam fungsi.
Luke Channings

Akan lebih baik untuk huruf kecil seluruh string
Magico

Selain fungsi ini tidak menjawab pertanyaan, itu sebenarnya juga rumit. s => s.split(' ').map(x => x[0].toUpperCase() + x.slice(1)).join(' ')
OverCoder

48

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();
  });
};

2
Ada cara yang lebih baik untuk melakukan ini tanpa memodifikasi prototipe String.
Big McLargeHuge

2
@ davidkennedy85 Tentu! Tapi ini adalah cara sederhana, bukan cara terbaik ... ;-)
yckart

Yang Mulia ada sejuta jawaban untuk pertanyaan ini! Solusi Anda terlihat lebih bagus di es6. 'Answer'.replace(/^./, v => v.toLowerCase())
stwilz

47

Menggunakan:

var str = "ruby java";

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

Ini akan ditampilkan "Ruby java"ke konsol.


Solusi satu baris.
Ahmad Sharif

45

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"

3
Karena, versi 3.0.0 , Lo-Dash memiliki metode string ini tersedia secara default. Sama seperti yang dijelaskan dalam jawaban ini: _.capitalize("foo") === "Foo".
bardzusny

Juga ada fungsi underscore.js berguna yang disebut humanize. Ini mengubah string yang digarisbawahi, camelized, atau dasherized menjadi yang manusiawi. Juga menghapus spasi awal dan akhir, dan menghapus postfix '_id'.
Stepan Zakharov

1
Dari versi 4 *, Lodash juga huruf kecil () setiap huruf lainnya, hati-hati!
Igor Loskutov

45
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


3
Saya pikir ini adalah solusi yang buruk karena 2 alasan: Memodifikasi prototipe primitif adalah ide yang buruk. Jika spesifikasi berubah dan mereka memutuskan untuk memilih 'kapital' sebagai nama properti proto baru, Anda melanggar fungsionalitas bahasa inti. Juga, nama metode yang dipilih buruk. Pada pandangan pertama, saya akan berpikir ini akan memanfaatkan seluruh string. Menggunakan nama yang lebih deskriptif seperti PHP pertama atau sesuatu yang serupa mungkin merupakan ide yang lebih baik.
dudewad

Jawaban ES6 lainnya adalah sederhana: const capitalize = ([first,...rest]) => first.toUpperCase() + rest.join('').toLowerCase();.
Dan Dascalescu

44

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


42

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.

Perbandingan solusi


@ Hijau: ya , apakah Anda yakin Anda memilih pemilih dengan dua titik dua?
Przemek

1
Anda sebenarnya tidak ingin menggunakan tanda plus (+) sebagai metode gabungan dalam ES6. Anda akan ingin menggunakan templat literals: eslint.org/docs/rules/prefer-template
Sterling Bourne

42

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

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

Hasil:

'Foo'

1
Jawaban terbaik sejauh ini, dan poin ekstra untuk menunjukkan sintaks regex lambda. Saya terutama suka yang ini karena bisa menjadi cut-and-paste yang lancar di mana saja.
Wade Hatler

Menggunakan /^[a-z]/iakan lebih baik daripada menggunakan .karena yang sebelumnya tidak akan mencoba untuk mengganti karakter selain huruf
Code Maniac

38

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 ).


29
@Simon Tidak disebutkan bahwa string harus berupa output sebagai bagian dari dokumen HTML - CSS hanya akan berguna jika itu.
Adam Hepton

9
Adam, benar, tapi saya rasa lebih dari 95% Javascript di luar sana digunakan dengan HTML & CSS. Sayangnya, pernyataan " huruf besar " sebenarnya menggunakan huruf besar untuk setiap kata , jadi Anda masih perlu JS untuk menggunakan huruf besar hanya untuk huruf pertama dari string.
Simon East

18
Salah, Dinesh. Dia mengatakan karakter pertama dari string .
Simon East

81
Jawaban ini, meskipun memiliki jumlah upvotes yang konyol, adalah salah, karena akan menggunakan huruf kapital untuk huruf pertama dari setiap kata. @Ryan, Anda akan mendapatkan lencana disiplin jika Anda menghapusnya. Tolong lakukan itu.
Dan Dascalescu

10
Setuju dengan @DanDascalescu - Jawaban Ryan benar-benar salah.
Timo

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

38

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.


2
Jawaban ini perlu dipindahkan ke depan.
Rúnar Berg

Terima kasih @ RúnarBerg - karena komentar Anda mengingatkan saya tentang ini, saya membacanya lagi dan menyadari bahwa saya telah meninggalkan kasus terakhir dan solusi yang layak disebut. Juga mencoba memperjelas beberapa terminologi dengan lebih baik.
Titik koma

Jawaban yang bagus .....
Ben Aston

Jawaban ini sangat bagus, saya berharap saya bisa lebih meningkatkannya.
David Barker

37

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'

36

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

Mungkin perlu dicatat bahwa ini juga akan mengubah hal-hal seperti akronim menjadi huruf kecil, jadi mungkin bukan ide terbaik dalam kebanyakan kasus
monokrom

Juga, apakah GAMITG benar - benar melakukan pengeditan hanya untuk menghapus sepotong spasi putih dari bagian non-kode pos? O_O
monokrome

btw, ini akan memecah akronim huruf besar jadi hati-hati kalian semua <3
monokrome

34
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'

Selesai @Ram. Juga termasuk contoh.
Fredrik A.

Bagaimana ini lebih baik daripada jawaban 2009 ?
Dan Dascalescu

1
Itu bukan @DanDascalescu. Saya kira Anda bisa berpendapat bahwa substr/ substringsedikit lebih semantik sebagai lawan slice, tapi itu hanya masalah preferensi. Namun saya memasukkan contoh-contoh dengan string yang disediakan dalam pertanyaan, yang merupakan sentuhan yang bagus tidak ada dalam contoh '09. Jujur saya pikir itu bermuara pada 15 tahun saya menginginkan karma di StackOverflow;)
Fredrik A.

34

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.


4
Gunakan String.substring () atau String.slice () ... Jangan gunakan substr () - itu sudah usang.
James

7
@ 999: di mana katanya substr()usang? Bukan , bahkan sekarang, tiga tahun kemudian, apalagi di tahun 2009 ketika Anda membuat komentar ini.
Dan Dascalescu

substr()mungkin tidak ditandai sebagai ditinggalkan oleh implementasi ECMAScript populer (saya ragu itu tidak akan hilang dalam waktu dekat), tetapi itu bukan bagian dari spesifikasi ECMAScript. Edisi ke 3 dari spesifikasi menyebutkannya dalam lampiran non-normatif untuk "menyarankan semantik seragam untuk properti seperti itu tanpa menjadikan properti atau semantik mereka bagian dari standar ini".
Peter Rust

2
Memiliki 3 metode yang melakukan hal yang sama ( substring, substrdan slice) terlalu banyak, IMO. Saya selalu menggunakan slicekarena mendukung indeks negatif, tidak memiliki perilaku bertukar argumen yang membingungkan dan APInya mirip dengan slicebahasa lain.
Peter Rust

29
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


20
Ekspresi reguler berlebihan untuk ini.
Anthony Sottile

+1, ini yang benar-benar saya cari. Namun ada bug minor, seharusnya return.this.toLocaleLowerCase().replace(...
tomdemuyt

+1, saya menemukan halaman ini mencari versi javascript dari phps ucfirst, yang saya duga adalah bagaimana kebanyakan orang menemukannya.
Benubird

@DanDascalescu Saya menemukan ini berguna, jadi utilitarianisme +1, dan -1 anal-retentiveness. Dia mencantumkan contoh, jadi fungsinya jelas.
Travis Webb

String.prototype.capitalize = function(){ return this.replace( /(^|\s)[a-z]/g , function(m){ return m.toUpperCase(); }); }; Saya sedikit memperbaiki kode Anda, Anda hanya perlu kecocokan pertama.
IGRACH

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

21

Lihat solusi ini:

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

3
Ini harus menjadi jawaban yang diterima. Solusi utama tidak harus menggunakan kerangka kerja seperti garis bawah.
Adam McArthur

3
Simpan beberapa penekanan tombol;)stringVal.replace(/^./, stringVal[0].toUpperCase());
Alfredo Delgado

1
Regex tidak boleh digunakan di tempat yang tidak perlu. Ini sangat tidak efisien dan tidak membuat kode lebih ringkas. Selain itu, stringVal[0]akan undefinedkosong stringVal, dan dengan demikian upaya untuk mengakses properti .toUpperCase()akan membuat kesalahan.
Przemek

20
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.)


5
Meskipun ini memiliki beberapa suara, ini adalah solusi paling lambat yang diposting di sini. Saya telah mengumpulkan sedikit tes cepat dengan jawaban paling populer dari pos ini, di sini: forwebonly.com/...
Robin van Baalen

@RobinvanBaalen Tautan Anda sekarang rusak. Punya yang diperbarui?
Brad

1
Regexp berlebihan untuk ini, lebih suka yang lebih sederhana: str.charAt (0) .toUpperCase () + str.slice (1)
Simon

@Brad sayangnya tidak
Robin van Baalen

Sering kali, jika Anda ingin menyelesaikan masalah Anda dengan regex, Anda berakhir dengan dua masalah.
Przemek

19

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.


2
nama yang bagus untuk fungsinya! Namanya identik dengan padanan PHP. Sebenarnya ada seluruh perpustakaan fungsi PHP yang ditulis dalam JS; itu disebut PHP.js dan dapat ditemukan di http://phpjs.org
Hussam

11
Satu liner:string[0].toUpperCase() + string.substring(1)
dr.dimitru

@ TarranJones di sini adalah antipeluru satu liner:(string[0] || '').toUpperCase() + string.substring(1)
dr.dimitru

@ dr.dimitru: Alih-alih idiomatis (string[0] || '')Anda bisa saja string.charAt(0).
Przemek


17
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.


1
Ini harus menjadi jawaban yang diterima, bukan itu yang terakhir karena SO terus memberikan pertanyaan yang sudah ketinggalan zaman. Btw, lebih baik menggunakan /./karena dua alasan: /\w/akan melewatkan semua karakter yang bukan huruf sebelumnya (jadi @@ abc akan menjadi @@ Abc), dan kemudian tidak berfungsi dengan karakter bukan-latin
Cristian Traìna
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.