Bir dize harfinin ilk harfini JavaScript'te nasıl yapabilirim?

Bir dize büyük harfinin ilk harfini nasıl yapabilirim, ancak diğer harflerin büyüklüğünü nasıl değiştirmem?

Örneğin:

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

Temel çözüm:

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

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

Diğer bazı cevaplar değişir String.prototype(bu cevap da kullanılmış), ancak şimdi sürdürülebilirlik (işlevin nereye eklendiğini bulmak zor prototypeve diğer kod aynı adı / tarayıcıyı kullanıyorsa çakışmalara neden olabilir) gelecekte aynı ada sahip bir yerel işlev ekler).

... ve sonra, uluslararasılaşmayı düşündüğünüzde, bu şaşırtıcı derecede iyi cevabın (aşağıda gömülü) gösterdiği gibi, bu soruda çok daha fazlası var .

Kod birimleri yerine Unicode kod noktalarıyla çalışmak istiyorsanız (örneğin, Temel Çok Dilli Düzlem'in dışındaki Unicode karakterleri işlemek için) String#[@iterator]kod noktalarıyla çalışan gerçeği kaldırabilir ve toLocaleUpperCaseyerel ayarlara uygun üst yayın almak için kullanabilirsiniz :

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

Daha fazla uluslararasılaştırma seçeneği için lütfen aşağıdaki orijinal yanıta bakın .

İşte daha nesne yönelimli bir yaklaşım:

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

İşlevi şöyle çağırırsınız:

"hello world".capitalize();

Beklenen çıktı ile:

"Hello world" 

CSS'de:

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

Dizeyi bir dizi olarak ele alarak ilk harfi alan popüler yanıtın kısaltılmış bir sürümü:

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

Güncelleme:

Aşağıdaki yorumlara göre bu IE 7 veya daha düşük sürümlerde çalışmaz.

Güncelleme 2:

undefinedBoş dizelerden kaçınmak için (aşağıdaki @ njzk2'nin açıklamasına bakın ), boş bir dize olup olmadığını kontrol edebilirsiniz:

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

Gönderilen birkaç farklı yöntemin performansıyla ilgileniyorsanız:

İşte bu jsperf testine dayanan en hızlı yöntemler (en hızlıdan en yavaşına sıralanmıştır).

Gördüğünüz gibi, ilk iki yöntem performans açısından temelde karşılaştırılabilirken, bunu değiştirmek performans açısından String.prototypeçok yavaştır.

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

Başka bir durumda, ilk harfi büyük harfle yazıp geri kalanını küçük harfle yazmam gerekiyor. Aşağıdaki durumlar bu işlevi değiştirmemi sağladı:

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

Bu 2018 ECMAScript 6+ Çözümü :

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

Zaten kullanıyorsanız (veya düşünüyorsanız) lodash, çözüm kolaydır:

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

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

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

Dokümanlarına bakın: 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'

İlk büyük harf için vanilya js:

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

Bir dizedeki tüm kelimelerin ilk harfini büyük yaz:

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

İlk karakteri favorilerimden biriyle alabilirdik, RegExpsevimli bir surat gibi görünüyor:/^./

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

Ve tüm kahve bağımlıları için:

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

... yerel prototipleri genişletmeden bunu yapmanın daha iyi bir yolu olduğunu düşünen tüm erkekler için:

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

kullanın:

var str = "ruby java";

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

Bu çıktıyı olacak "Ruby java"konsola.

Eğer kullanırsanız underscore.js veya Lo-Dash , underscore.string kütüphane yararlanmak dahil dize uzantıları sağlar:

_.capitalize (string) Dizenin ilk harfini büyük harfe dönüştürür.

Misal:

_.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
}

Ve sonra:

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

Kasım 2016 (ES6) güncellemesi, sadece EĞLENCE için:

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

sonra capitalize("hello") // Hello

EN KISA 3 çözümler, 1 ve 2 sap durumlarda zaman sdizedir "", nullve 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()) );

Yalnızca CSS

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

• Çağrılmasına rağmen ::first-letter, ilk karakter için geçerlidir , yani dize durumunda %a, bu seçici büyük harfle uygulanır %ve abüyük harfle yazılmaz.
• IE9 + veya IE5.5 + 'da eski gösterimlerde yalnızca bir iki nokta üst üste ( :first-letter) ile desteklenir .

ES2015 tek astarlı

Çok sayıda cevap olduğundan, ancak ES2015'te orijinal sorunu etkili bir şekilde çözecek hiçbiri olmadığından, aşağıdakileri buldum:

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

Uyarılar

• parameters => functionok işlevi denir .
• Bunun capitalizeFirstCharyerine isimle gittim capitalizeFirstLetter, çünkü OP tüm dizgideki ilk harfi büyük harfle kodlayan kod istemedi, ancak ilk karakter (elbette mektup ise).
• constcapitalizeFirstCharbir programcı olarak her zaman niyetlerinizi açıkça belirtmeniz gerektiğinden , bize sürekli olarak beyan etme yeteneği verir .
• Yaptığım karşılaştırmada string.charAt(0)ve arasında anlamlı bir fark yoktu string[0]. Bununla birlikte, bunun boş dize için string[0]olacağını unutmayın, bu undefinedyüzden string && string[0]alternatifle karşılaştırıldığında çok ayrıntılı bir şekilde yeniden yazılmalıdır .
• string.substring(1)daha hızlıdır string.slice(1).

Karşılaştırma

• Bu çözelti için 4.956.962 ops / s ±% 3.03,
• En çok oy alan cevap için 4,577,946 ops / s ±% 1,2.
• Google Chrome 57'de JSBench.me ile oluşturulmuştur .

Değiştirerek uygulamanın çok basit bir yolu var . ECMAScript 6 için:

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

Sonuç:

'Foo'

CSS'de daha kolay görünüyor:

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

Bu, CSS metin dönüştürme özelliğinden ( W3Schools'ta ).

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

Astral uçak kodu puanlarıyla ilgili mevcut cevaplarda hiç bir şey görmedim veya uluslararasılaşma . “Büyük harf”, belirli bir komut dosyası kullanarak her dilde aynı anlama gelmez.

Başlangıçta astral uçak kod noktaları ile ilgili sorunları ele alan herhangi bir cevap görmedim. Bir tane var , ama biraz gömülü (sanki böyle olacak, sanırım!)

Önerilen işlevlerin çoğu şöyle görünür:

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

Bununla birlikte, bazı kasalı karakterler BMP'nin dışında kalır (temel çok dilli düzlem, kod noktaları U + 0 ila U + FFFF). Örneğin şu Deseret metnini alın:

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

Dizelerin dizi dizinli özellikleri “karakterlere” veya kod noktalarına * erişmediği için buradaki ilk karakter büyük harfle yazılmaz. UTF-16 kod birimlerine erişirler. Bu, dilimleme sırasında da geçerlidir - dizin değerleri kod birimlerini gösterir.

UTF-16 kod birimleri, U + 0 ila U + D7FF ve U + E000 ila U + FFFF dahil olmak üzere iki aralıkta USV kod noktalarına sahip 1: 1'dir. Çoğu kasalı karakter bu iki aralığa girer, ancak hepsi değil.

ES2015'ten itibaren bununla başa çıkmak biraz daha kolay oldu. String.prototype[@@iterator]kod noktalarına karşılık gelen dizeler verir **. Örneğin, bunu yapabiliriz:

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

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

Daha uzun teller için, bu muhtemelen çok verimli değildir *** - gerisini gerçekten yinelememiz gerekmez. String.prototype.codePointAtİlk (olası) mektuba ulaşmak için kullanabiliriz , ancak dilimin nereden başlaması gerektiğini hala belirlememiz gerekir. Kalanı yinelemekten kaçınmanın bir yolu, ilk kod noktasının BMP dışında olup olmadığını test etmek olacaktır; değilse, dilim 1'den başlar ve öyleyse dilim 2'den başlar.

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

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

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

Bunun yerine bitsel matematiği kullanabilirsiniz > 0xFFFF, ancak muhtemelen bu şekilde anlamak daha kolaydır ve her ikisi de aynı şeyi başarır.

Gerekirse bu mantığı biraz daha ileri götürerek bu çalışmayı ES5 ve aşağısında da yapabiliriz. ES5'te kod noktalarıyla çalışmak için gerçek bir yöntem yoktur, bu nedenle ilk kod biriminin bir vekil olup olmadığını manuel olarak test etmeliyiz ****:

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("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

Başlangıçta uluslararasılaşma hususlarından da bahsettim. Bunların bazılarını açıklamak çok zordur, çünkü sadece hangi dilin kullanıldığına dair bilgiye ihtiyaç duymazlar, aynı zamanda dildeki kelimelerin spesifik bilgisini de gerektirebilirler. Örneğin, İrlandalı "mb" digrafisi bir kelimenin başında "mB" olarak büyük harf kullanır. Başka bir örnek, Alman eszett, asla bir kelime (afaik) başlatmaz, ancak yine de sorunu göstermeye yardımcı olur. Küçük eszett (“ß”) “SS” olarak büyük harfle yazılır, ancak “SS”, “ß” veya “ss” ile küçük harfle ifade edilebilir - hangisinin doğru olduğunu bilmek için Almanca dışında bant dışı bilgi sahibi olmanız gerekir!

Bu tür sorunların en ünlü örneği, muhtemelen Türkçedir. Türkçe Latince'de, i'nin büyük şekli İ, i'nin küçük harfi ise - iki farklı harftir. Neyse ki bunu hesaba katmanın bir yolu var:

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

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

Bir tarayıcıda, kullanıcının en çok tercih ettiği dil etiketi ile gösterilir navigator.language, tercih sırasına göre bir liste bulunur navigator.languagesve belirli bir DOM öğesinin dili (genellikle) Object(element.closest('[lang]')).lang || YOUR_DEFAULT_HEREçok dilli belgelerde elde edilebilir .

Reg20p'de ES2018'de tanıtılan Unicode özellik karakter sınıflarını destekleyen aracılarda, ilgilendiğimiz karakterleri doğrudan ifade ederek işleri daha da temizleyebiliriz:

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

Bu, bir dizede birden çok kelimeyi büyük harflerle oldukça iyi bir doğrulukla ele almak için biraz değiştirilebilir. CWUYa Changes_When_Uppercased karakter özelliği, iyi, değişim Büyük harfli tüm kod noktalarını eşleşir. Bunu Flemenkçe ij gibi başlıklı digraph karakterleriyle deneyebiliriz , örneğin:

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

Yazma sırasında (Şubat 2020), Firefox / Spidermonkey henüz son iki yılda tanıtılan RegExp özelliklerinden hiçbirini uygulamadı *****. Bu özelliğin mevcut durumunu Kangax uyumlu tablodan kontrol edebilirsiniz . Babel, RegExp değişmez değerlerini bunlar olmadan eşdeğer kalıplara özellik başvurularıyla derleyebilir, ancak ortaya çıkan kodun çok büyük olabileceğini unutmayın.

Büyük olasılıkla, bu soruyu soran insanlar Deseret kapitalizasyonu veya uluslararasılaşmasıyla ilgilenmeyecektir. Ancak bu sorunların farkında olmak iyidir, çünkü şu anda endişe olmasalar bile, sonunda karşılaşma şansınız yüksektir. Onlar “uç” vakalar değiller, daha doğrusu, tanım gereği uç vakalar değiller - zaten çoğu insanın Türkçe konuştuğu ve kod noktalarıyla kod birimlerini karıştırmanın oldukça yaygın bir hata kaynağı olduğu bir ülke var (özellikle emoji ile ilgili). Hem teller hem de dil oldukça karmaşık!

* UTF-16 / UCS2'nin kod birimleri de Unicode kod noktalarıdır, örneğin U + D800 teknik olarak bir kod noktasıdır, ancak burada "ne demek" değildir ... bulanık. Suretler kesinlikle değildir, USV'lerdir (Unicode skaler değerleri).

** Bir vekil kod birimi “yetim” ise - yani mantıklı bir çiftin parçası olmasa da - burada da vekil alabilirsiniz.

*** olabilir. Test etmedim. Büyük harf kullanımını anlamlı bir darboğaz olarak belirlemediyseniz, muhtemelen terlemezdim - en net ve okunabilir olduğuna inandığınız her şeyi seçin.

**** böyle bir işlev, ilk birimin yetim bir vekil olması mümkün olduğundan, sadece birincisi yerine hem birinci hem de ikinci kod birimlerini test etmek isteyebilir. Örneğin "\ uD800x" girdisi, X'i olduğu gibi büyük harflerle yazılır ve bu beklenen veya beklenmeyebilir.

***** İşte ilerlemeyi daha doğrudan takip etmek istiyorsanız Bugzilla sorunu .

Bu tür şeyleri önce CSS kullanarak ele almak her zaman daha iyidir , genel olarak, CSS kullanarak bir şey çözebilirseniz, önce bunu yapın, sonra sorunlarınızı çözmek için JavaScript'i deneyin, bu durumda :first-letterCSS'de kullanmayı deneyin ve uygulayıntext-transform:capitalize;

Bunun için bir sınıf oluşturmayı deneyin, böylece onu global olarak kullanabilirsiniz, örneğin: .first-letter-uppercaseve CSS'nize aşağıdaki gibi bir şey ekleyin:

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

Ayrıca alternatif seçenek JavaScript'tir, bu yüzden en iyisi böyle bir şey olacaktır:

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

ve şöyle deyin:

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'

Tekrar tekrar kullanmak isterseniz, javascript native String'e eklemeniz daha iyidir, bu yüzden aşağıdaki gibi bir şey:

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

ve aşağıdaki gibi arayın:

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

Tümü büyük harf olan metni yeniden biçimlendirmek istiyorsanız, diğer örnekleri aşağıdaki gibi değiştirmek isteyebilirsiniz:

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

Bu, aşağıdaki metnin değiştirilmesini sağlayacaktır:

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'

İşte ucfirst () adlı bir işlev ( "büyük harf ilk harfi" kısaltması):

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

Bir dizeyi ucfirst ("bazı dize") çağırarak büyük harflerle yazabilirsiniz - örneğin,

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

Dizeyi iki parçaya bölerek çalışır. İlk satırda firstLetter öğesini çıkarır ve sonra ikinci satırda firstLetter öğesini firstLetter.toUpperCase () öğesini çağırarak büyük harfle yazır ve str.substr (1) öğesini çağırarak bulunan dizenin geri kalanıyla birleştirir .

Bunun boş bir dize için başarısız olacağını düşünebilirsiniz ve gerçekten de C gibi bir dilde bunun için yiyecek ve içecek sağlamak zorunda kalacaksınız. Ancak JavaScript'te, boş bir dizenin alt dizesini aldığınızda, boş bir dize alırsınız.

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

Kullanımı:

capitalizedString = someString.capitalize();

Bu bir metin dizesidir => Bu Bir Metin Dizesidir

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

Bu çözümü inceleyin:

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

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

(Sık sık kullanırsanız, onu bir işleve kapsülleyebilir veya hatta String prototipine ekleyebilirsiniz.)

Bu şekilde ucfirstyaparsanız işlev çalışır.

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

Bildirim için teşekkürler JP.

Bunu böyle bir satırda yapabilirsiniz

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

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

Bu ok işlevini en kolay buldum. Değiştir\w , dizenizin ilk harf karakteri ( ) ile eşleşir ve büyük harfe dönüştürür. Hiçbir meraklısı gerekli.