Как ввести первую букву строки в верхний регистр в JavaScript

JavaScript предлагает много способов использовать строку с заглавной буквы, чтобы сделать первый символ прописным. Изучите различные способы, а также выясните, какой из них вам следует использовать, используя простой JavaScript.

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


Лучше всего это сделать с помощью комбинации двух функций. Один вводит первую букву в верхний регистр, а второй нарезает строку и возвращает ее, начиная со второго символа:

const name = 'flavio'
const nameCapitalized = name.charAt(0).toUpperCase() + name.slice(1)

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

const capitalize = (s) => {
  if (typeof s !== 'string') return ''
  return s.charAt(0).toUpperCase() + s.slice(1)
}

capitalize(‘flavio’) //‘Flavio’ capitalize(‘f’) //‘F’ capitalize(0) //’’ capitalize({}) //’’

Вместо того, чтобы использоватьs.charAt(0)вы также можете использовать строковое индексирование (не поддерживается в более старых версиях IE):s[0].

Некоторые онлайн-решения рекомендуют добавить функцию к прототипу String:

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

(мы используем обычную функцию, чтобы использоватьthis-стрелочные функциив этом случае потерпит неудачу, так какthisв стрелочных функциях не ссылается на текущий объект)

Это решение не идеально, потому что редактирование прототипа обычно не рекомендуется, и это гораздо более медленное решение, чем наличие независимой функции.


Не забывайте, что если вы просто хотите использовать заглавные буквы для презентационных целей на веб-странице, CSS может быть лучшим решением, просто добавьтеcapitalizeclass в свой абзац HTML и используйте:

p.capitalize {
  text-transform: capitalize;
}

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по js: