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


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

Наприклад:

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

2969
2018-06-22 08:25


походження


Підкреслити має плагін під назвою підкреслення.чистка що включає це і купу чудових інструментів. - Aaron
а як на рахунок: return str.replace(/(\b\w)/gi,function(m){return m.toUpperCase();}); - Muhammad Umer
Простіше: string[0].toUpperCase() + string.substring(1) - dr.dimitru
3 сторінки відповідей на одне написання букв - Andrew
будь ласка, хтось скаже, чому це питання настільки популярне !!! чи є щось, чого я не розумію? 4K голосувати за відповідь на це? просто чому? - Nozar Safari


Відповіді:


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

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


4736
2018-06-22 08:30



підстрока розуміється в більшості браузерів, ніж substr - mplungjan
щоб додати до karim79 - його, напевно, надмірна, щоб зробити його функцією, як javascript, буде робити те ж саме для змінної без функції обертання. Я вважаю, було б більш зрозуміло, використовуючи функцію, але її рідний інакше, чому ускладнити його за допомогою функції обгортки? - Ross
Не зважай...""[0].toUpperCase() не вдається - Crisfole
Чи не слід нам також знизити шматочок (1)? - hasen
Ні, тому, що ОП навела цей приклад: the Eiffel Tower -> The Eiffel Tower. Крім того, функція називається capitaliseFirstLetter ні capitaliseFirstLetterAndLowerCaseAllTheOthers. - ban-geoengineering


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

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

І потім:

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

1196
2017-07-20 15:51



Мені подобається це рішення, тому що це схоже на Ruby, а Ruby - мило! :) Я в нижньому регістрі всі інші букви рядка, так що він працює так само, як Ruby: return this.charAt(0).toUpperCase() + this.substring(1).toLowerCase(); - ma11hew28
У цьому світі пост-Prototype.js не пропонується змінювати або розширювати місцеві об'єкти. - Ryan
@ rxgx - "не продовжуй" богейман зараз починає вмирати (дякую богу), і люди витягують голови з jSand і розуміють, що це просто мова мови. Просто тому, що Prototype.js розширив сам об'єкт на короткий час, це не означає, що простягання тубільців погано. Ви не повинні робити це, якщо ви пишете код для невідомого споживача (наприклад, сценарій аналітики, що йде на випадкових сайтах), але, крім цього, це добре. - csuwldcat
@csuwldcat Що робити, якщо інша бібліотека, яку ви використовуєте, додає власний капітал без вашого відома? Розширення прототипів є поганою формою незалежно від того, чи зробив прототип.js це чи ні. Завдяки ES6, істинність дозволить вам отримати свій торт і з'їсти його теж. Я думаю, ви можете збити з пантелику того, що "богейман" помирає людей, які створюють шпильки, які відповідають специфікації ECMASCRIPT. Ці шаблони відмінно підходять, тому що інша бібліотека, яка додала блайнд, реалізує її так само. Проте слід уникати додавання власних ієрогліфікатів, що не є специфікаціями. - Justin Meyer
Розширення корінних жителів - надзвичайно погана практика. Навіть якщо ви скажете "о, я ніколи не буду використовувати цей код ні з чим іншим", ви (чи хтось інший), ймовірно, будете. Потім вони проведуть три дні, намагаючись з'ясувати якусь дивну математичну помилку, тому що хтось поповнив Number.money (), щоб мати справу з валютою, яка дещо відрізняється від вашої іншої бібліотеки. Серйозно, я бачив, що це трапляється у великій компанії, і нікому не варто налагоджувати час, щоб з'ясувати бібліотеку, яка зіткнулася з прототипами вихідців. - phreakhead


У CSS:

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

408
2017-07-17 14:06



OP вимагає рішення JS. - Antonio Max
$ ('# mystring_id'). текст (рядок). css ('text-transform', 'capitalize'); - DonMB
Крім того, це впливає лише на відображення рядка, а не на фактичне значення. Якщо він знаходиться у формі, наприклад, значення все одно буде подано у формі-є. - dmansfield
Це не відповідь на питання!!! Це рішення CSS для JS-питання. Знизу Те, що мова йде про точні відповіді, просто тому, що ви знайшли "рішення", не робить це "правильним рішенням", і це відвертається від позначки. - dudewad
Це не буде працювати в контекстах JavaScript, які не мають візуалізації DOM / CSS (наприклад, Node.js). Це дійсно відповідає на питання "як я можу представити першу літеру так, ніби це було прописним у веб-браузері, залишаючи незмінену версію javascript?" - jinglesthula


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

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

235
2017-08-28 23:03



Це не буде працювати в IE <8, оскільки ці веб-переглядачі не підтримують індексування рядків. IE8 сам підтримує це, але тільки для рядкових літер, а не для рядкових об'єктів. - Mathias Bynens
Фігури IE плакали ... - joelvh
хто піклується, ринок IE7 менше 5%! і це, мабуть, ваша стара машина греми та греми. Я кажу короткий код FTW! - vsync
@vsync ваші грінма та гемпа можуть мати багато грошей, які вони готові витратити на мій сайт ... - joshuahedlund
@vsync Я просто мав на увазі, що іноді (залежно від демографічних показників користувачів) (хоча з вдячністю все менше і менше ми переходимо на 2014 рік і далі) вигідно підтримувати старі браузери, такі як IE7 ... - joshuahedlund


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

Ось найшвидші методи на основі це тест 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);
}

enter image description here


135
2017-11-14 03:26



Схоже, що код ініціалізації також не відрізняється: jsperf.com/capitalize-first-letter-of-string/2 - user420667
Ще одна причина, щоб не розширити прототип. - cchamberlain
O_o ... Чому так погано з прототипом? - mvlabat
Зауважте також, що замінити .slice(1) з .substr(1) підвищить продуктивність навіть далі. - Przemek


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

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



"... але не змінювати випадок будь-яких інших букв". Це не є правильною відповіддю на питання, яке запитував О.П. - Carlos Muñoz
@ CarlosMuñoz, якщо ви читаєте вступне слово, він каже, що це стосується іншого випадку. - TMH
@TomHart Ось чому це не рішення для цього питання. Це має бути коментар або інше питання та відповідь - Carlos Muñoz
Я згоден з цим, але я бачу багато людей, які закінчуються тут, прагнучи зробити те, що робить ця відповідь. - TMH


Ось кращі рішення:

Перше рішення У CSS:

p {
  text-transform: capitalize;
}

Другий розв'язок :

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

Ви також можете додати його до String.prototype так що ви можете поєднати його іншими методами:

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

і використовувати його так:

'string'.capitalizeFirstLetter() // String

Третій варіант:

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



я знайшов string.replace(string[0], string[0].toUpperCase()); бути набагато простіше - Gcap
Просто вгору - за допомогою рішення CSS символ з символікою не можна візуально вибирати в Chrome у Ubuntu (ймовірно, і в інших браузерах) під час вибору тексту. Він все одно отримує вибраний і текст копіюється, якщо ви натискаєте Ctrl + C, хоча. - Andris
Друге рішення, як ви його написали, робить решту рядок нижньої регістр. Видалення цього буде ближче до оригінального запиту. ("Ейфелева вежа" зберігає капіталізацію на Е і Т) - Ward D.S.
1) Використовуйте дві обозначення ободочной кишки ::first-letter оскільки цей варіант відповідає філософії CSS3, коли мова заходить про ці двокрапки, 2) використання .substring(…) а не .slice(…) оскільки він має кращу продуктивність, 3) ОП не хотіла, щоб в нижньому регістрі відображалися всі інші символи; 4) не змінюйте прототип об'єктів, які не володієте - Przemek
Ви в нижньому ряді інших літер, це відповідь є неправильно - fpg1503


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

62
2017-07-17 06:23





Записати першу букву всіх слів у рядку:

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



Перечитайте питання: я хочу виготовити перший символ рядка, але не змінюйте випадку будь-якого іншого літери. - JimmyPena
Я знаю, що це зробив. Я додаю одну річ, якщо вся рядок починається з великої літери: pieces [i] = j + pieces [i] .substr (1) .toLowerCase (); - Malovich
Інше рішення для цього випадку: function capitalizeFirstLetters (s) {return s.split ("") .map (function (w) {return w.charAt (0) .toUpperCase () + w.substr (1)}) join ("")} Може бути хорошим лайнером, якщо він не буде введено в функцію. - Luke Channings
Було б краще спочатку внизу виділити всю рядок - Magico
Крім цієї функції, не відповідаючи на запитання, це насправді також надто складне. s => s.split(' ').map(x => x[0].toUpperCase() + x.slice(1)).join(' ') - OverCoder