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

Question

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

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

Например:

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

5197

javascript string letter capitalize

Источник

user126778 22 июн '09 в 08:25

134 ответа

«
1
2
3
4
5
»

«
1
2
3
4
5
»

Другие вопросы по тегам javascript string letter capitalize

user48492 22 июн '09 в 08:30 2009-06-22 08:30 · Answer 1 · 2009-06-22 08:30

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

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

user171490 20 июл '10 в 15:51 2010-07-20 15:51 · Answer 2 · 2010-07-20 15:51

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

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

А потом:

"hello world".capitalize();  =>  "Hello world"

1629

Источник

user171490 20 июл '10 в 15:51

user1532041 17 июл '12 в 14:06 2012-07-17 14:06 · Answer 3 · 2012-07-17 14:06

В CSS:

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

1065

Источник

user1532041 17 июл '12 в 14:06

user105565 28 авг '11 в 23:03 2011-08-28 23:03 · Answer 4 · 2011-08-28 23:03

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

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

user2680216 14 ноя '15 в 03:26 2015-11-14 03:26 · Answer 5 · 2015-11-14 03:26

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

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

user1631952 26 дек '18 в 10:33 2018-12-26 10:33 · Answer 6 · 2018-12-26 10:33

Я не видел никаких упоминаний в существующих ответах на вопросы, связанные с ~~кодовыми точками астрального плана или~~ интернационализацией. "Прописные буквы" не означают одно и то же в каждом языке, использующем данный скрипт.

Изначально я не видел ответов на вопросы, связанные с кодовыми точками астрального плана. Существует, но он немного похоронен (как этот, я думаю!)

Большинство предлагаемых функций выглядят так:

function capitalizeFirstLetter(str) {
  return str[0].toUpperCase() + str.slice(1);
}

Однако некоторые прописные символы находятся за пределами BMP (базовая многоязычная плоскость, кодовые точки от U+0 до U+FFFF). Например, возьмите этот текст Deseret:

capitalizeFirstLetter(""); // ""

Первый символ здесь не может быть написан заглавными буквами, потому что индексированные в массиве свойства строк не имеют доступа к символам или кодам. Они имеют доступ к кодовым единицам UTF-16. Это верно и при разрезании - значения индекса указывают на единицы кода.

Случается, что кодовые единицы UTF-16 составляют 1:1 для кодовых точек для кодовых точек в двух диапазонах: от U+0 до U+D7FF и от U+E000 до U+FFFF. Большинство описанных персонажей попадают в эти два диапазона, но не все.

С ES2015 справиться с этим стало немного легче. String.prototype[@@iterator] дает строки, соответствующие кодовым точкам *. Так, например, мы можем сделать это:

function capitalizeFirstLetter([ first, ...rest ]) {
  return [ first.toUpperCase(), ...rest ].join('');
}

capitalizeFirstLetter("") // ""

Для более длинных строк это, вероятно, не очень эффективно ** - нам не нужно итерировать остаток. Мы могли бы использовать String.prototype.codePointAt чтобы получить это первое (возможное) письмо, но нам все равно нужно определить, где должен начинаться срез. Один из способов избежать итерации остатка - проверить, находится ли первая кодовая точка вне BMP; если это не так, срез начинается с 1, а если это так, срез начинается с 2.

function capitalizeFirstLetter(str) {
  const firstCP = str.codePointAt(0);
  const index = firstCP > 0xFFFF ? 2 : 1;

  return String.fromCodePoint(firstCP).toUpperCase() + str.slice(index);
}

capitalizeFirstLetter("") // ""

Мы также можем сделать эту работу в ES5 и ниже, взяв эту логику немного дальше, если это необходимо. В ES5 нет встроенных методов для работы с кодовыми точками, поэтому мы должны вручную проверить, является ли первая единица кода суррогатом ***:

function capitalizeFirstLetter(str) {
  var firstCodeUnit = str[0];

  if (firstCodeUnit < '\uD800' || firstCodeUnit > '\uDFFF') {
    return str[0].toUpperCase() + str.slice(1);
  }

  return str.slice(0, 2).toUpperCase() + str.slice(2);
}

capitalizeFirstLetter("") // ""

В начале я также упомянул соображения интернационализации. Некоторые из них очень трудно объяснить, потому что они требуют знания не только того, какой язык используется, но также могут требовать определенных знаний слов в языке. Например, ирландский орграф "mb" пишется с заглавной буквы как "mB" в начале слова, и хотя немецкий eszett никогда не начинает слово (afaik), это означает, что нижний регистр от "SS" на немецком языке требует дополнительных знаний (это может быть "ss" или это может быть "ß", в зависимости от слова).

Самый известный пример этого выпуска, вероятно, турецкий. В турецкой латыни заглавная форма i - это İ, а строчная форма I - ı - это две разные буквы. К счастью, у нас есть способ объяснить это:

function capitalizeFirstLetter([ first, ...rest ], locale) {
  return [ first.toLocaleUpperCase(locale), ...rest ].join('');
}

capitalizeFirstLetter("italya", "en") // "Italya"
capitalizeFirstLetter("italya", "tr") // "İtalya"

В браузере наиболее предпочтительный языковой тег пользователя обозначается как navigator.language список в порядке предпочтения находится на navigator.languages и язык данного элемента DOM может быть получен с Object(element.closest('[lang]')).lang || YOUR_DEFAULT_HERE,

По всей вероятности, люди, задающие этот вопрос, не будут связаны с капитализацией или интернационализацией Deseret. Но хорошо знать об этих проблемах, потому что есть большая вероятность, что вы в конечном итоге столкнетесь с ними, даже если в настоящее время они не являются проблемой. Это не "крайние" случаи, или, скорее, они не являются крайними случаями по определению - во всяком случае, существует целая страна, где большинство людей говорят по-турецки, и объединение блоков кода с кодовыми точками является довольно распространенным источником ошибок (особенно в что касается смайликов). И строки, и язык довольно сложны!

* или единицы суррогатного кода, если осиротели

** может быть. Я не проверял это. Если вы не определили, что использование заглавных букв является значительным узким местом, я бы, наверное, не потел бы с этим - выбирайте то, что вы считаете наиболее понятным и читабельным.

*** такая функция может захотеть проверить как первую, так и вторую кодовые единицы, а не только первую, поскольку вполне возможно, что первая единица является суррогатом-сиротой. Например, ввод "\uD800x" будет использовать заглавную букву X как есть, чего можно ожидать или не ожидать.

user505002 19 июл '13 в 18:17 2013-07-19 18:17 · Answer 7 · 2013-07-19 18:17

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

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

user2919276 16 фев '17 в 05:30 2017-02-16 05:30 · Answer 8 · 2017-02-16 05:30

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

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

user33522 29 ноя '15 в 08:13 2015-11-29 08:13 · Answer 9 · 2015-11-29 08:13

Если вы уже (или рассматриваете) использование lodashРешение простое:

_.upperFirst('fred');
// => 'Fred'

_.upperFirst('FRED');
// => 'FRED'

_.capitalize('fred') //=> 'Fred'

Смотрите их документы: https://lodash.com/docs

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

user1415748 19 мар '18 в 15:32 2018-03-19 15:32 · Answer 10 · 2018-03-19 15:32

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

97

Источник

user1415748 19 мар '18 в 15:32

user6412502 08 ноя '18 в 08:31 2018-11-08 08:31 · Answer 11 · 2018-11-08 08:31

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

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

результат:

'Foo'

86

Источник

user6412502 08 ноя '18 в 08:31

user959552 05 апр '17 в 17:21 2017-04-05 17:21 · Answer 12 · 2017-04-05 17:21

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

эталонный тест

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

user1073883 30 ноя '11 в 17:16 2011-11-30 17:16 · Answer 13 · 2011-11-30 17:16

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

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

Источник

user1073883 30 ноя '11 в 17:16

user2047151 17 июл '13 в 06:23 2013-07-17 06:23 · Answer 14 · 2013-07-17 06:23

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

63

Источник

user2047151 17 июл '13 в 06:23

user5423108 14 май '17 в 08:12 2017-05-14 08:12 · Answer 15 · 2017-05-14 08:12

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

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

user747579 29 ноя '13 в 20:01 2013-11-29 20:01 · Answer 16 · 2013-11-29 20:01

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

user1250044 15 фев '13 в 06:55 2013-02-15 06:55 · Answer 17 · 2013-02-15 06:55

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

user860099 19 сен '18 в 06:21 2018-09-19 06:21 · Answer 18 · 2018-09-19 06:21

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

для s='foo bar' мы получаем

'Foo bar'

53

Источник

user860099 19 сен '18 в 06:21

user126778 22 июн '09 в 08:33 2009-06-22 08:33 · Answer 19 · 2009-06-22 08:33

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

user206401 25 сен '14 в 16:13 2014-09-25 16:13 · Answer 20 · 2014-09-25 16:13

var str = "ruby java";

alert(str.charAt(0).toUpperCase() + str.substring(1));

это вернется "Ruby java"

http://jsfiddle.net/amitpandya/908c8e2v/

ссылка на результат в jsfiddle

51

Источник

user206401 25 сен '14 в 16:13

user1088819 09 дек '11 в 00:27 2011-12-09 00:27 · Answer 21 · 2011-12-09 00:27

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

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

Это из CSS text-transform Property (в W3Schools).

50

Источник

user1088819 09 дек '11 в 00:27

user1838058 12 июн '14 в 08:00 2014-06-12 08:00 · Answer 22 · 2014-06-12 08:00

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

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

Пример:

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

49

Источник

user1838058 12 июн '14 в 08:00

user3235127 25 авг '16 в 12:29 2016-08-25 12:29 · Answer 23 · 2016-08-25 12:29

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

40

Источник

user3235127 25 авг '16 в 12:29

user220043 08 авг '11 в 16:55 2011-08-08 16:55 · Answer 24 · 2011-08-08 16:55

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

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

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

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

39

Источник

user220043 08 авг '11 в 16:55

user237564 15 дек '10 в 10:15 2010-12-15 10:15 · Answer 25 · 2010-12-15 10:15

String.prototype.capitalize = function(){
    return this.replace( /(^|\s)([a-z])/g , function(m,p1,p2){ return p1+p2.toUpperCase();
    } );
};

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

capitalizedString = someString.capitalize();

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

35

Источник

user237564 15 дек '10 в 10:15

user3697630 13 июл '15 в 20:34 2015-07-13 20:34 · Answer 26 · 2015-07-13 20:34

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

Источник

user3697630 13 июл '15 в 20:34

user879266 14 июл '18 в 19:40 2018-07-14 19:40 · Answer 27 · 2018-07-14 19:40

yourString.replace(/\w/, c => c.toUpperCase())

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

34

Источник

user879266 14 июл '18 в 19:40

user5601591 20 июл '17 в 20:49 2017-07-20 20:49 · Answer 28 · 2017-07-20 20:49

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

const capitalizeFirstLetter = String.fromCodePoint(65536).length === 1 ?
    function(S) {
        "use-strict"; // Hooray! The browser uses UTF32!
        return S.charAt(0).toUpperCase() + string.slice(1);
    } : function(S) {
        "use-strict";
        // the browser is using UCS16 to store UTF16
        return (S.codePointAt(0) > 65535 ? 
            S.slice(0,2).toUpperCase() + string.slice(2) :
            S.codePointAt(0).toUpperCase() + string.slice(1)
        );
    };

Тем не менее, он не будет работать в IE (но он работает в краю). Итак, с Microsoft скоро прекращает Windows 7, это не должно быть слишком большой проблемой.

user2459296 06 май '14 в 05:15 2014-05-06 05:15 · Answer 29 · 2014-05-06 05:15

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

30

Источник

user2459296 06 май '14 в 05:15

user2123996 23 авг '15 в 12:51 2015-08-23 12:51 · Answer 30 · 2015-08-23 12:51

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

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

23

Источник

user2123996 23 авг '15 в 12:51