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

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

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

Это из свойства CSS text-transform ( в W3Schools).

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

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

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

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

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

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

Спасибо J-P за заявление.

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

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

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

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

Мы могли бы получить первого персонажа с одним из моих любимых 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 или Lodash, библиотека underscore.string предоставляет расширения строк, в том числе капитализацию :

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

Примере:

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

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'

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

Базовое решение:

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

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

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

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

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

const capitalizeFirstLetter = ([ first, ...rest ], locale = navigator.language) =>
  first.toLocaleUpperCase(locale) + rest.join('')

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

Дополнительные варианты интернационализации см. в исходном ответе ниже.

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

Object.defineProperty(String.prototype, 'capitalize', {
  value: function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
  },
  enumerable: false
});

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

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

ЕС версия

const capitalize = s => s && s[0].toUpperCase() + s.slice(1)

// to always return type string event when s may be falsy other than empty-string
const capitalize = s => (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'

Ванильный JavaScript для первого верхнего регистра:

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

Только CSS

Если преобразование нужно только для отображения на веб-странице:

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

• Несмотря на то, что он называется "::first-letter ", он применяется к первому символу, то есть в случае строки %a этот селектор будет применяться к %, и поэтому a не будет писаться с заглавной буквы.
• В IE9+ или IE5.5+ поддерживается устаревшая нотация с одним двоеточием (:first-letter).

ES2015 однострочный

const capitalizeFirstChar = str => str.charAt(0).toUpperCase() + str.substring(1);

Замечания

• В тесте, который я выполнил, не было существенной разницы между string.charAt(0) и string[0]. Обратите внимание, однако, что string[0] будет undefined для пустой строки, поэтому функцию придется переписать, чтобы использовать "string && string[0]", что слишком многословно по сравнению с альтернативой.
• string.substring(1) быстрее, чем string.slice(1).

Сравнение между substring() и slice()

В настоящее время разница довольно незначительна (проведите тест самостоятельно):

• 21 580 613,15 операций/с ±1,6% для substring(),
• 21 096 394,34 операции/с ±1,8% (на 2,24% медленнее) для slice().

Только потому, что это действительно однострочник, я включу этот ответ. Это интерполированная строка на основе ES6 с интерполированной строкой.

let setStringName = 'the Eiffel Tower';
setStringName = `${setStringName[0].toUpperCase()}${setStringName.substring(1)}`;

Есть очень простой способ реализовать это с помощью replace. Для ECMAScript 6:

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

Результат:

'Foo'