Jak zrobić pierwszą literę wielkiej litery w JavaScript?

Jak zrobić pierwszą literę ciągu wielkimi literami, ale nie zmieniać wielkości liter w pozostałych literach?

Na przykład:

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

Podstawowym rozwiązaniem jest:

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

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

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

... a potem, gdy rozważasz internacjonalizację, jest o wiele więcej, o czym świadczy ta zadziwiająco dobra odpowiedź (ukryta poniżej).

Jeśli chcesz pracować z punktami kodowymi Unicode zamiast z jednostkami kodowymi (na przykład, aby obsługiwać znaki Unicode poza Podstawową płaszczyzną wielojęzyczną), możesz wykorzystać fakt, że String#[@iterator]działa on z punktami kodowymi, i możesz użyć, toLocaleUpperCaseaby uzyskać poprawne ustawienia regionalne:

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

Aby uzyskać jeszcze więcej opcji internacjonalizacji, zobacz oryginalną odpowiedź poniżej .

Oto podejście bardziej obiektowe:

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

Wywołalibyśmy tę funkcję w następujący sposób:

"hello world".capitalize();

Oczekiwany wynik to:

"Hello world" 

W CSS:

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

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

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

Aktualizacja:

Zgodnie z poniższymi komentarzami nie działa to w IE 7 lub niższej.

Aktualizacja 2:

Aby uniknąć undefinedpustych łańcuchów (patrz komentarz @ njzk2 poniżej ), możesz sprawdzić, czy łańcuch jest pusty:

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

Jeśli jesteś zainteresowany wydajnością kilku różnych opublikowanych metod:

Oto najszybsze metody oparte na tym teście jsperf (uporządkowane od najszybszego do najwolniejszego).

Jak widać, pierwsze dwie metody są zasadniczo porównywalne pod względem wydajności, podczas gdy zmiana String.prototypejest zdecydowanie najwolniejsza 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);
}

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

Oto rozwiązanie ECMAScript 6+ 2018 :

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

Jeśli już korzystasz (lub rozważasz) lodash, rozwiązanie jest proste:

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

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

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

Zobacz ich dokumenty: 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 na pierwszą wielką literę:

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

Wielką literą wszystkich słów w ciągu powinna być wielka litera:

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

Możemy dostać pierwszą postać z jedną z moich ulubionych RegExp, wygląda jak słodka buźka:/^./

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

I dla wszystkich ćpunów kawy:

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

... i dla wszystkich facetów, którzy myślą, że jest lepszy sposób na to, bez rozszerzania natywnych prototypów:

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

Posługiwać się:

var str = "ruby java";

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

Wyjdzie "Ruby java"na konsolę.

Jeśli używasz underscore.js lub Lo-Dash , biblioteka underscore.string zapewnia rozszerzenia ciągów, w tym wielkie litery:

_.capitalize (string) Konwertuje pierwszą literę ciągu na wielkie litery.

Przykład:

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

I wtedy:

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

Zaktualizuj listopad 2016 (ES6), tylko dla ZABAWY:

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

następnie capitalize("hello") // Hello

NAJKRÓTSZA 3 rozwiązania, 1 i 2 przypadki, gdy uchwyt sciąg jest "", nulli 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()) );

Tylko CSS

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

• Pomimo wywołania ::first-letter, odnosi się do pierwszego znaku , tj. W przypadku łańcucha %a, ten selektor miałby zastosowanie do %i jako taki anie byłby pisany wielkimi literami.
• W IE9 + lub IE5.5 + jest obsługiwany w zapisie starszej wersji tylko z jednym dwukropkiem ( :first-letter).

ES2015 z jedną wkładką

Ponieważ istnieje wiele odpowiedzi, ale w ES2015 nie ma takich, które mogłyby skutecznie rozwiązać pierwotny problem, wymyśliłem:

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

Uwagi

• parameters => functionjest tak zwaną funkcją strzałki .
• Poszedłem z imieniem capitalizeFirstCharzamiast capitalizeFirstLetter, ponieważ OP nie poprosił o kod, który zapisuje wielką literę w całym ciągu, ale pierwszy znak (jeśli oczywiście jest to litera).
• const daje nam możliwość deklaracji capitalizeFirstChar jako stałej, co jest pożądane, ponieważ jako programista zawsze powinieneś wyraźnie określać swoje zamiary.
• W przeprowadzonym przeze mnie teście porównawczym nie było znaczącej różnicy między string.charAt(0)i string[0]. Zauważ jednak, że string[0]byłby to undefinedpusty ciąg, więc należy go przepisać na string && string[0], co jest zbyt szczegółowe, w porównaniu do alternatywy.
• string.substring(1)jest szybszy niż string.slice(1).

Reper

• 4 956 962 operacji / s ± 3,03% dla tego rozwiązania,
• 4,577,946 operacji / s ± 1,2% dla najczęściej głosowanych odpowiedzi.
• Utworzono za pomocą JSBench.me w Google Chrome 57.

Istnieje bardzo prosty sposób na wdrożenie go przez zastąpienie . W przypadku ECMAScript 6:

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

Wynik:

'Foo'

W CSS wydaje się to łatwiejsze:

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

Pochodzi z CSS Text-Transform Property (w W3Schools ).

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

Nie widziałem żadnej wzmianki w istniejących odpowiedziach na problemy związane z punktami kodu samolotu astralnego lub internacjonalizacją. „Wielkie litery” nie oznaczają tego samego w każdym języku używającym danego skryptu.

Początkowo nie widziałem żadnych odpowiedzi dotyczących problemów związanych z punktami kodu płaszczyzny astralnej. Jest jeden , ale jest trochę pochowany (tak chyba będzie!)

Większość proponowanych funkcji wygląda następująco:

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

Jednak niektóre znaki z literami nie mieszczą się w BMP (podstawowa płaszczyzna wielojęzyczna, punkty kodowe U + 0 do U + FFFF). Weźmy na przykład następujący tekst:

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

Pierwszy znak tutaj nie używa wielkich liter, ponieważ indeksowane przez tablicę właściwości ciągów nie mają dostępu do „znaków” ani punktów kodowych *. Dostęp do jednostek kodu UTF-16. Dotyczy to również krojenia - wartości indeksu wskazują jednostki kodu.

Zdarza się, że jednostki kodu UTF-16 to 1: 1 z punktami kodowymi USV w dwóch zakresach, od U + 0 do U + D7FF i U + E000 do U + FFFF włącznie. Większość znaków w skrzynkach należy do tych dwóch zakresów, ale nie wszystkie.

Począwszy od ES2015, radzenie sobie z tym stało się trochę łatwiejsze. String.prototype[@@iterator]zwraca ciągi odpowiadające punktom kodowym **. Na przykład możemy to zrobić:

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

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

W przypadku dłuższych ciągów prawdopodobnie nie jest to strasznie wydajne *** - tak naprawdę nie musimy powtarzać reszty. Moglibyśmy użyć String.prototype.codePointAttej pierwszej (możliwej) litery, ale nadal musielibyśmy ustalić, od czego powinien zacząć się segment. Jednym ze sposobów uniknięcia iteracji reszty byłoby sprawdzenie, czy pierwszy punkt kodowy znajduje się poza BMP; jeśli nie jest, wycinek zaczyna się od 1, a jeśli tak, wycinek zaczyna się od 2.

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

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

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

Zamiast tego możesz użyć matematyki bitowej > 0xFFFF, ale prawdopodobnie łatwiej jest to zrozumieć i osiągnąć to samo.

Możemy również sprawić, aby działało to w ES5 i niższych, jeśli zajdzie taka potrzeba, posuwając się dalej. W ES5 nie ma żadnych wewnętrznych metod pracy z punktami kodowymi, dlatego musimy ręcznie przetestować, czy pierwsza jednostka kodu jest odpowiednikiem ****:

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

Na początku wspomniałem również o kwestiach dotyczących internacjonalizacji. Niektóre z nich są bardzo trudne do wyjaśnienia, ponieważ wymagają wiedzy nie tylko o tym, jakiego języka używa się, ale mogą również wymagać konkretnej znajomości słów w tym języku. Na przykład irlandzki znak „mb” zaczyna się od wielkiej litery jako „mB” na początku słowa. Kolejny przykład, niemiecki eszett, nigdy nie zaczyna słowa (afaik), ale nadal pomaga zilustrować problem. Małe litery eszett („ß”) są wielkimi literami na „SS”, ale „SS” może składać się z małych liter na „ß” lub „ss” - potrzebujesz znajomości języka niemieckiego poza pasmem, aby wiedzieć, który jest prawidłowy!

Najbardziej znanym przykładem tego rodzaju problemów jest prawdopodobnie turecki. W łacinie tureckiej główną formą i jest İ, natomiast mała litera I to ı - są to dwie różne litery. Na szczęście mamy na to sposób:

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

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

W przeglądarce najbardziej preferowany znacznik językowy użytkownika jest oznaczony przez navigator.language, lista w kolejności preferencji znajduje się w navigator.languages, a język danego elementu DOM można uzyskać (zwykle) za pomocą Object(element.closest('[lang]')).lang || YOUR_DEFAULT_HEREdokumentów wielojęzycznych.

W agentach, które obsługują klasy znaków właściwości Unicode w RegExp, które zostały wprowadzone w ES2018, możemy dalej posprzątać, bezpośrednio wyrażając, którymi znakami jesteśmy zainteresowani:

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

Można to nieco ulepszyć, aby obsługiwać wielkie litery w ciągu z dość dobrą dokładnością. Właściwość znakowaCWU lub Changes_When_Uppercased pasuje do wszystkich punktów kodowych, które zmieniają się, gdy są pisane wielkimi literami. Możemy spróbować się z titlecased znaków digraf jak holenderskiego ij na przykład:

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

W momencie pisania (luty 2020) Firefox / Spidermonkey nie wdrożył jeszcze żadnej funkcji RegExp wprowadzonej w ciągu ostatnich dwóch lat *****. Możesz sprawdzić aktualny status tej funkcji w tabeli kompatybilności Kangax . Babel jest w stanie skompilować literały RegExp z odwołaniami do właściwości do równoważnych wzorców bez nich, ale należy pamiętać, że wynikowy kod może być ogromny.

Najprawdopodobniej osoby zadające to pytanie nie będą zajmować się pisaniem wielkich liter ani internacjonalizacją. Ale dobrze jest zdawać sobie sprawę z tych problemów, ponieważ istnieje duża szansa, że ​​w końcu się z nimi spotkasz, nawet jeśli obecnie nie są to obawy. Nie są to przypadki „krawędziowe”, a raczej nie są to przypadki z definicji z definicji - istnieje cały kraj, w którym większość ludzi mówi po turecku, a łączenie jednostek kodowych z punktami kodowymi jest dość powszechnym źródłem błędów (szczególnie z w odniesieniu do emoji). Zarówno łańcuchy, jak i język są dość skomplikowane!

* Jednostki kodowe UTF-16 / UCS2 są również punktami kodowymi Unicode w tym sensie, że np. U + D800 jest technicznie punktem kodowym, ale to nie jest to, co tutaj „znaczy”… tak jakby… chociaż robi się ładnie zamazany. Tym, czym zdecydowanie nie są surogaty, są jednak USV (wartości skalarne Unicode).

** Chociaż jeśli jednostka kodu zastępczego jest „osierocona” - tj. Nie jest częścią logicznej pary - nadal możesz uzyskać tutaj również zastępcze jednostki.

*** może. Nie testowałem tego. Jeśli nie określiłeś, że wielkie litery są znaczącym wąskim gardłem, prawdopodobnie nie przejmowałbym się tym - wybierz wszystko, co Twoim zdaniem jest najbardziej jasne i czytelne.

**** taka funkcja może chcieć przetestować zarówno pierwszą, jak i drugą jednostkę kodu zamiast tylko pierwszej, ponieważ możliwe jest, że pierwsza jednostka jest osieroconym surogatem. Na przykład dane wejściowe „\ uD800x” pisałyby wielką literą X w niezmienionej postaci, czego można oczekiwać lub nie.

***** Oto problem Bugzilli, jeśli chcesz śledzić postępy bardziej bezpośrednio.

Zawsze lepiej jest najpierw poradzić sobie z tego rodzaju rzeczami za pomocą CSS , ogólnie, jeśli możesz coś rozwiązać za pomocą CSS, najpierw przejdź do tego, a następnie wypróbuj JavaScript, aby rozwiązać problemy, więc w tym przypadku spróbuj użyć :first-letterw CSS i zastosujtext-transform:capitalize;

Spróbuj więc stworzyć klasę do tego, abyś mógł z niej korzystać globalnie, na przykład: .first-letter-uppercasei dodaj coś takiego jak poniżej w swoim CSS:

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

Alternatywną opcją jest JavaScript, więc najlepiej będzie coś takiego:

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

i nazwij to tak:

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'

Jeśli chcesz go używać wielokrotnie, lepiej dołącz go do natywnego ciągu javascript, więc coś w stylu poniżej:

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

i nazwij to jak poniżej:

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

Jeśli chcesz sformatować tekst wielkimi literami, możesz zmodyfikować inne przykłady jako takie:

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

Zapewni to zmianę następującego tekstu:

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'

Oto funkcja o nazwie ucfirst () (skrót od „wielka pierwsza litera”):

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

Możesz napisać wielką literą, wywołując ucfirst („jakiś ciąg”) - na przykład

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

Działa poprzez podział struny na dwie części. W pierwszym wierszu wyciąga firstLetter, a następnie w drugim wierszu kapitalizuje firstLetter , wywołując firstLetter.toUpperCase () i łączy go z resztą ciągu, który można znaleźć, wywołując str.substr (1) .

Możesz pomyśleć, że to nie powiedzie się dla pustego łańcucha, a nawet w języku takim jak C musiałbyś się tym zająć. Jednak w JavaScript, gdy weźmiesz podciąg pustego łańcucha, po prostu odzyskasz pusty łańcuch.

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

Stosowanie:

capitalizedString = someString.capitalize();

To jest ciąg tekstowy => To jest ciąg tekstowy

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

Sprawdź to rozwiązanie:

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

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

(Możesz obudować go funkcją lub nawet dodać do prototypu String, jeśli często go używasz.)

ucfirstFunkcja działa, jeśli robisz to w ten sposób.

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

Dzięki JP za deklarację.

Możesz to zrobić w jednym wierszu takim jak ten

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

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

Ta funkcja strzałki była dla mnie najłatwiejsza. Zamień dopasowuje pierwszą literę ( \w) łańcucha i konwertuje ją na wielkie litery. Nie potrzeba nic bardziej wymyślnego.