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

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

Например:

"this is a test" → "this is a test"
"the Eiffel Tower" → "the Eiffel Tower"
"/index.html" → "/index.html"

Ответы

Ответ 1

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

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

Ответ 2

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

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

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

"hello world".capitalize();

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

"Hello world"

Ответ 3

В CSS:

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

Ответ 4

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

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

Ответ 5

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

Первое решение в 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(" ");
}

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

Это решение 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

Ответ 9

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

Ответ 10

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

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

Ответ 11

Если вы уже (или рассматриваете) с помощью 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);
}

Ответ 12

Мы могли бы получить первого персонажа с одним из моих любимых 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();
  });
};

Ответ 13

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

Ответ 14

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

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

Пример:

_.capitalize("foo bar") == "Foo bar"

Ответ 15

Только 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.

Ответ 16

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

Ответ 17

В CSS это кажется проще:

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

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

Ответ 18

Всегда лучше сначала обрабатывать такие вещи, используя 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'

Ответ 19

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

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

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

TEST => Test
This Is A TeST => This is a test

Ответ 20

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

var str = "ruby java";

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

Ответ 21

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'

Ответ 22

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

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

Результат:

'Foo'

Ответ 23

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

Ответ 24

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

Ответ 25

Кратчайшие 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()) );

Ответ 26

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

Ответ 27

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

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

Ответ 28

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

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

Ответ 29

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

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

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

Ответ 30

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

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