Pytanie Jak utworzyć pierwszą literę wielkiej litery w JavaScript?


Jak utworzyć pierwszą literę wielkiej litery, ale nie zmienić przypadku żadnej z pozostałych liter?

Na przykład:

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

2969
2018-06-22 08:25


pochodzenie


Podkreślać ma wtyczkę o nazwie underscore.string obejmuje to i kilka innych świetnych narzędzi. - Aaron
co powiesz na: return str.replace(/(\b\w)/gi,function(m){return m.toUpperCase();}); - Muhammad Umer
Prostsze: string[0].toUpperCase() + string.substring(1) - dr.dimitru
3 strony odpowiedzi na pisanie wielkimi literami - Andrew
proszę, powiedz mi, dlaczego to pytanie jest tak popularne !!! czy jest coś czego nie rozumiem? 4K głosować na odpowiedź to? tylko dlaczego? - Nozar Safari


Odpowiedzi:


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

Niektóre inne odpowiedzi modyfikują String.prototype (ta odpowiedź również się przydała), ale odradzam to teraz ze względu na łatwość konserwacji (trudno jest ustalić, gdzie funkcja jest dodawana do prototype i może powodować konflikty, jeśli inny kod używa tej samej nazwy / przeglądarki dodaje w przyszłości natywną funkcję o tej samej nazwie).


4736
2018-06-22 08:30



Podciąg jest rozumiany w większej liczbie przeglądarek niż substr - mplungjan
dodać do karim79 - prawdopodobnie jest to przesada, aby była funkcją, ponieważ javascript zrobi to samo ze zmienną bez zawijania funkcji. Przypuszczam, że byłoby bardziej jasne, używając funkcji, ale jej natywna w przeciwnym razie, dlaczego komplikuje ją z wrapper funkcji? - Ross
Nieważne...""[0].toUpperCase() zawiedzie - Crisfole
Czy nie powinniśmy również, aby obniżyć wartość kawałka (1)? - hasen
Nie, ponieważ OP dał ten przykład: the Eiffel Tower -> The Eiffel Tower. Dodatkowo funkcja jest wywoływana capitaliseFirstLetter nie capitaliseFirstLetterAndLowerCaseAllTheOthers. - ban-geoengineering


Bardziej obiektowe podejście:

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

I wtedy:

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

1196
2017-07-20 15:51



Podoba mi się to rozwiązanie, ponieważ jest jak Ruby, a Ruby jest słodka! :) Zamieniam małe litery na wszystkie pozostałe litery ciągu, aby działał dokładnie tak samo jak Ruby: return this.charAt(0).toUpperCase() + this.substring(1).toLowerCase(); - ma11hew28
W tym świecie post-prototype.js nie zaleca się zmiany ani rozszerzenia natywnych obiektów. - Ryan
@rxgx - Boogeyman "nie rozszerzaj" zaczyna teraz wymierać (dzięki Bogu), a ludzie wyciągają głowy z jSand i zdają sobie sprawę, że to tylko funkcja językowa. Tylko dlatego, że Prototype.js przedłużył sam obiekt przez krótki czas, nie oznacza to, że rozszerzenie rodziny jest złe. Nie powinieneś tego robić, jeśli piszesz kod dla nieznanego klienta (jak skrypt analityczny, który trafia na losowe strony), ale poza tym jest w porządku. - csuwldcat
@ csuwldcat Co, jeśli inna biblioteka, z której korzystasz, dodaje swoją własną wielką literę bez twojej wiedzy? Wydłużanie prototypów jest złe, niezależnie od tego, czy Prototype.js to zrobił, czy nie. Dzięki ES6, samoistnie pozwoli ci na zjedzenie ciasta i zjedzenie go. Myślę, że możesz pomylić "boogeyman" wymierając dla ludzi tworzących podkładki, które są zgodne ze specyfikacją ECMASCRIPT. Te podkładki są idealnie cienkie, ponieważ inna biblioteka, która dodała podkładkę, mogłaby zaimplementować ją w ten sam sposób. Jednak należy unikać dodawania własnych nietypowych elementów wewnętrznych. - Justin Meyer
Przedłużanie tubylców jest NIEZWYKLE złą praktyką. Nawet jeśli powiesz "oh, nigdy nie użyję tego kodu z niczym innym", prawdopodobnie ty (lub ktoś inny) to zrobisz. Następnie spędzą trzy dni próbując wymyślić jakiś dziwny błąd matematyczny, ponieważ ktoś rozszerzył Number.money (), aby poradzić sobie z walutą nieco inną niż twoja inna biblioteka. Poważnie, widziałem, jak to się dzieje w dużej firmie i nie warto nikomu debugować, aby znaleźć bibliotekę, która popsuła prototypy tubylców. - phreakhead


W CSS:

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

408
2017-07-17 14:06



OP prosi o rozwiązanie JS. - Antonio Max
$ ('# mystring_id') .tekst (string) .css ('text-transform', 'capitalize'); - DonMB
Dodatkowo wpływa to tylko na wyświetlanie ciągu znaków, a nie rzeczywistą wartość. Jeśli jest w formie, np. Wartość będzie nadal przesyłana w niezmienionej postaci. - dmansfield
To jest nie jest odpowiedzią na pytanie!!! To jest rozwiązanie CSS do pytania JS. Downvote. SO dotyczy dokładnych odpowiedzi, tylko dlatego, że znalazłeś "rozwiązanie", nie oznacza to, że jest to "właściwe rozwiązanie", a to jest niecelowe. - dudewad
To nie zadziała w kontekstach javascript, które nie mają renderowania DOM / CSS (np. Node.js). To naprawdę odpowiada na pytanie "jak mam przedstawić pierwszą literę tak, jakby była wielka w przeglądarce internetowej, pozostawiając niezmieniony oryginalny ciąg javascript?" - jinglesthula


Oto skrócona wersja popularnej odpowiedzi, która dostaje pierwszą literę traktując ciąg jako tablicę:

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

Aktualizacja:

Zgodnie z komentarzami poniżej nie działa to w IE 7 lub poniżej.

Aktualizacja 2:

Unikać undefined dla pustych ciągów (patrz Komentarz @ njzk2 poniżej), możesz sprawdzić pusty ciąg:

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

235
2017-08-28 23:03



To nie zadziała w IE <8, ponieważ te przeglądarki nie obsługują indeksowania ciągów. Sam IE8 obsługuje to, ale tylko dla literałów ciągowych - nie dla obiektów typu string. - Mathias Bynens
Ryciny IE płakałyby ... - joelvh
kogo to obchodzi, rynek IE7 to mniej niż 5%! a to prawdopodobnie stara maszyna Gremmy i Grempy. Mówię krótki kod FTW! - vsync
@vsync Twoje gremma i grempa mogą mieć dużo pieniędzy, które są skłonne wydać na mojej stronie ... - joshuahedlund
@vsync Chciałem tylko, aby w zależności od danych demograficznych użytkowników (czasami z mniejszą ilością, gdy przechodzimy rok 2014 i później) opłaca się wspierać stare przeglądarki, takie jak IE7 ... - joshuahedlund


Jeśli interesuje Cię wydajność kilku różnych metod:

Oto najszybsze metody oparte na ten test jsperf (zamówione od najszybszego do najwolniejszego).

Jak widać, pierwsze dwie metody są zasadniczo porównywalne pod względem wydajności, podczas gdy zmiana String.prototype jest zdecydowanie najwolniejszy pod względem wydajności.

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



Wygląda na to, że kod inicjujący nie robi różnicy: jsperf.com/capitalize-first-letter-of-string/2 - user420667
Jeszcze jeden powód, by nie przedłużać prototypu. - cchamberlain
O_o ... Dlaczego tak źle z prototypem? - mvlabat
Zwróć też uwagę, że zastępowanie .slice(1) z .substr(1) jeszcze bardziej zwiększy wydajność. - Przemek


W innym przypadku potrzebuję go, aby pierwsza litera była wielką literą, a pozostałe małe. Następujące przypadki zmusiły mnie do zmiany tej funkcji:

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



"... ale nie zmieniaj przypadku żadnej z pozostałych liter". To nie jest poprawna odpowiedź na pytanie zadawane przez PO. - Carlos Muñoz
@ CarlosMuñoz, jeśli przeczytasz pierwsze zdanie, mówi, że jest to inna sprawa. - TMH
@TomHart To właśnie dlatego nie jest rozwiązaniem tego problemu. Powinien to być komentarz lub inne pytanie i odpowiedź - Carlos Muñoz
Zgadzam się z tym, ale widzę, że wielu ludzi tu przyjeżdża, chcąc zrobić to, co robi ta odpowiedź. - TMH


Oto najlepsze rozwiązania:

Pierwsze rozwiązanie W CSS:

p {
  text-transform: capitalize;
}

Drugie rozwiązanie :

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

Możesz też dodać go do String.prototype więc możesz połączyć ją innymi metodami:

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

i użyj tego tak:

'string'.capitalizeFirstLetter() // String

Trzecie rozwiązanie:

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



znalazłem string.replace(string[0], string[0].toUpperCase()); być o wiele łatwiejszym - Gcap
Po prostu heads-up - dzięki rozwiązaniu CSS nie można wybierać wizualnie postaci w Chrome na Ubuntu (prawdopodobnie również w innych przeglądarkach) podczas wybierania tekstu. Nadal jest wybierany, a tekst jest kopiowany, jeśli naciśniesz Ctrl + C. - Andris
Drugie rozwiązanie, tak jak je napisałeś, tworzy resztę napisu małymi literami. Usunięcie tego byłoby bliższe pierwotnej prośbie. ("Wieża Eiffla" zachowuje wielkie litery na E i T) - Ward D.S.
1) Użyj dwóch notacji dwukropka z ::first-letter ponieważ ten wariant jest zgodny z filozofią CSS3, jeśli chodzi o te dwukropki, 2) użycie .substring(…) zamiast .slice(…) ponieważ ma lepszą wydajność, 3) OP nie chciał zamanifestować wszystkich innych znaków, 4) Nie modyfikuj prototypu obiektów, które nie są Twoją własnością - Przemek
Obniżasz pozostałe litery, tę odpowiedź jest źle. - fpg1503


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

62
2017-07-17 06:23