Soru JavaScript'te bir büyük harfin ilk harfini nasıl yaparım?


Bir dizenin ilk harfini nasıl büyük harfle yazabilirim, ancak diğer harflerin herhangi birinin durumunu değiştiremez miyim?

Örneğin:

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

2969
2018-06-22 08:25


Menşei


Vurgulamak adlı bir eklenti var underscore.string Bu ve diğer büyük araçlar bir demet içerir. - Aaron
ne dersin: return str.replace(/(\b\w)/gi,function(m){return m.toUpperCase();}); - Muhammad Umer
Daha basit: string[0].toUpperCase() + string.substring(1) - dr.dimitru
Büyük harfle yazılan cevapların 3 sayfası - Andrew
lütfen birisi bana bu sorunun neden bu kadar popüler olduğunu söylüyor !!! anlamadığım bir şey var mı? Buna cevap vermek için 4K oyu? sadece neden? - Nozar Safari


Cevaplar:


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

Bazı diğer cevaplar değiştirildi String.prototype (Bu cevap da aynı şekilde kullanılır), ancak şu an devam etmekteyim çünkü bakımın sürdürebilirliği (fonksiyonun nereye eklendiğini bulmak zor prototype ve diğer kod aynı adı kullanıyorsa çakışmalara neden olabilir / bir tarayıcı, gelecekte aynı ada sahip bir yerel işlev ekler).


4736
2018-06-22 08:30



substring substr'den daha fazla tarayıcıda anlaşılır - mplungjan
karim79'a eklemek için - büyük olasılıkla javascript olarak bir işlev yapmak için overkill işlev sarma olmadan değişkene aynı şeyi yapacaktır. Bir işlev kullanarak daha açık olacağını varsayalım, ama doğal olarak, neden bir işlev sarıcı ile neden karmaşık? - Ross
Boşver...""[0].toUpperCase() başarısız - Crisfole
Dilimi (1) de büyütmemize gerek yok mu? - hasen
Hayır, çünkü OP bu örneği verdi: the Eiffel Tower -> The Eiffel Tower. Artı, işlev çağrılır capitaliseFirstLetter değil capitaliseFirstLetterAndLowerCaseAllTheOthers. - ban-geoengineering


Daha fazla nesne yönelimli bir yaklaşım:

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

Ve sonra:

"hello world".capitalize();  =>  "Hello world" 

1196
2017-07-20 15:51



Bu çözümü beğeniyorum çünkü Ruby gibi ve Ruby de tatlıdır! :) Dizenin diğer tüm harflerini küçük harflerle kesiyorum, böylece Ruby gibi çalışır. return this.charAt(0).toUpperCase() + this.substring(1).toLowerCase(); - ma11hew28
Bu prototype.js dünyasında, yerel nesneleri değiştirmek veya genişletmek önerilmemektedir. - Ryan
@rxgx - "Uzatmayın" boogeyman şimdi ölmeye başlıyor (Tanrıya şükür) ve insanlar kafalarını jSand'dan çekiyor ve sadece bir dil özelliği olduğunu anlıyorlar. Prototype.js kısa bir süre için Object'in kendisini genişlettiği için, Natives'ın kötü olması anlamına gelmez. Bilinmeyen bir tüketici için kod yazıyorsanız (rastgele sitelere giden bir analitik komut dosyası gibi), ancak bunun dışında bir şey yazmamalısınız. - csuwldcat
@csuwldcat Kullandığınız başka bir kütüphane, sizin bilmeden kendi sermayesini eklerse ne olur? Prototype.js'nin yapıp yapmadığına bakılmaksızın, prototipleri genişletmek kötü bir biçimdir. ES6 ile, intrinsikler kekinizi almanıza ve yemek yemenize izin verir. Bence ECMASCRIPT spekülatörüne uyan şimşek yaratan insanlar için “boogeyman” ı ölüyor olabilirsiniz. Bu pervazlar gayet iyi. Çünkü bir shim ekleyen başka bir kütüphane bunu aynı şekilde uyguluyordu. Bununla birlikte, kendi spesifik olmayan intrinsiklerinizi eklemekten kaçınılmalıdır. - Justin Meyer
Yerlileri uzatma son derece kötü bir uygulamadır. “Ah, bu kodu başka bir şeyle asla kullanamayacağımı” söylemiş olsanız bile, muhtemelen (ya da başka biri) olacaktır. Daha sonra, bazı garip matematik hatalarını çözmeye çalışırken üç gün harcayacaklar çünkü birisi, diğer kütüphanenizden biraz daha farklı bir parayla ilgilenmek için Number.money () öğesini genişletti. Cidden, bunun büyük bir şirkette olduğunu gördüm ve yerlilerin prototipleri ile uğraşan bir kütüphaneyi anlamak için kimsenin hata ayıklamalarına değmez. - phreakhead


CSS’de:

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

408
2017-07-17 14:06



OP bir JS çözümü istiyor. - Antonio Max
$ ( '# Mystring_id') Metin (string) .css ( 'büyük harfle', 'text-transform.'); - DonMB
Ayrıca, bu sadece dizgenin görüntüsünü etkiler - gerçek değer değil. Bir formdaysa, ör., Değer yine de olduğu gibi gönderilir. - dmansfield
Bu soruya cevap değil!!! Bu bir JS sorusu için bir CSS çözümüdür. Downvote. SO, doğru cevaplarla ilgilidir, çünkü "bir çözüm" bulmanın "doğru çözümü" yapmadığını ve bunun da işaretin dışında kaldığını. - dudewad
Bu, DOM / CSS oluşturmayan (Node.js gibi) javascript içeriklerinde çalışmayacaktır. Gerçekten "ilk javascript dizgisini değiştirilmemişken bir web tarayıcısında büyük harfmiş gibi ilk harfi nasıl sunabilirim?" Sorusunu yanıtlıyor. - jinglesthula


İşte, diziyi bir dizi olarak ele alarak ilk harfi alan popüler cevabın kısaltılmış hali:

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

Güncelleştirme:

Aşağıdaki yorumlara göre IE 7 veya altında çalışmıyor.

Güncelleme 2:

Kaçınmak undefined boş dizeler için (bkz. @ njzk2'nin yorumu aşağıda), boş bir dizeyi kontrol edebilirsiniz:

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

235
2017-08-28 23:03



Bu, tarayıcılar dizgi indekslemeyi desteklemediğinden IE <8'de çalışmayacaktır. IE8'in kendisi destekliyor, ancak sadece dize değişmezleri için - string nesneleri için değil. - Mathias Bynens
Rakamlar IE ağlayacaktı ... - joelvh
kimin umurunda, IE7 pazarı% 5'ten az! ve bunlar muhtemelen senin gremma'nın ve grempa'nın eski makinesidir. Kısa kod FTW diyorum! - vsync
@vsync sizin gremma ve grempa sitemde harcamaya istekli çok parası olabilir ... - joshuahedlund
@vsync Ben sadece kullanıcı demografisine bağlı olarak, bazen (biz daha az ve daha az ve biz 2014 ve ötesine geçtikçe daha az) IE7 gibi eski tarayıcıları desteklemek için karlı olduğu anlamına geliyordu ... - joshuahedlund


Yayınlanan birkaç farklı yöntemin performansıyla ilgileniyorsanız:

İşte en hızlı yöntemler bu jsperf testi (En hızlıdan en yavaşına kadar sipariş edilir).

Gördüğünüz gibi, ilk iki yöntem performans açısından esasen karşılaştırılabilirken, String.prototype performans açısından en yavaş olanıdı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);
}

enter image description here


135
2017-11-14 03:26



Başlatma kodu da şu farkı yaratmıyor gibi görünüyor: jsperf.com/capitalize-first-letter-of-string/2 - user420667
Prototipi genişletmemek için bir sebep daha. - cchamberlain
O_o ... Neden prototip ile çok kötü? - mvlabat
De not, o değiştirerek .slice(1) ile .substr(1) performansı daha da artıracaktır. - Przemek


Başka bir vaka için, ilk harfi büyük harfle yazıp geri kalanını küçültmek için ona ihtiyacım var. Aşağıdaki durumlarda bu işlevi değiştirdim:

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

129
2017-07-19 18:17



"... ama diğer harflerin herhangi birinin durumunu değiştirmez". Bu OP'nin sorduğu soruya doğru bir cevap değildir. - Carlos Muñoz
@ CarlosMuñoz açılış cümlesini okursanız bunun farklı bir durum olduğunu söylüyor. - TMH
@TomHart İşte bu yüzden bu sorunun çözümü için bir çözüm değil. Bir yorum ya da başka bir soru ve cevap olmalı - Carlos Muñoz
Seninle aynı fikirdeyim, ama bu cevabın ne yaptığını öğrenmek için burada biten birçok insan görebiliyorum. - TMH


İşte en iyi çözümler:

İlk çözüm CSS’de:

p {
  text-transform: capitalize;
}

İkinci çözüm :

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

Bunu da ekleyebilirsiniz String.prototype böylece diğer yöntemlerle zincirleme yapabilirsiniz:

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

ve bunu şöyle kullanın:

'string'.capitalizeFirstLetter() // String

Üçüncü çözüm:

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).toLowerCase();
    }
    return pieces.join(" ");
}

107
2018-02-16 05:30



buldum string.replace(string[0], string[0].toUpperCase()); çok daha kolay olmak - Gcap
Sadece bir başlık - CSS çözümü ile büyük harfle yazılmış olan karakter, metni seçerken Ubuntu'da (muhtemelen diğer tarayıcılarda da) görsel olarak seçilemez. Yine de Ctrl + C tuşlarına basarsanız seçilmiş olur ve metin kopyalanır. - Andris
İkinci çözüm, siz yazdıkça, dizenin kalanını küçük harf yapar. Bunu kaldırmak, orijinal talebe daha yakın olacaktır. ("Eyfel Kulesi" büyük harf kullanımını E ve T'de tutar) - Ward D.S.
1) iki kolon notasyonu kullanın ::first-letter Bu varyantlar söz konusu kolonlar söz konusu olduğunda CSS3 felsefesi ile uyumlu olduğu için, 2) .substring(…) ziyade .slice(…) Daha iyi bir performansa sahip olduğundan, 3) OP diğer tüm karakterleri küçültmek istemedi, 4) Sahip olmadığınız nesnelerin prototipini değiştirmeyin - Przemek
Diğer harfleri küçültüyorsun, bu cevap olduğu yanlış. - fpg1503


var string = "hello world";
string = string.charAt(0).toUpperCase() + string.slice(1);
alert(string);

62
2017-07-17 06:23





Bir dizedeki tüm kelimelerin ilk harfini büyük harfle 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(" ");
}

58
2017-11-30 17:16



Yeniden okuma sorusu: Bir dizenin ilk karakterini kullanmak istiyorum. ancak diğer harflerin herhangi birinin durumunu değiştirmeyin. - JimmyPena
Yaptığımı biliyorum. Tüm dizgenin büyük harfle başlaması durumunda bir şey eklerim: parçalar [i] = j + parçalar [i] .substr (1) .toLowerCase (); - Malovich
Bu durumda başka bir çözüm: function capitaliseFirstLetters (s) {return s.split ("") .map (işlev (w) {return w.charAt (0) .toUpperCase () + w.substr (1)}). ("")} Bir işleve dahil edilmezse güzel bir tek katlı olabilir. - Luke Channings
İlk önce tüm dizgeyi küçültmek daha iyi olurdu - Magico
Bu işlevden başka, soruyu cevaplamayan, aslında aşırı derecede karmaşıktır. s => s.split(' ').map(x => x[0].toUpperCase() + x.slice(1)).join(' ') - OverCoder


İlk karakteri favorimden biriyle alabiliriz RegExpsevimli bir suratına benziyor: /^./

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

... ve bunu yapmanın daha iyi bir yolu olduğunu düşünen tüm kişiler için, doğal prototipleri genişletmeden:

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

44
2018-02-15 06:55



String prototipini değiştirmeden bunu yapmanın daha iyi bir yolu var. - David Kennedy
@ davidkennedy85 Elbette! Ama bu basit bir yol değil, en iyi yol ... ;-) - yckart