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



Answers

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

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

А потом:

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

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

Например:

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



Только CSS

p::first-letter {
  text-transform: uppercase;
}
  • Несмотря на то, что он называется ::first-letter , он применяется к первому символу , т. Е. В случае строки %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 ops / s ± 1,2% за самый проголосовавший ответ.
  • Создано в JSBench.me в Google Chrome 57.




Мы могли бы получить первого персонажа с одним из моих любимых 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 stringVal = 'master';
stringVal.replace(/^./, stringVal[0].toUpperCase()); // returns Master 



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

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



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

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

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

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






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

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

Это из CSS text-transform PropertyW3Schools ).




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

//es5
function capitalize(string) {
    return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
capitalise("alfredo")  // => "Alfredo"
capitalise("Alejandro")// => "Alejandro
capitalise("ALBERTO")  // => "Alberto"
capitalise("ArMaNdO")  // => "Armando"

// es6 using destructuring 
const capitalize = ([first,...rest]) => first.toUpperCase() + rest.join('').toLowerCase();



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

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

Пример:

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



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



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



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

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



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

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

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




// Uppercase first letter
function ucfirst(field) {
    field.value = field.value.substr(0, 1).toUpperCase() + field.value.substr(1);
}

Применение:

<input type="text" onKeyup="ucfirst(this)" />



Links