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

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

Например:

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

Основное решение:

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

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

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

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

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

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

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

Для еще большего количества вариантов интернационализации, пожалуйста, смотрите оригинальный ответ ниже .

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

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

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

"hello world".capitalize();

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

"Hello world" 

В CSS:

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

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

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

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

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

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

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

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

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

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

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

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

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

var str = "ruby java";

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

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

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

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

Пример:

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

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

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

Только 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 ops / s ± 3,03% для этого решения,
• 4,577,946 операций / с ± 1,2% для наиболее проголосовавшего ответа.
• Создано с помощью JSBench.me в Google Chrome 57.

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

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

Результат:

'Foo'

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

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

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

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

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

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉"); // "𐐶𐐲𐑌𐐼𐐲𐑉"

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

Случается, что кодовые единицы UTF-16 имеют размер 1: 1 с кодовыми точками USV в двух диапазонах, от 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("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

Вы могли бы использовать побитовую математику вместо > 0xFFFFэтого, но, вероятно, легче понять этот путь, и любой из них достиг бы того же самого.

Мы также можем сделать эту работу в 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), но все же помогает проиллюстрировать проблему. Строчные буквы eszett («ß») пишутся с заглавной буквы «SS», но «SS» может быть строчными или «ß», или «ss» - вам необходимо внеполосное знание немецкого языка, чтобы знать, что правильно!

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

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

capitalizeFirstLetter("italy", "en") // "Italy"
capitalizeFirstLetter("italya", "tr") // "İtalya"

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

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

function capitalizeFirstLetter(str, locale=navigator.language) {
  return str.replace(/^\p{CWU}/u, char => char.toLocaleUpperCase(locale));
}

Это можно немного подправить, чтобы обрабатывать несколько слов в строке с большой точностью. CWUИли Changes_When_Uppercased свойство символов соответствует всем точкам кода , которые, ну, когда изменения в верхнем регистре. Мы можем попробовать это с помощью заглавных букв, таких как голландский ij, например:

capitalizeFirstLetter('ijsselmeer'); // "IJsselmeer"

На момент написания статьи (февраль 2020 г.) Firefox / Spidermonkey еще не реализовал ни одной из функций RegExp, представленных за последние два года *****. Вы можете проверить текущее состояние этой функции в таблице сравнения Kangax . Babel может компилировать литералы RegExp со ссылками на свойства для эквивалентных шаблонов без них, но имейте в виду, что результирующий код может быть огромным.

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

* Кодовые единицы UTF-16 / UCS2 также являются кодовыми точками Unicode в том смысле, что, например, U + D800 технически является кодовой точкой, но это не то, что здесь «означает» ... вроде ... хотя это и получается довольно нечеткая. Что суррогаты определенно не являются, тем не менее, являются USV (скалярные значения Unicode).

** Хотя, если единица суррогатного кода «осиротела», то есть не является частью логической пары, вы все равно можете получить здесь и суррогаты.

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

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

***** Вот проблема Bugzilla, если вы хотите следить за прогрессом более непосредственно.

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

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

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

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

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

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

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

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

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

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

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'

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

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

Применение:

capitalizedString = someString.capitalize();

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

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

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

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

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

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

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

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

Спасибо JP за акларацию.

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

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

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

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