83 Вопрос: Как сделать первую букву строки заглавной в JavaScript?

вопрос создан в Fri, Apr 5, 2019 12:00 AM

Как сделать первую букву строки заглавной, но не изменить регистр любой другой буквы?

Например:

  •  "this is a test" - > "This is a test"
  •  "the Eiffel Tower" - > "The Eiffel Tower"
  •  "/index.html" - > "/index.html"
3412
  1. Underscore имеет плагин underscore.string , которая включает в себя это и множество других замечательных инструментов.
    2013-04-15 19: 16: 14Z
  2. как насчет: return str.replace(/(\b\w)/gi,function(m){return m.toUpperCase();});
    2014-11-21 19: 25: 37Z
  3. Проще: string[0].toUpperCase() + string.substring(1)
    2015-11-25 04: 00: 25Z
30 ответов                              30                         
 
function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

Некоторые другие ответы изменяют String.prototype (этот ответ также использовался), но я бы посоветовал не делать этого сейчас из-за удобства обслуживания (сложно определить, где функция добавляется в prototype и может вызвать конфликты, если другой код использует то же имя /браузер добавляет нативную функцию с тем же именем в будущем).

    
5314
2018-02-14 12: 22: 09Z
  1. подстрока понимается в большем количестве браузеров, чем substr
    2011-07-06 13: 07: 05Z
  2. Nevermind ... ""[0].toUpperCase() не выполняется
    2013-01-04 19: 42: 38Z
  3. Разве мы не должны также toLowerCase slice (1)?
    2014-01-30 17: 58: 43Z
  4. Нет, потому что OP дал этот пример: the Eiffel Tower -> The Eiffel Tower. Кроме того, функция называется capitaliseFirstLetter, а не capitaliseFirstLetterAndLowerCaseAllTheOthers.
    2014-08-02 10: 24: 13Z
  5. Никому нет дела до важного правила ООП? - Никогда не редактировать объекты, которые вам не принадлежат? . Кстати, эта строчка выглядит намного элегантнее: string[0].toUpperCase() + string.substring(1)
    2015-12-09 09: 00: 17Z

Вот более объектно-ориентированный подход:

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

Вы бы вызвали функцию следующим образом:

 
"hello world".capitalize();

Ожидаемый результат:

 
"Hello world" 
    
1283
2019-05-12 19: 14: 30Z
  1. Мне нравится это решение, потому что оно похоже на Ruby, а Ruby хорош! :) Я строчные буквы всех других букв строки, чтобы он работал точно так же, как Ruby: return this.charAt(0).toUpperCase() + this.substring(1).toLowerCase();
    2011-03-08 18: 21: 04Z
  2. В этом мире post-Prototype.js не предлагается изменять или расширять собственные объекты.
    2011-07-25 22: 24: 09Z
  3. @ rxgx - бугмен "не расширять" теперь начинает отмирать (слава богу), и люди вытаскивают свои головы из jSand и осознают это это просто особенность языка. Тот факт, что Prototype.js на короткое время расширил сам объект, не означает, что расширение Native - это плохо. Выне следует этого делать, если вы пишете код для неизвестного потребителя (например, сценарий аналитики, работающий на случайных сайтах), но в остальном это нормально.
    2012-05-19 20: 47: 18Z
  4. @ csuwldcat Что если другая используемая вами библиотека добавляет собственную заглавную букву, не зная об этом? Расширение прототипов - плохая форма, независимо от того, делал это Prototype.js или нет. С ES6 встроенные функции позволят вам съесть свой торт и съесть его тоже. Я думаю, вы могли бы запутать, что «бугмен» умирает за людей, создающих прокладки, которые соответствуют спецификации ECMASCRIPT. Эти прокладки отлично подходят, потому что другая библиотека, которая добавила прокладку, реализовала бы ее таким же образом. Тем не менее, следует избегать добавления ваших собственных не-спецификаций.
    2014-09-17 20: 37: 27Z
  5. Расширение аборигенов ЧРЕЗВЫЧАЙНО плохая практика. Даже если вы скажете «о, я никогда не собираюсь использовать этот код с чем-либо еще», вы (или кто-то еще), вероятно, будете. Затем они потратят три дня, пытаясь выяснить какую-то странную математическую ошибку, потому что кто-то расширил Number.money (), чтобы иметь дело с валютой, немного отличающейся от вашей другой библиотеки. Серьезно, я видел, как это происходит в большой компании, и не стоит никому отлаживать, чтобы выяснить, какая библиотека работает с прототипами native.
    2014-12-30 01: 03: 04Z

В CSS:

 
p:first-letter {
    text-transform:capitalize;
}
    
488
2016-08-12 22: 36: 50Z
  1. OP запрашивает решение JS.
    2013-09-23 15: 23: 11Z
  2. $('# mystring_id'). text (string) .css ('text-transform', 'capitalize');
    2015-09-24 17: 34: 23Z
  3. Кроме того, это влияет только на отображение строки, а не на фактическое значение. Если он находится в форме, например, значение все равно будет отправлено как есть.
    2016-06-07 13: 26: 31Z
  4. Это не ответ на вопрос !!! Это CSS решение вопроса JS. Downvote. SO касается точных ответов, просто потому, что вы нашли «решение», не означает, что оно «правильное решение», и это совершенно неожиданно.
    2017-02-23 18: 49: 17Z
  5. Для примерно 80% зрителей, пришедших на этот вопрос, это будет лучший ответ. Не ответ на вопрос , а вместо этого на проблему .
    2018-03-23 ​​11: 54: 06Z

Вот сокращенная версия популярного ответа, который получает первую букву, обрабатывая строку как массив:

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

Update:

Согласно комментариям ниже, это не работает в IE 7 или ниже.

Обновление 2:

Чтобы избежать undefined для пустых строк (см. комментарий @ njzk2 ниже ), вы можете проверить наличие пустой строки:

 
function capitalize(s)
{
    return s && s[0].toUpperCase() + s.slice(1);
}
    
262
2017-05-23 12: 34: 59Z
  1. Это не сработает в IE < 8, так как эти браузеры не поддерживают индексацию строк. Сам IE8 поддерживает это, но только для строковых литералов, а не для строковых объектов.
    2012-02-14 11: 33: 44Z
  2. Фигуры IE будут плакать ...
    2012-07-13 07: 47: 09Z
  3. кого это волнует, рынок IE7 составляет менее 5%! и это, вероятно, старая машина твоей Греммы и Гремпы. Я говорю короткий код FTW!
    2012-12-03 06: 20: 35Z
  4. @ vsync Я просто имел в виду, что в зависимости от демографической ситуации вашего пользователя иногда (хотя с благодарностью все меньше и меньше по мере прохождения 2014 года и далее) выгодно поддерживать старые браузеры, такие как IE7 ...
    2014-03-14 17: 47: 04Z
  5. @ njzk2, чтобы обработать пустую строку, вы можете обновить ее следующим образом: return s && s[0].toUpperCase() + s.slice(1);
    2014-10-01 22: 38: 40Z

Вот лучшие решения:

Первое решение в 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(" ");
}
    
165
2019-05-10 12: 47: 42Z
  1. Я обнаружил, что string.replace(string[0], string[0].toUpperCase()); намного проще
    2017-03-20 17: 46: 46Z
  2. Просто наперекосяк - с помощью решения CSS заглавный символ не может быть визуально выбран в Chrome в Ubuntu (возможно, также и в других браузерах) при выделении текста. Он по-прежнему выделяется, и текст копируется, если вы нажмете Ctrl + C.
    2017-07-25 10: 13: 16Z
  3. Второе решение, как вы его написали, делает остаток строки строчным. Удаление этого было бы ближе к первоначальному запросу. («Эйфелева башня» держит заглавные буквы на буквах E и T)
    2017-09-01 07: 52: 49Z
  4. 1) Используйте две двоеточия для обозначения ::first-letter, поскольку этот вариант соответствует философии CSS3, когда речь идет об этих двоеточиях, 2) используйте .substring(…) вместо .slice(…), поскольку он лучше производительность, 3) OP не хотел, чтобы все остальные символы были в нижнем регистре, 4) Не изменяйте прототип объектов, которыми вы не владеете
    2017-10-11 16: 50: 54Z
  5. Другие буквы в нижнем регистре, этот ответ является неправильным.
    2018-07-01 02: 34: 21Z

Если вы заинтересованы в эффективности нескольких опубликованных методов:

Вот самые быстрые методы, основанные на этом тесте 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);
}

 введите описание изображения здесь

    
158
2015-11-14 03: 26: 14Z
  1. Кажется, код инициализации тоже не имеет значения: jsperf.com/capitalize-first-letter-of-string/2
    2016-03-22 17: 59: 15Z
  2. Также обратите внимание, что замена .slice(1) на .substr(1) еще больше повысит производительность.
    2017-09-23 19: 37: 05Z
  3. Разумное рассмотрение. Имейте в виду, что во многих случаях снижение производительности даже не заметно: даже самый медленный подход будет обрабатывать 19 тыс. Строк за 10 мс. Так что возьмите наиболее удобный для вас вариант.
    2018-10-23 19: 03: 15Z
  4. В случае, если кому-то любопытно (как и мне), как за последние четыре года производительность возросла, количество операций в секунду для третьей функции на MacBook Pro 2018 года на 135 307 869, то есть в 12,4 раза быстрее.
    2019-01-18 09: 35: 15Z

В другом случае мне нужно, чтобы первая буква была заглавной, а остальные строчными. Следующие случаи заставили меня изменить эту функцию:

 
//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();
    
143
2018-06-05 21: 49: 53Z
  1. "... но не меняйте регистр других букв". Это неправильный ответ на вопрос, заданный ОП.
    2014-07-01 19: 31: 00Z
  2. @ CarlosMuñoz, если вы прочитаете вступительное предложение, он говорит, что это для другого случая.
    2014-09-05 08: 25: 33Z
  3. @ TomHart Именно поэтому это не решение вопроса. Это должен быть комментарий или другой вопрос и ответ
    2014-09-05 13: 38: 38Z
  4. Я согласен с вами в этом, но я вижу, что многие люди заканчивают здесь, пытаясь сделать то, что делает этот ответ.
    2014-09-05 13: 43: 21Z

Это решение 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
    
63
2019-06-13 23: 03: 32Z
  1. .slice() медленнее, чем .substring(), str[0] будет undefined для пустой строки, и использование литералов шаблона для объединения двух частей вводит здесь 8 символов, тогда как + вводит только 3 .
    2018-06-04 08: 40: 50Z
  2. Цель моего ответа Prz - продемонстрировать новые поддерживаемые функции ES6, в частности литералы шаблонов, которые не упоминались в других публикациях. Идея StackOverflow состоит в том, чтобы предоставить поисковику «опции». Они могут взять концепцию литералов шаблонов, описанную в этом ответе, и объединить ее с улучшениями микроскорости, такими как Substring v. Slice, если их приложению требуются эти дополнительные сэкономленные миллисекунды. Мой ответ также не включает модульное тестирование, которое показывает, что вам никогда не следует копировать ответ StackOverflow напрямую. Я предполагаю, что разработчик примет мой ответ и адаптирует его.
    2018-06-05 14: 03: 05Z
 
var string = "hello world";
string = string.charAt(0).toUpperCase() + string.slice(1);
alert(string);
    
62
2016-03-09 12: 50: 23Z
Элемент

Прописать первую букву всех слов в строке:

 
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(" ");
}
    
60
2016-04-21 06: 09: 45Z
  1. Перечитайте вопрос: я хочу использовать заглавные буквы первого символа строки, , но не изменяю регистр любой другой буквы.
    2011-11-30 19: 13: 07Z
  2. Я знаю, что сделал. Я бы добавил одну вещь, если вся строка начинается с заглавной буквы :iece [i] = j +iece [i] .substr (1) .toLowerCase ();
    2012-12-20 21: 16: 13Z
  3. Другое решение этого случая: функция capitaliseFirstLetters (s) {return s.split ("") .map (function (w) {return w.charAt (0) .toUpperCase () + w.substr (1)}). join ("")} Может быть хорошим однострочником, если он не помещен в функцию.
    2013-03-10 21: 36: 38Z
  4. Было бы лучше, чтобы сначала была строчная вся строка
    2016-07-06 10: 36: 01Z
  5. Кроме этой функции, не отвечающей на вопрос, на самом деле она также слишком сложна. s => s.split(' ').map(x => x[0].toUpperCase() + x.slice(1)).join(' ')
    2017-07-28 18: 10: 23Z

Если вы уже (или рассматриваете) использование 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);
}
    
52
2016-12-08 07: 34: 12Z
  1. Я думаю, что предпочтение следует отдавать ванильным J, так как большинство людей не загружают весь фреймворк только для того, чтобы использовать строку с заглавными буквами.
    2015-12-06 23: 49: 20Z
  2. конечно, но большинство людей, вероятно, уже загрузили lodash.
    2015-12-07 07: 20: 52Z
  3. До сих пор во всех моих проектах я никогда не использовал lodash. Не забывайте также, что большинство людей в Google заканчивают на этой странице, и перечисление фреймворка в качестве альтернативы прекрасно, но не как основной ответ.
    2015-12-08 14: 44: 54Z
  4. Поскольку другие ответы используют vanilla js, было бы неплохо иметь такой ответ, поскольку многие из нас используют lodash /underscore.
    2016-12-07 16: 13: 40Z
  5. Это неверный ответ , так как сейчас OP требует сделать это в Javascript, а не в библиотеке Javascript, которая импортирует всю библиотеку как зависимость от вашего проекта. Не используйте его.
    2017-02-22 01: 06: 22Z

Мы могли бы получить первого персонажа с одним из моих любимых 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();
  });
};
    
46
2015-06-12 23: 11: 41Z
  1. Существует лучший способделать это без изменения прототипа String.
    2013-07-09 20: 42: 35Z
  2. @ davidkennedy85 Конечно! Но это простой способ, а не лучший способ ...; -)
    2013-07-09 22: 01: 32Z
 
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), просто для удовольствия:

 
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

    
46
2016-12-02 20: 29: 50Z
  1. Я думаю, что это плохое решение по двум причинам: изменение прототипа примитива - плохая идея. Если спецификация меняется, и они решают выбрать «заглавные буквы» в качестве нового имени свойства прото, вы нарушаете функциональность основного языка. Кроме того, выбранное имя метода плохое. На первый взгляд, я думаю, это заглавная строка. Лучше было бы использовать более описательное имя, такое как PHP ucFirst или что-то подобное.
    2017-02-22 01: 08: 08Z
  2. Другой ответ ES6 проще: const capitalize = ([first,...rest]) => first.toUpperCase() + rest.join('').toLowerCase();.
    2019-06-22 05: 50: 17Z

Если вы используете underscore.js или Lo-Dash библиотека underscore.string предоставляет расширения строк, включая использование заглавных букв:

  

_. capitalize (string) Преобразует первую букву строки в   верхний регистр.

Пример: р>  

_.capitalize("foo bar") == "Foo bar"
    
44
2015-09-01 13: 50: 43Z
  1. С тех пор версия 3.0.0 , в Lo-Dash этот строковый метод доступен по умолчанию. Как описано в этом ответе: _.capitalize("foo") === "Foo".
    2015-04-09 19: 09: 20Z
  2. Также есть полезная функция underscore.js с именем humanize. Он преобразует подчеркнутую, верблюжью или разбитую строку в гуманизированную. Также удаляет начальные и конечные пробелы и удаляет постфикс «_id».
    2015-05-07 14: 11: 33Z
  3. Начиная с версии 4 *, Lodash также в нижнем регистре () все остальные буквы, будьте осторожны!
    2016-02-13 08: 33: 28Z

Только CSS

 
p::first-letter {
  text-transform: uppercase;
}
  • Несмотря на то, что его называют ::first-letter , он применяется к первому символу , т. е. в случае строки %a этот селектор будет применяться к %, и поэтому a не будет написан заглавными буквами.
  • В IE9 + или IE5.5 + он поддерживается в устаревшей нотации только с одним двоеточием (:first-letter).

ES2015 однострочный

Поскольку существует множество ответов, но в ES2015 нет ответов, которые бы эффективно решали исходную проблему, я пришел к следующему:

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

Примечания

  •  parameters => function - это так называемая функция стрелок .
  • Я пошел с именем capitalizeFirstChar вместо capitalizeFirstLetter, потому что OP не запрашивал код, который использует первую букву во всей строке, а самый первый символ (если, конечно, это буква).
  •  const дает нам возможность объявить capitalizeFirstChar константой, что желательно, поскольку как программист вы всегда должны явноизложите свои намерения.
  • В тесте, который я провел, не было существенной разницы между string.charAt(0) и string[0]. Обратите внимание, что string[0] будет undefined для пустой строки, поэтому его следует переписать в string && string[0], что является слишком многословным по сравнению с альтернативой.
  •  string.substring(1) быстрее, чем string.slice(1).

Benchmark

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

 Сравнение решений

    
39
2017-09-23 19: 24: 22Z
  1. text-transform: uppercase; не работает.
    2017-10-03 19: 55: 31Z
  2. @ Green: это делает , вы уверены, что указали селектор с двумя двоеточиями?
    2017-10-05 16: 48: 16Z
  3. Вы на самом деле не хотите использовать знак плюс (+) в качестве метода конкатенации в ES6. Вам нужно использовать литералы шаблонов: eslint.org/docs/rules/prefer-templateа>
    2018-03-19 15: 37: 27Z
 
var capitalized = yourstring[0].toUpperCase() + yourstring.substr(1);
    
38
2016-08-25 12: 29: 11Z

В CSS это выглядит проще:

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

Это из свойства преобразования текста в CSS W3Schools ).

    
37
2016-04-21 06: 09: 56Z
  1. @ Simon Не указано, что строка обязательно будет выводиться как часть HTML-документа - CSS будет полезен только в том случае, если он есть.
    2012-01-18 09: 32: 40Z
  2. Адам, правда, но я предполагаю, что более 95% Javascript там используется с HTML & CSS. К сожалению, оператор «прописные буквы» на самом деле заглавные каждое слово , поэтому вам все еще нужно JS, чтобы использовать только первую букву строки.
    2012-01-21 04: 24: 39Z
  3. Неверно, Динеш. Он сказал первый символ строки .
    2012-06-26 00: 02: 22Z
  4. Этот ответ, несмотря на нелепое количество голосов, просто неправильный, поскольку он будет использовать заглавную букву каждого слова. @Ryan, вы получите Дисциплинированный значок , если удалите его. Пожалуйста, сделайте это.
    2012-11-07 06: 06: 50Z
  5. Согласитесь с @DanDascalescu - ответ Райана совершенно неправильный.
    2012-11-14 13: 15: 33Z

Всегда лучше справляться с подобными вещами с помощью 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'
    
37
2018-12-11 09: 16: 10Z

Если вы хотите переформатировать весь заглавные буквы, вы можете изменить другие примеры следующим образом:

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

Это обеспечит изменение следующего текста:

 
TEST => Test
This Is A TeST => This is a test
    
36
2016-04-21 06: 09: 19Z
  1. Вероятно, стоит отметить, что это также преобразует такие вещи, как аббревиатуры, в нижний регистр, поэтому, возможно, не самая лучшая идея в большинстве случаев
    2016-04-25 05: 08: 23Z
  2. Кроме того, действительно ли GAMITG выполнил правку только для удаления части пробела из некодовой части сообщения? О_О
    2016-08-28 03: 25: 05Z
  3. кстати, это нарушит аббревиатуру в верхнем регистре, так что будьте осторожны, все < 3
    2019-03-15 21: 53: 43Z
 
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'
    
34
2015-07-14 19: 41: 19Z
  1. Пожалуйста, объясните код и как он работает
    2015-07-14 14: 47: 11Z
  2. Готово @Ram. Также включены примеры.
    2015-07-23 13: 14: 47Z
  3. Как это лучше, чем ответ 2009 года ?
    2019-01-27 22: 13: 30Z
  4. Это не @DanDascalescu. Я полагаю, вы могли бы утверждать, что substr/substring немного более семантически, чем slice, но это всего лишь вопрос предпочтений. Тем не менее, я включил примеры со строками, приведенными в вопросе, и это приятное прикосновение, которого нет в примере '09. Я, честно говоря, думаю, что это сводится к тому, что мне 15 лет, и мне нужна карма на StackOverflow;)
    2019-06-20 11: 50: 50Z

Вот функция с именем 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, когда вы берете подстроку пустой строки, вы просто возвращаете пустую строку.

    
30
2016-08-12 22: 36: 19Z
  1. Используйте String.substring () или String.slice () ... Не используйте substr () - это устарело.
    2009-06-22 11: 11: 45Z
  2. @ 999: где говорится, что substr() устарела? Это не так , даже сейчас, три года спустя, не говоря уже о том, чтобы в 2009 году вы сделали этот комментарий.
    2012-11-07 06: 12: 41Z
  3. substr() не может быть помечен как устаревший в любой популярной реализации ECMAScript (я сомневаюсь, что он не исчезнет в ближайшее время), но он не является частью спецификации ECMAScript. 3-е издание спецификации упоминает его в ненормативном приложении, чтобы «предложить единую семантику для таких свойств, не делая свойства или их семантику частью этого стандарта».
    2012-11-21 22: 05: 22Z
  4. Наличие трех методов, которые делают одно и то же (substring, substr и slice), слишком много, IMO. Я всегда использую slice, потому что он поддерживает отрицательные индексы, у него нет сбивающего с толку поведения arg-swapping, и его API похож на slice в других языках.
    2012-11-21 22: 12: 12Z
 
String.prototype.capitalize = function(){
    return this.replace( /(^|\s)([a-z])/g , function(m,p1,p2){ return p1+p2.toUpperCase();
    } );
};

Использование:

 
capitalizedString = someString.capitalize();

Это текстовая строка = > Это текстовая строка

    
28
2016-04-21 06: 08: 55Z
  1. Регулярные выражения для этого излишни.
    2012-06-14 02: 40: 35Z
  2. + 1, это то, что я действительно искал. Есть небольшая ошибка, она должна быть return.this.toLocaleLowerCase().replace( ...
    2013-01-14 21: 55: 51Z
  3. + 1, я нашел эту страницу в поисках javascript-версии phps ucfirst, которая, как я подозреваю, такова, как ее находит большинство людей.
    2013-04-09 13: 58: 12Z
  4. @ DanDascalescu Я нашел это полезным, так что +1 утилитаризм и -1 анальная сохранность. Он включил пример, поэтому его функция понятна.
    2013-08-02 10: 24: 50Z
  5. String.prototype.capitalize = function(){ return this.replace( /(^|\s)[a-z]/g , function(m){ return m.toUpperCase(); }); }; Я немного реорганизовал ваш код, вам нужно только первое совпадение.
    2014-04-28 16: 29: 38Z
 
var str = "test string";
str = str.substring(0,1).toUpperCase() + str.substring(1);
    
27
2014-06-05 04: 26: 48Z

Существует очень простой способ реализовать это с помощью replace . Для ECMAScript 6:

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

Результат:

 
'Foo'
    
24
2019-06-13 23: 02: 55Z
  1. Лучший ответ на сегодняшний день и дополнительные баллы за показ синтаксиса регулярных выражений лямбда-выражения. Мне особенно нравится этот, так как он может свободно бегать и вставлять где угодно.
    2019-01-11 00: 14: 44Z

Оформить заказ на это решение.

 
var stringVal = 'master';
stringVal.replace(/^./, stringVal[0].toUpperCase()); // returns Master 
    
21
2015-10-31 09: 49: 01Z
  1. Это должен быть принятый ответ. Основное решение не должно использовать рамки, подобные подчеркиванию.
    2015-09-26 07: 58: 02Z
  2. Сохранение некоторых нажатий клавиш;) stringVal.replace(/^./, stringVal[0].toUpperCase());
    2015-10-15 19: 30: 27Z
  3. Да, это тоже работает.
    2015-10-26 20: 54: 47Z
  4. Регулярное выражение не должно использоваться там, где это не нужно. Это очень неэффективно и не делает код более кратким. Более того, stringVal[0] будет undefined для пустых stringVal, и попытка получить доступ к свойству .toUpperCase() приведет к ошибке.
    2017-09-23 19: 28: 17Z
 
yourString.replace(/^[a-z]/, function(m){ return m.toUpperCase() });

(Вы можете инкапсулировать его в функцию или даже добавить его в прототип String, если будете часто его использовать.)

    
19
2016-08-12 22: 38: 32Z
  1. Несмотря на то, что это имеет довольно много голосов, это самое медленное решение, опубликованное здесь. Я собрал небольшой тест скорости с самыми популярными ответами из этого поста здесь: forwebonly.com/…
    2013-02-13 13: 17: 16Z
  2. @ RobinvanBaalen Ваша ссылка теперь не работает. Есть обновленный?
    2017-01-23 03: 29: 12Z
  3. Регулярное выражение для этого излишне, предпочитайте более простое: str.charAt (0) .toUpperCase () + str.slice (1)
    2017-01-23 13: 36: 38Z
  4. @ Брэд, к сожалению, нет
    2017-01-23 18: 54: 18Z
  5. Часто, если вы хотите решить свою проблему с помощью регулярных выражений, вы сталкиваетесь с двумя проблемами.
    2017-09-23 19: 18: 54Z

Функция ucfirst работает, если вы делаете это следующим образом.

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

Спасибо J-P за акларацию.

    
17
2016-04-21 06: 08: 42Z
  1. хорошее имя для функции! Его имя идентично эквиваленту PHP. На самом деле есть целая библиотека PHP-функций, написанных на JS; он называется PHP.js и находится на http://phpjs.org
    2011-12-08 14: 29: 12Z
  2. Одна строка: string[0].toUpperCase() + string.substring(1)
    2015-11-25 04: 01: 07Z
  3. @ Hussam URL-адрес изменен на: locutusjs.io
    2016-05-05 10: 08: 54Z
  4. @ dr.dimitru не будет работать с пустой строкой
    2016-05-06 16: 25: 17Z
  5. @ TarranJones здесь является пуленепробиваемым одним вкладышем: (string[0] || '').toUpperCase() + string.substring(1)
2016-05-06 18: 20: 35Z
 
yourString.replace(/\w/, c => c.toUpperCase())

Я нашел эту функцию стрелки проще всего. Заменить соответствует символу первой буквы ( \w) вашей строки и преобразует ее в верхний регистр. Ничего более сложного не нужно.

    
16
2018-07-14 19: 40: 37Z
  1. Это должен быть принятый ответ, вместо этого он является почти последним, поскольку SO продолжает присваивать устаревшие вопросы. Кстати, лучше использовать /./ по двум причинам: /\w/ пропустит все предыдущие не буквенные символы (поэтому @@ abc станет @@ Abc), а затем не будет работать с нелатинскими символами
    2019-04-29 18: 01: 22Z

Использование:

р>

 
var str = "ruby java";

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

Он выведет "Ruby java" на консоль.

    
16
2019-06-13 23: 11: 38Z
  1. Как сейчас, он ничего не вернет.
    2014-09-25 17: 13: 28Z
  2. @ Себастьян Я прикрепил источник jsfiddle и ссылку на результат
    2014-09-25 17: 21: 08Z
  3. Я думаю, что вышеупомянутое является самым простым, и любой может проверить это на консоли браузера
    2019-06-20 03: 50: 49Z

Вы можете сделать это в одну строку следующим образом

 
string[0].toUpperCase() + string.substring(1)
    
15
2018-01-22 18: 27: 10Z
  1. Этот ответ уже был дан в 2009 году .
    2019-01-27 22: 11: 28Z
источник размещен Вот