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

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

Например:

  • "this is a test""this is a test"
  • "the Eiffel Tower""the Eiffel Tower"
  • "/index.html""/index.html"
3140
задан Robert Wills 22 июня '09 в 11:25
источник поделиться
77 ответов
  • 1
  • 2
  • 3
function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

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

4979
ответ дан Steve Harrison 22 июня '09 в 11:30
источник поделиться

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

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

И затем:

"hello world".capitalize();  =>  "Hello world" 
1222
ответ дан Steve Hansell 20 июля '10 в 18:51
источник поделиться

В CSS:

p:first-letter {
    text-transform:capitalize;
}
437
ответ дан sam6ber 17 июля '12 в 17:06
источник поделиться

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

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);
}
247
ответ дан joelvh 29 авг. '11 в 2:03
источник поделиться

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

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

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

145
ответ дан Josh Crozier 14 нояб. '15 в 6:26
источник поделиться

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

//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();
133
ответ дан alejandro 19 июля '13 в 21:17
источник поделиться

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

Первое решение в CSS:

p {
  text-transform: capitalize;
}

Второе решение:

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

Вы также можете добавить его в String.prototype чтобы вы могли 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(" ");
}
132
ответ дан Kamil Ibadov 16 февр. '17 в 8:30
источник поделиться
var string = "hello world";
string = string.charAt(0).toUpperCase() + string.slice(1);
alert(string);
63
ответ дан Anup 17 июля '13 в 9: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
ответ дан Dan 30 нояб. '11 в 20:16
источник поделиться

Это решение 2018 года ES6+:

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
52
ответ дан Sterling Bourne 19 марта '18 в 18:32
источник поделиться

Если вы уже (или рассматриваете) с помощью 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);
}
48
ответ дан chovy 29 нояб. '15 в 11:13
источник поделиться

Мы могли бы получить первого персонажа с одним из моих любимых 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();
  });
};
45
ответ дан yckart 15 февр. '13 в 9:55
источник поделиться
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"

Обновление Nov.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

44
ответ дан Abdennour TOUMI 29 нояб. '13 в 23:01
источник поделиться

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

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

Пример:

_.capitalize("foo bar") == "Foo bar"
42
ответ дан andersh 12 июня '14 в 11:00
источник поделиться
var capitalized = yourstring[0].toUpperCase() + yourstring.substr(1);
37
ответ дан zianwar 25 авг. '16 в 15:29
источник поделиться

Кажется, что в CSS проще:

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

Это от CSS text-transform Свойство (at W3Schools).

35
ответ дан Ryan 09 дек. '11 в 3:27
источник поделиться
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
ответ дан Fredrik A. 13 июля '15 в 23:34
источник поделиться

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

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

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

TEST => Test
This Is A TeST => This is a test
34
ответ дан monokrome 08 авг. '11 в 19:55
источник поделиться

Только 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 не запрашивал код, который заглавывает первую букву во всей строке, но самый первый char (если это письмо, конечно).
  • 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 ops/s ± 1,2% за самый проголосовавший ответ.
  • Создано с JSBench.me в Google Chrome 57.

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

33
ответ дан Przemek 05 апр. '17 в 20:21
источник поделиться
String.prototype.capitalize = function(){
    return this.replace( /(^|\s)([a-z])/g , function(m,p1,p2){ return p1+p2.toUpperCase();
    } );
};

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

capitalizedString = someString.capitalize();

Это текстовая строка = > This Is A Text String

27
ответ дан Murat Kucukosman 15 дек. '10 в 13:15
источник поделиться
var str = "test string";
str = str.substring(0,1).toUpperCase() + str.substring(1);
26
ответ дан Salim 06 мая '14 в 8:15
источник поделиться

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

26
ответ дан Robert Wills 22 июня '09 в 11:33
источник поделиться

Всегда лучше сначала обрабатывать такие вещи, используя CSS, в общем, если вы можете решить что-то с помощью CSS, сначала сделайте это, затем попробуйте JavaScript, чтобы решить ваши проблемы, поэтому в этом случае попробуйте использовать :first-letter in 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'

Если вы хотите использовать его снова и снова, лучше присоединить его к нативной String 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'
22
ответ дан Alireza 14 мая '17 в 11:12
источник поделиться

Зарезервируйте это решение:

var stringVal = 'master';
stringVal.replace(/^./, stringVal[0].toUpperCase()); // returns Master 
20
ответ дан Raju Bera 23 авг. '15 в 15:51
источник поделиться
yourString.replace(/^[a-z]/, function(m){ return m.toUpperCase() });

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

19
ответ дан Simon 19 нояб. '12 в 21:33
источник поделиться

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

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

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

17
ответ дан raphie 19 авг. '10 в 0:07
источник поделиться

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

string[0].toUpperCase() + string.substring(1)
15
ответ дан Qwerty 22 янв. '18 в 21:27
источник поделиться
yourString.replace(/\w/, c => c.toUpperCase())

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

14
ответ дан Wolf 14 июля '18 в 22:40
источник поделиться

В CoffeeScript добавьте в прототип строки:

String::capitalize = ->
  @substr(0, 1).toUpperCase() + @substr(1)

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

"woobie".capitalize()

Что дает:

"Woobie"
13
ответ дан longda 15 авг. '12 в 21:06
источник поделиться

Функциональный подход

const capitalize = ([s, ...tring]) =>
  [s.toUpperCase(), ...tring]
    .join('');

Тогда вы могли бы

const titleCase = str => 
  str
    .split(' ')
    .map(capitalize)
    .join(' ')
12
ответ дан Benny Powers 10 авг. '18 в 16:42
источник поделиться
  • 1
  • 2
  • 3

Другие вопросы по меткам или Задайте вопрос