Як зробити першу літеру верхнього регістру рядка в JavaScript?

Як зробити першу букву з великої літери, але не змінити регістр жодної з інших літер?

Наприклад:

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

Основне рішення:

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

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

Деякі інші відповіді змінюються String.prototype(ця відповідь раніше використовувалася), але я б радив проти цього зараз через технічну ремонтопридатність (важко дізнатися, куди додана функція доprototype та може спричинити конфлікти, якщо інший код використовує те саме ім’я / браузер додає нативну функцію з цим іменем у майбутньому).

... і тоді, на це питання є набагато більше, коли ви розглядаєте питання про інтернаціоналізацію, як це показує дивовижно хороша відповідь (похований нижче).

Якщо ви хочете працювати з точками коду Unicode замість кодових одиниць (наприклад, для обробки символів Unicode за межами базової багатомовної площини), ви можете скористатися тим, що String#[@iterator]працює з кодовими точками, і ви можете використовувати toLocaleUpperCaseдля отримання верхнього регістру, що відповідає правильному мовою:

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

Для отримання додаткових варіантів інтернаціоналізації див. Оригінальну відповідь нижче .

Ось більш об'єктно-орієнтований підхід:

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

Ви б назвали функцію, як-от так:

"hello world".capitalize();

Очікуваний вихід:

"Hello world" 

У CSS:

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

Ось скорочена версія популярної відповіді, яка отримує першу букву, обробляючи рядок як масив:

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

Оновлення:

Відповідно до коментарів нижче, це не працює в IE 7 або нижче.

Оновлення 2:

Щоб уникнути undefinedпорожніх рядків (див. Коментар @ njzk2 нижче ), ви можете перевірити наявність порожнього рядка:

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

Якщо ви зацікавлені у виконанні декількох різних методів, розміщених:

Ось найшвидші методи, засновані на цьому тесті jsperf (впорядковано від найшвидшого до повільного).

Як бачимо, перші два способи за своєю ефективністю порівнюються, тоді як зміна ефективності String.prototypeє найбільш повільною з точки зору продуктивності.

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

Для іншого випадку мені це потрібно, щоб написати велику літеру, а решту написати з малої літери. Наступні випадки змусили мене змінити цю функцію:

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

Це рішення 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

Якщо ви вже (або розглядаєте) використання lodash, рішення легко:

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

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

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

Дивіться їхні документи: 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'

Ваніль js для першого верхнього регістру:

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

Велика літера з усіх слів у рядку:

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

Ми могли отримати першого персонажа з одним із моїх улюблених RegExp, схожий на милий смайлик:/^./

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

І для всіх кавових наркоманів:

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

... і для всіх хлопців, які думають, що існує кращий спосіб зробити це, не поширюючи натільні прототипи:

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

Використання:

var str = "ruby java";

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

Він виведе "Ruby java"на консоль.

Якщо ви використовуєте underscore.js або Lo-Dash , бібліотека underscore.string забезпечує розширення рядків, включаючи великі літери:

_.capitalize (рядок) Перетворює першу букву рядка в великі регістри.

Приклад:

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

І потім:

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

Оновлення листопада 2016 року (ES6), лише для FUN:

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

тоді capitalize("hello") // Hello

SHORTEST 3 рішення, 1 і 2 обробляти випадки, коли sрядок є "", nullі 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()) );

Тільки CSS

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

• Незважаючи на те, що викликається ::first-letter, він застосовується до першого символу , тобто у випадку рядка %a, цей селектор буде застосовуватися до цього, %і як такий aне буде використовуватися з великої літери.
• У IE9 + або IE5.5 + він підтримується у застарілих позначеннях лише однією двокрапкою ( :first-letter).

ES2015 однолінійний

Оскільки у ES2015 є чимало відповідей, але жодна в ES2015 не дозволила б ефективно вирішити оригінальну проблему, я придумав таке:

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

Зауваження

• parameters => functionце так звана функція стрілки .
• Я пішов з ім'ям, capitalizeFirstCharа не capitalizeFirstLetterтому, що ОП запитував не код, який використовує велику літери у всій рядку, а найперший знак (якщо це, звичайно, літера).
• constдає нам можливість заявляти capitalizeFirstCharяк постійну, що бажано, оскільки, як програміст, ви завжди повинні чітко заявляти про свої наміри.
• У еталоні, який я виконував, не було суттєвої різниці між string.charAt(0)та string[0]. Зауважте, що це string[0]було б undefinedдля порожнього рядка, тому його слід переписати string && string[0], що є занадто багатослівним, порівняно з альтернативним.
• string.substring(1)швидше, ніж string.slice(1).

Орієнтир

• 4,956,962 ops / s ± 3,03% для цього розчину,
• 4,577,946 ops / s ± 1,2% за найбільш проголосовану відповідь.
• Створено за допомогою JSBench.me на Google Chrome 57.

Існує дуже простий спосіб здійснити його шляхом заміни . Для ECMAScript 6:

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

Результат:

'Foo'

У CSS це здається легше:

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

Це з властивості перетворення тексту CSS (у W3Schools ).

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

Я не бачив жодної згадки в існуючих відповідях на питання, пов'язані з кодовими астральними площинами або інтернаціоналізацією. "Прописні літери" не означають однакову річ у кожній мові з використанням заданого сценарію.

Спочатку я не бачив жодної відповіді, що стосувалася б питань, пов’язаних з кодовими точками астральної площини. Є такий , але він трохи закопаний (як, напевно, буде цей!)

Більшість запропонованих функцій виглядають так:

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

Однак деякі випадкові символи знаходяться поза BMP (основна багатомовна площина, кодові точки U + 0 до U + FFFF). Наприклад, візьміть цей текст Deseret:

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

Перший символ тут не дає великої літери, оскільки властивості, індексовані масивом рядків, не мають доступу до "символів" або кодових точок *. Вони отримують доступ до кодових одиниць UTF-16. Це справедливо і під час нарізки - значення індексу вказують на кодові одиниці.

Буває так, що кодові одиниці UTF-16 дорівнюють 1: 1 з кодовими точками USV в двох діапазонах, U + 0 до U + D7FF і U + E000 до U + FFFF включно. Більшість випадкових персонажів потрапляють у ці два діапазони, але не всі вони.

З ES2015 року впоратися з цим стало трохи простіше. String.prototype[@@iterator]дає рядки, що відповідають кодовим точкам **. Наприклад, ми можемо це зробити:

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

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

Для довших рядків це, мабуть, не дуже ефективно *** - нам не потрібно повторювати залишок. Ми могли би скористатися String.prototype.codePointAtтим першим (можливим) листом, але нам все-таки потрібно визначити, звідки повинен починатися фрагмент. Одним із способів уникнути повторення залишку було б перевірити, чи є перша кодова точка поза BMP; якщо це не так, фрагмент починається з 1, а якщо він є, то зріз починається з 2.

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

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

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

Ви можете використати побітну математику замість > 0xFFFFцього, але, мабуть, простіше зрозуміти цей спосіб, і ви домоглись того ж самого.

Ми також можемо зробити цю роботу в ES5 і нижче, якщо за необхідності трохи поглибити цю логіку. В ES5 немає внутрішніх методів роботи з кодовими точками, тому ми повинні вручну перевірити, чи є першою кодовою одиницею сурогат ****:

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

На початку я також зазначив міркування щодо інтернаціоналізації. Деякі з них дуже важко пояснити, оскільки вони вимагають знання не тільки того, якою мовою користуються, але також можуть вимагати конкретних знань про слова в мові. Наприклад, ірландський диграф "mb" з великої літери починається із слова "mB" на початку слова. Інший приклад, німецький ессет, ніколи не починає слова (afaik), але все ж допомагає проілюструвати проблему. Ессет з нижнього регістру ("ß") з великої літери складається з "SS", але "SS" може бути з малих літер до "ß" або "ss" - для знань, що це правильно, вам потрібні позамовні знання німецької мови!

Найвідоміший приклад подібних питань, мабуть, - турецька. У турецькій латині основною формою i є İ, тоді як нижча форма I - ı - це дві різні літери. На щастя, у нас є спосіб пояснити це:

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

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

У веб-переглядачі найпопулярніший мовний тег користувача вказується на navigator.language, список у порядку вподобань знаходиться на navigator.languages, і мова даного елемента DOM може бути отримана (як правило) за допомогою Object(element.closest('[lang]')).lang || YOUR_DEFAULT_HEREбагатомовних документів.

В агентах, які підтримують класи символів властивостей Unicode в RegExp, які були представлені в ES2018, ми можемо додатково очистити речі, прямо висловивши, які символи нас цікавлять:

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

Це може бути налаштовано трохи, щоб також обробляти великі слова в рядку з досить хорошою точністю. CWUАбо Changes_When_Uppercased властивість символів відповідає всім точкам коду , які, ну, коли зміни в верхньому регістрі. Ми можемо спробувати це за допомогою заголовків диграфних символів, таких як голландський ij, наприклад:

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

На момент написання (лютий 2020 року) Firefox / Spidermonkey ще не застосував жодної з функцій RegExp, впроваджених за останні два роки *****. Ви можете перевірити поточний стан цієї функції в таблиці співзвуччя Kangax . Babel вміє компілювати літерали RegExp з посиланнями на властивості до еквівалентних шаблонів без них, але пам’ятайте, що отриманий код може бути величезним.

Ймовірно, люди, які задають це питання, не будуть стосуватися десеретської капіталізації чи інтернаціоналізації. Але добре бути в курсі цих питань, тому що є хороший шанс, що ви зіткнетесь з ними в підсумку, навіть якщо вони зараз не стосуються. Вони не є "крайніми" випадками, а точніше, вони не за визначенням крайових випадків - є ціла країна, де більшість людей розмовляють турецькою, так чи інакше, і поєднання кодових одиниць з кодовими точками є досить поширеним джерелом помилок (особливо з стосовно емоджи). І рядки, і мова досить складні!

* Кодові одиниці UTF-16 / UCS2 також є кодовими точками Unicode в тому сенсі, що, наприклад, U + D800 технічно є кодовою точкою, але це не те, що це "означає" тут ... начебто ... хоча це стає досить нечіткий. Однак сурогати, безумовно, не є USV (скалярні значення Unicode).

** Хоча якщо блок сурогатного коду є "сиротою" - тобто не є частиною логічної пари - ви все одно можете отримати сюрогати і тут.

*** можливо. Я цього не перевіряв. Якщо ви не визначили, що використання великих літер є вагомим вузьким місцем, я, мабуть, не став би це - вибирайте те, що ви вважаєте, найбільш зрозумілим і читабельним.

**** така функція, можливо, хотіла б протестувати як перший, так і другий кодові одиниці замість лише першого, оскільки можливо, що перший підрозділ є сиротом сурогатом. Наприклад, вхід "\ uD800x" буде використовувати великі букви X як є, чого можна або не очікувати.

***** Ось проблема Bugzilla, якщо ви хочете більше слідкувати за прогресом.

Завжди краще обробляти ці речі за допомогою CSS спочатку , загалом, якщо ви можете вирішити щось за допомогою CSS, перейдіть до цього спочатку, а потім спробуйте JavaScript, щоб вирішити свої проблеми, тому в цьому випадку спробуйте використовувати :first-letterв CSS і застосуватиtext-transform:capitalize;

Тому спробуйте створити для цього клас, щоб ви могли використовувати його у всьому світі, наприклад: .first-letter-uppercaseі додайте щось подібне нижче до свого CSS:

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

Також альтернативний варіант - JavaScript, тому найкращим буде щось подібне:

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

і називати це так:

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'

Якщо ви хочете повторно використовувати його знову і знову, краще приєднати його до рідної версії javascript, тому щось подібне нижче:

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

і зателефонуйте як нижче:

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

Якщо ви хочете переформатувати текст з великої літери, ви можете змінити інші приклади як такі:

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

Це забезпечить зміну наступного тексту:

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'

Ось функція, яка називається ucfirst () (скорочення " великої літери першої літери"):

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

Ви можете використовувати великі літери, зателефонувавши ucfirst ("деяка рядок") - наприклад,

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

Це працює, розділивши струну на дві частини. У першому рядку він витягує firstLetter, а потім на другому рядку використовує великі літери firstLetter , викликаючи firstLetter.toUpperCase () і з'єднує його з рештою рядка, що знаходиться за допомогою виклику str.substr (1) .

Ви можете подумати, що це не зможе отримати порожній рядок, і справді на такій мові, як C, вам доведеться це задовольнити. Однак у JavaScript, коли ви берете підрядку порожнього рядка, ви просто повернете порожній рядок.

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

Використання:

capitalizedString = someString.capitalize();

Це текстовий рядок => Це текстовий рядок

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

Оформити замовлення на це рішення:

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

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

(Ви можете інкапсулювати його у функції або навіть додати його до прототипу String, якщо ви часто використовуєте його.)

ucfirstФункція працює , якщо ви робите це так.

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

Дякую JP за розголос.

Ви можете зробити це в один рядок, як це

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

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

Я знайшов цю функцію стрілки найпростішою. Замінити відповідає першому символу ( \w) букви вашої рядка та перетворить його у великі регістри. Нічого фантазії не потрібно.