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

Например:

  • "this is a test""This is a test"
  • "the Eiffel Tower""The Eiffel Tower"
  • "/index.html""/index.html"
4456
Robert Wills 22 Июн 2009 в 12:25
18
Underscore имеет плагин под названием underscore.string, который включает в себя этот и множество других замечательных инструментов.
 – 
Aaron
15 Апр 2013 в 23:16
216
Проще: string[0].toUpperCase() + string.substring(1)
 – 
dr.dimitru
25 Ноя 2015 в 07:00
50
`${s[0].toUpperCase()}${s.slice(1)}`
 – 
eaorak
2 Ноя 2019 в 23:20
9
([initial, ...rest]) => [initial.toUpperCase(), ...rest].join("")
 – 
Константин Ван
6 Янв 2020 в 09:49
9
Делайте каждое слово заглавным: str.replace(/(^\w|\s\w)/g, m => m.toUpperCase())
 – 
chickens
12 Мар 2020 в 16:14

30 ответов

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

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

Это из свойства CSS text-transform ( в W3Schools).

41
Katinka Hesselink 2 Сен 2021 в 14:42
30
Не указано, что строка обязательно будет выводиться как часть HTML-документа — CSS будет полезен только в том случае, если это так.
 – 
Adam Hepton
18 Янв 2012 в 13:32
10
Адам, да, но я предполагаю, что более 95% Javascript используется с HTML и CSS. К сожалению, оператор «capitalize» на самом деле делает заглавными каждое слово, поэтому вам все равно потребуется JS, чтобы использовать только первую букву строки.
 – 
Simon East
21 Янв 2012 в 08:24
18
Неправильно, Динеш. Он сказал первый символ строки.
 – 
Simon East
26 Июн 2012 в 04:02
82
Этот ответ, несмотря на смехотворное количество голосов, просто неверен, так как первая буква каждого слова будет заглавной. @Ryan, вы получите значок Disciplined, если удалите его. Пожалуйста, сделайте это.
 – 
Dan Dascalescu
7 Ноя 2012 в 10:06
6
Теперь это javascript: $('.capitalize').css('text-transform', 'capitalize')
 – 
Ali Gangji
13 Апр 2013 в 12:58
var capitalized = yourstring[0].toUpperCase() + yourstring.substr(1);
40
zianwar 25 Авг 2016 в 15:29

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

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

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

TEST => Test
This Is A TeST => This is a test
39
GAMITG 21 Апр 2016 в 09:09
Вероятно, стоит отметить, что это также преобразует такие вещи, как аббревиатуры, в нижний регистр, поэтому, возможно, в большинстве случаев это не лучшая идея.
 – 
monokrome
25 Апр 2016 в 08:08
Кроме того, GAMITG действительно внес изменения только для того, чтобы удалить часть пробела из части сообщения, не связанной с кодом? О_О
 – 
monokrome
28 Авг 2016 в 06:25
Кстати, это сломает аббревиатуры в верхнем регистре, так что будьте осторожны <3
 – 
monokrome
16 Мар 2019 в 00:53
yourString.replace(/^[a-z]/, function(m){ return m.toUpperCase() });

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

20
Peter Mortensen 13 Авг 2016 в 01:38
5
Несмотря на то, что у этого есть довольно много голосов, это, безусловно, самое медленное решение, опубликованное здесь. Я собрал небольшой тест скорости с самыми популярными ответами из этого поста, здесь: forwebonly.com/…
 – 
Robin van Baalen
13 Фев 2013 в 17:17
Ваша ссылка теперь не работает. Есть обновленный?
 – 
Brad
23 Янв 2017 в 06:29
1
Регулярное выражение для этого излишне, предпочитайте более простое: str.charAt(0).toUpperCase() + str.slice(1)
 – 
Simon
23 Янв 2017 в 16:36
К сожалению нет
 – 
Robin van Baalen
23 Янв 2017 в 21:54
Часто, если вы хотите решить свою проблему с помощью регулярных выражений, у вас возникают две проблемы.
 – 
Przemek
23 Сен 2017 в 22:18

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

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

Спасибо J-P за заявление.

20
GAMITG 21 Апр 2016 в 09:08
2
Хорошее название для функции! Его имя идентично эквиваленту PHP. На самом деле существует целая библиотека PHP-функций, написанных на JS; он называется PHP.js и находится на http://phpjs.org.
 – 
Hussam
8 Дек 2011 в 18:29
11
Один вкладыш: string[0].toUpperCase() + string.substring(1)
 – 
dr.dimitru
25 Ноя 2015 в 07:01
Вот пуленепробиваемый вкладыш: (string[0] || '').toUpperCase() + string.substring(1)
 – 
dr.dimitru
6 Май 2016 в 21:20
@dr.dimitru: Вместо идиоматического (string[0] || '') вы могли бы просто string.charAt(0).
 – 
Przemek
24 Апр 2017 в 21:24
1
Что такое "заявление"?
 – 
Peter Mortensen
7 Янв 2021 в 02:34

Вы можете сделать это в одной строке, как это

string[0].toUpperCase() + string.substring(1)
18
Qwerty 22 Янв 2018 в 21:27
Этот ответ уже был дан в 2009 году.
 – 
Dan Dascalescu
28 Янв 2019 в 01:11
yourString.replace(/\w/, c => c.toUpperCase())

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

31
Peter Mortensen 7 Янв 2021 в 02:13
5
Это должен быть принятый ответ, вместо этого он почти последний, поскольку SO продолжает присуждать устаревшие вопросы. Кстати, лучше использовать /./ по двум причинам: /\w/ пропустит все предыдущие небуквенные символы (поэтому @@abc станет @@Abc), а затем не работает с не-латиницей символы
 – 
Cristian Traìna
29 Апр 2019 в 21:01

Мы могли бы получить первого персонажа с одним из моих любимых 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();
  });
};
53
yckart 13 Июн 2015 в 02:11
2
Есть лучший способ сделать это без изменения прототипа String.
 – 
Big McLargeHuge
10 Июл 2013 в 00:42
2
Конечно! Но это простой способ, а не лучший способ... ;-)
 – 
yckart
10 Июл 2013 в 02:01
Господи, на этот вопрос есть миллион ответов! Ваше решение выглядит еще лучше в es6. 'Answer'.replace(/^./, v => v.toLowerCase())
 – 
stwilz
29 Июл 2019 в 03:40
Что вы имеете ввиду под словом "кофе"? "CoffeeScript"?
 – 
Peter Mortensen
7 Янв 2021 в 02:38

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

var str = "ruby java";

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

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

51
Peter Mortensen 14 Июн 2019 в 02:11
Одноканальное решение.
 – 
Ahmad Sharif
18 Мар 2020 в 18:33

Если вы используете Underscore.js или Lodash, библиотека underscore.string предоставляет расширения строк, в том числе капитализацию :

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

Примере:

_.capitalize("foo bar") == "Foo bar"
48
Peter Mortensen 7 Янв 2021 в 02:18
3
Начиная с версии 3.0.0, в Lo-Dash используется этот строковый метод доступно по умолчанию. Как описано в этом ответе: _.capitalize("foo") === "Foo".
 – 
bardzusny
9 Апр 2015 в 22:09
Также есть полезная функция underscore.js, называемая humanize. Он преобразует подчеркнутую, верблюжью или штриховую строку в гуманизированную. Также удаляются начальные и конечные пробелы и удаляется постфикс «_id».
 – 
Stepan Zakharov
7 Май 2015 в 17:11
2
Начиная с версии 4*, Lodash также использует строчные буквы() для каждой второй буквы, будьте осторожны!
 – 
Igor Loskutov
13 Фев 2016 в 11:33
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'
35
Fredrik A. 14 Июл 2015 в 22:41
Готово @Рам. Также включены примеры.
 – 
Fredrik A.
23 Июл 2015 в 16:14
Чем это лучше, чем ответ 2009 года?
 – 
Dan Dascalescu
28 Янв 2019 в 01:13
1
Это не @DanDascalescu. Я полагаю, вы могли бы возразить, что substr/substring немного более семантичен, чем slice, но это просто вопрос предпочтений. Однако я включил примеры со строками, указанными в вопросе, что является приятным штрихом, которого нет в примере '09. Я честно думаю, что это сводится к тому, что мне 15 лет, и я хочу получить карму на StackOverflow;)
 – 
Fredrik A.
20 Июн 2019 в 14:50
String.prototype.capitalize = function(){
    return this.replace(/(^|\s)([a-z])/g, 
                        function(m, p1, p2) {
                            return p1 + p2.toUpperCase();
                        });
};

Применение:

capitalizedString = someString.capitalize();

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

34
Peter Mortensen 7 Янв 2021 в 02:35
+1, это то, что я действительно искал. Однако есть небольшая ошибка, она должна быть return.this.toLocaleLowerCase().replace( ...
 – 
tomdemuyt
15 Янв 2013 в 01:55
+1, я нашел эту страницу в поисках javascript-версии phps ucfirst, которую, как я подозреваю, находит большинство людей.
 – 
Benubird
9 Апр 2013 в 17:58
Я нашел это полезным, так что +1 к утилитаризму и -1 к анальному сохранению. Он включил пример, поэтому его функция ясна.
 – 
Travis Webb
2 Авг 2013 в 14:24
String.prototype.capitalize = function(){ return this.replace( /(^|\s)[a-z]/g , function(m){ return m.toUpperCase(); }); }; Я немного рефакторинг вашего кода, вам нужно только первое совпадение.
 – 
IGRACH
28 Апр 2014 в 20:29
Во-первых, он делает что-то другое, чем запросил OP, во-вторых, регулярное выражение в этом случае является неэффективным излишним, и, наконец, не изменяйте прототипы того, чем вы не владеете.
 – 
Przemek
23 Сен 2017 в 22:32
var str = "test string";
str = str.substring(0,1).toUpperCase() + str.substring(1);
30
MaxEcho 5 Июн 2014 в 08:26

Посмотрите это решение:

var stringVal = 'master';
stringVal.replace(/^./, stringVal[0].toUpperCase()); // Returns Master
23
Peter Mortensen 7 Янв 2021 в 02:24
3
Сэкономьте несколько нажатий клавиш ;) stringVal.replace(/^./, stringVal[0].toUpperCase());
 – 
Alfredo Delgado
15 Окт 2015 в 22:30
2
Regex не следует использовать там, где это не нужно. Это очень неэффективно и не делает код более кратким. Кроме того, stringVal[0] будет undefined для пустого stringVal, и поэтому попытка доступа к свойству .toUpperCase() вызовет ошибку.
 – 
Przemek
23 Сен 2017 в 22:28

Базовое решение:

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

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

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

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

Если вы хотите работать с кодовыми точками Unicode вместо кодовых единиц (например, для обработки символов Unicode за пределами базовой многоязычной плоскости), вы можете использовать тот факт, что String#[@iterator] работает с кодовыми точками, и вы можете использовать toLocaleUpperCase чтобы получить верхний регистр с учетом локали:

const capitalizeFirstLetter = ([ first, ...rest ], locale = navigator.language) =>
  first.toLocaleUpperCase(locale) + rest.join('')

console.log(
  capitalizeFirstLetter('foo'), // Foo
  capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉"), // "𐐎𐐲𐑌𐐼𐐲𐑉" (correct!)
  capitalizeFirstLetter("italya", 'tr') // İtalya" (correct in Turkish Latin!)
)

Дополнительные варианты интернационализации см. в исходном ответе ниже.

6800
vsync 19 Дек 2020 в 12:40

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

Object.defineProperty(String.prototype, 'capitalize', {
  value: function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
  },
  enumerable: false
});

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

"hello, world!".capitalize();

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

"Hello, world!"
1539
Gershom Maes 15 Окт 2021 в 00:10
Вы можете объяснить, почему? почти 1500 голосов за этот ответ. Поэтому без объяснений люди просто проигнорируют вас. Как я, потому что я собираюсь сделать это.
 – 
Niels Lucas
30 Июн 2021 в 17:36
17
Справедливо. Он может сломать будущие дополнения к JS. Если это код, который будете использовать только вы, то это не так уж и плохо — вы просто обновляете свой код и двигаетесь дальше. Настоящая проблема здесь возникает, когда вы начинаете публиковать библиотеки с таким кодом: ваш код изменяет встроенное поведение для каждой библиотеки, использующей ваш код. Следствием этого является то, что если вы и другой автор библиотеки переопределяете одни и те же встроенные функции своими собственными реализациями, вы создаете ошибки в коде другой библиотеки (или в зависимости от того, что загружается последним), оставляя пользователя в аду отладки невоспроизводимых отчетов об ошибках.
 – 
aggregate1166877
1 Июл 2021 в 06:52
1
Спасибо за объяснение. Я полностью согласен с вами, что этот способ НЕ будет хорошей практикой для создания библиотеки, и я также согласен, что этот способ подходит для проекта. Надеюсь, люди прочитают это, потому что я думаю, что это хорошее внимание к исходному ответу.
 – 
Niels Lucas
1 Июл 2021 в 16:59
Извините, но нет, просто не добавляйте никаких функций к базовым типам. продлить их? const ExtendedString = class extends String { capitalize () { return this[0].toUpperCase() + this.slice(1) } } const s = new ExtendedString('hello') console.log(s.capitalize())
 – 
Martijn Scheffer
26 Окт 2021 в 17:01
Было бы здорово, если бы автор включил некоторые из этих заявлений об отказе от ответственности и подробности о расширении встроенных типов в пост. Людям трудно заметить комментарии.
 – 
brandonscript
13 Дек 2021 в 19:50

В CSS:

p:first-letter {
    text-transform:capitalize;
}
770
Peter Mortensen 13 Авг 2016 в 01:36
159
$('#mystring_id').текст(строка).css('текст-преобразование','заглавные буквы');
 – 
DonMB
24 Сен 2015 в 20:34
36
Кроме того, это влияет только на отображение строки, а не на фактическое значение. Например, если оно находится в форме, значение все равно будет отправлено как есть.
 – 
dmansfield
7 Июн 2016 в 16:26
Вопрос был о javascript, а не css
 – 
Martijn Scheffer
26 Окт 2021 в 17:04
Это также комментарий 9-летней давности
 – 
monsto
26 Окт 2021 в 19:50
Это не JS, но держу пари, это лучший ответ для 99% людей, читающих это. Я конечно рад, что прокрутил так далеко 🙃
 – 
Alesh Houdek
5 Дек 2021 в 16:10

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

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

ЕС версия

const capitalize = s => s && s[0].toUpperCase() + s.slice(1)

// to always return type string event when s may be falsy other than empty-string
const capitalize = s => (s && s[0].toUpperCase() + s.slice(1)) || ""
404
Aakash 30 Май 2021 в 10:40
Просто используйте charAt() вместо []
 – 
Martijn Scheffer
26 Окт 2021 в 17:05

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

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

243
Community 20 Июн 2020 в 12:12
Интересно, почему этот последний метод такой медленный, вы прикрепляете функцию к прототипу на каждой итерации? это было бы несправедливо
 – 
Martijn Scheffer
26 Окт 2021 в 17:06

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

//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();
162
alejandro 6 Июн 2018 в 00:49

Это решение 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
92
Peter Mortensen 14 Июн 2019 в 02:03

Если вы уже используете (или планируете) использовать 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'

Ванильный JavaScript для первого верхнего регистра:

function upperCaseFirst(str){
    return str.charAt(0).toUpperCase() + str.substring(1);
}
82
Peter Mortensen 7 Янв 2021 в 02:25
14
Я думаю, что предпочтение должно отдаваться vanilla Js, поскольку большинство людей не будут загружать всю структуру только для того, чтобы использовать строку с заглавной буквы.
 – 
GGG
7 Дек 2015 в 02:49
8
Во всех моих проектах я никогда не использовал lodash. Не забывайте также, что большинство людей в Google заканчивают работу на этой странице, и перечисление фреймворка в качестве альтернативы — это нормально, но не в качестве основного ответа.
 – 
GGG
8 Дек 2015 в 17:44
Во всех моих проектах я использовал lodash.
 – 
Hemerson Varela
24 Июн 2021 в 16:31
1
Ванильный js лучше, чем lodash. Больше никто не использует.
 – 
chovy
26 Июн 2021 в 09:59
2
Я посмотрел его на npm, и за последнюю неделю его скачали примерно 40 276 984 раза, и он зависит от примерно 144 000 пакетов. Я бы не сказал, что этим никто не пользуется.
 – 
Script47
23 Сен 2021 в 02:02

Сделать заглавной первую букву всех слов в строке:

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(" ");
}
68
GAMITG 21 Апр 2016 в 09:09
16
Перечитайте вопрос: я хочу сделать первый символ строки заглавным, но не менять регистр других букв.
 – 
JimmyPena
30 Ноя 2011 в 23:13
2
Я знаю, что я сделал. Я бы добавил одну вещь на случай, если вся строка начинается с заглавной буквы: piece[i] = j + piece[i].substr(1).toLowerCase();
 – 
Malovich
21 Дек 2012 в 01:16
5
Другое решение в этом случае: function capitaliseFirstLetters(s) { return s.split(" ").map(function(w) { return w.charAt(0).toUpperCase() + w.substr(1) }).join (" ") } Может быть хорошим однострочником, если он не помещен в функцию.
 – 
Luke Channings
11 Мар 2013 в 01:36
Было бы лучше сначала сделать строчными всю строку
 – 
Magico
6 Июл 2016 в 13:36
1
Помимо того, что эта функция не отвечает на вопрос, на самом деле она также слишком сложна. s => s.split(' ').map(x => x[0].toUpperCase() + x.slice(1)).join(' ')
 – 
OverCoder
28 Июл 2017 в 21:10

Только CSS

Если преобразование нужно только для отображения на веб-странице:

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

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

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

Замечания

  • В тесте, который я выполнил, не было существенной разницы между string.charAt(0) и string[0]. Обратите внимание, однако, что string[0] будет undefined для пустой строки, поэтому функцию придется переписать, чтобы использовать "string && string[0]", что слишком многословно по сравнению с альтернативой.
  • string.substring(1) быстрее, чем string.slice(1).

Сравнение между substring() и slice()

В настоящее время разница довольно незначительна (проведите тест самостоятельно):

  • 21 580 613,15 операций/с ±1,6% для substring(),
  • 21 096 394,34 операции/с ±1,8% (на 2,24% медленнее) для slice().

Solutions' comparison

65
Przemek 21 Фев 2021 в 20:39
2
На самом деле вы не хотите использовать знак плюс (+) в качестве метода конкатенации в ES6. Вы можете использовать литералы шаблонов: eslint.org/docs/rules/prefer-template
 – 
Sterling Bourne
19 Мар 2018 в 18:37

Всегда лучше обрабатывать такие вещи с помощью сначала 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'
capitalizeTxt('dezfoolian');  // return 'Dezfoolian'

Если вы хотите использовать его снова и снова, лучше прикрепить его к собственной строке 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'
58
Alireza 15 Авг 2021 в 06:45
String.prototype.capitalize = function(allWords) {
   return (allWords) ? // If all words
      this.split(' ').map(word => word.capitalize()).join(' ') : // Break down the phrase to words and then recursive
                                                                 // calls until capitalizing all words
      this.charAt(0).toUpperCase() + this.slice(1); // If allWords is undefined, capitalize only the first word,
                                                    // meaning the first character 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 character which is capitalized by
                                                        // the `toUpperCase()` method
 ).join('')                                             // Return back to string

Затем capitalize("hello") // Hello

57
Peter Mortensen 7 Янв 2021 в 02:43
6
Я думаю, что это плохое решение по двум причинам: Изменение прототипа примитива — плохая идея. Если спецификация изменится, и они решат выбрать «capitalize» в качестве имени нового прото-свойства, вы нарушите базовую функциональность языка. Кроме того, выбранное имя метода плохое. На первый взгляд, я бы подумал, что это будет использовать всю строку с большой буквы. Использование более описательного имени, такого как PHP ucFirst или что-то подобное, может быть лучшей идеей.
 – 
dudewad
22 Фев 2017 в 04:08
Другой ответ ES6 проще: const capitalize = ([first,...rest]) => first.toUpperCase() + rest.join('').toLowerCase();.
 – 
Dan Dascalescu
22 Июн 2019 в 08:50
1
В css заглавная буква первой буквы слова называется «заглавной», и если вы хотите использовать заглавные буквы для всех символов, используйте «верхний регистр», поэтому это не очень плохой выбор.
 – 
Someone Special
25 Янв 2021 в 13:56

САМОЕ КРАТКОЕ 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()) );
53
Kamil Kiełczewski 17 Июн 2019 в 14:45

Вот функция с именем ucfirst()(сокращение от "первая буква в верхнем регистре"):

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

Вы можете написать строку с заглавной буквы, вызвав ucfirst("some string") -- например,

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

Он работает, разделяя строку на две части. В первой строке он извлекает firstLetter, а затем во второй строке делает firstLetter заглавной, вызывая firstLetter.toUpperCase(), и объединяет его с остальной частью строки, которая находится при вызове str.substr(1).

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

52
SK-the-Learner 9 Мар 2021 в 19:51
9
@999: где сказано, что substr() устарел? Это не так, даже сейчас, три года спустя, не говоря уже о 2009 году, когда вы сделали этот комментарий.
 – 
Dan Dascalescu
7 Ноя 2012 в 10:12
substr() не может быть помечен как устаревший в какой-либо популярной реализации ECMAScript (я сомневаюсь, что он не исчезнет в ближайшее время), но он не является частью спецификации ECMAScript. В 3-м издании спецификации это упоминается в ненормативном приложении, чтобы «предложить единую семантику для таких свойств, не делая свойства или их семантику частью этого стандарта».
 – 
Peter Rust
22 Ноя 2012 в 02:05
3
Иметь 3 метода, которые делают одно и то же (substring, substr и slice), слишком много, IMO. Я всегда использую slice, потому что он поддерживает отрицательные индексы, у него нет запутанного поведения при замене аргументов, а его API похож на slice в других языках.
 – 
Peter Rust
22 Ноя 2012 в 02:12

Только потому, что это действительно однострочник, я включу этот ответ. Это интерполированная строка на основе ES6 с интерполированной строкой.

let setStringName = 'the Eiffel Tower';
setStringName = `${setStringName[0].toUpperCase()}${setStringName.substring(1)}`;
22
Peter Mortensen 7 Янв 2021 в 01:22

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

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

Результат:

'Foo'
61
Peter Mortensen 14 Июн 2019 в 02:02
2
Лучший ответ на сегодняшний день и дополнительные баллы за демонстрацию синтаксиса лямбда регулярного выражения. Мне особенно нравится этот, так как его можно свободно вырезать и вставлять в любом месте.
 – 
Wade Hatler
11 Янв 2019 в 03:14
Использование /^[a-z]/i будет лучше, чем использование ., поскольку предыдущий не будет пытаться заменить какой-либо символ, кроме алфавита.
 – 
Code Maniac
6 Июл 2019 в 08:56
Действительно, очень умно!
 – 
codemonkey
2 Авг 2020 в 07:19
Столько языков и букв кроме [a-z]
 – 
msdos
12 Сен 2021 в 02:20