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

Question

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

Например:

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

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

Пример:

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

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

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

Answer 9

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

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

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

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

Answer 10

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'