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

Как сделать первую букву каждого слова заглавной в JavaScript – учебник по прописным буквам в JS

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

Автор оригинала: Catalin Pit

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

Самое прекрасное в программировании – это то, что не существует универсального решения проблемы. Поэтому в этой статье вы увидите несколько способов решения одной и той же задачи.

Написание первой буквы слова в верхнем регистре

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

В JavaScript мы начинаем считать с 0. Например, если у нас есть массив, первой позицией будет 0, а не 1.

Кроме того, мы можем получить доступ к каждой букве из строки так же, как и к элементу из массива. Например, первая буква в слове “freeCodeCamp” находится в позиции 0.

Это означает, что мы можем получить букву f из freeCodeCamp, выполнив команду publication[0].

Таким же образом можно получить доступ к другим буквам из слова. Вы можете заменить “0” на любое число, если не превысите длину слова. Под превышением длины слова я имею в виду попытку сделать что-то вроде publication[25], которая приводит к ошибке, поскольку в слове “freeCodeCamp” всего двенадцать букв.

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

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

В JavaScript есть метод toUpperCase(), который мы можем вызывать для строк или слов. Как можно понять из названия, вы вызываете его на строке/слове, и он возвращает то же самое, но в верхнем регистре.

Выполнив приведенный выше код, вы получите заглавную F вместо f. Чтобы вернуть целое слово, мы можем сделать следующее:

Теперь он соединяет “F” с “reeCodeCamp“, то есть мы получаем слово “FreeCodeCamp“. Вот и все!

Подведем итоги

Чтобы все было понятно, давайте подытожим то, что мы узнали до сих пор:

В JavaScript счет начинается с 0.

Заглавная буква каждого слова из строки

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

Разделите его на слова

Мы должны написать первую букву каждого слова из предложения freeCodeCamp – это потрясающий ресурс.

Первый шаг, который мы сделаем, – это разделим предложение на ряд слов. Зачем? Чтобы мы могли манипулировать каждым словом по отдельности. Мы можем сделать это следующим образом:

Итерация по каждому слову

После выполнения приведенного выше кода переменной words присваивается массив с каждым словом из предложения. Массив имеет следующий вид [“freeCodeCamp”, “is”, “an”, “awesome”, “resource”].

Теперь следующим шагом будет перебор массива слов и выделение заглавной буквы каждого слова.

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

Объединяем слова

Что делает приведенный выше код? Он перебирает каждое слово и заменяет его заглавной первой буквой + остальной строкой.

Если взять в качестве примера слово “freeCodeCamp“, то оно будет выглядеть следующим образом freeCodeCamp = F + reeCodeCamp.

После перебора всех слов массив слов будет выглядеть так [“FreeCodeCamp”, “Is”, “An”, “Awesome”, “Resource”]. Однако мы имеем массив, а не строку, что не является тем, что нам нужно.

Последний шаг – соединить все слова в предложение. Как же это сделать?

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

В приведенном выше фрагменте кода мы можем видеть метод join в действии. Мы вызываем его на массиве слов и указываем разделитель, которым в нашем случае является пробел.

Таким образом, [“FreeCodeCamp”, “Is”, “An”, “Awesome”, “Resource”] становится FreeCodeCamp Is An Awesome Resource.

Другие методы

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

В чем разница между приведенным выше решением и исходным решением? Эти два решения очень похожи, разница в том, что во втором решении мы используем функцию map, в то время как в первом решении мы использовали цикл for.

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

Приведенный выше код использует RegEx для преобразования букв. RegEx может показаться запутанным, поэтому позвольте мне объяснить, что происходит:

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

Заключение

Поздравляем, сегодня вы узнали что-то новое! Вкратце, в этой статье вы узнали, как:

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

Доброго времени суток, дорогие подписчики и гости моего блога. Сегодня я решил написать небольшую, но интересную и полезную статейку, которая поведает вам, как создается первая буква заглавная JavaScript. Я заметил, что новички программирования на языке скриптов задают этот вопрос достаточно часто.

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

Знакомство с основными инструментами

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

s = s[0].toUpperCase () + s.substr (1).toLowerCase ();

alert (s); //в результате будет написано «Я – студент!»

toUpperCase () изменяет все маленькие буквы на большие. В примере же я выбираю первую букву строковой переменной s[0], а после редактирую ее.

toLowerCase () действует в обратном направлении. Он переводит все буквы с верхнего регистра в нижний.

Метод substr (start [,length]) возвращает подстроку из заданной строки, начиная с позиции, которая задается в качестве первого параметра – start. Вторым параметром – length – определяется длина подстроки. Если она не указана, то берутся все символы от старта до конца строковой переменной. В презентованном случае берутся все символы, начиная с первого.

Помимо этого метода, можно также использовать slice (start [,end]). Он позволяет выбирать указанные элементы из массива или же подстроки от начальной позиции до конечной, если она указана.

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

Для начала стоит вспомнить, что при загрузке страницы в браузере создается объектная модель документа (Document Object Model) более известная под названием DOM. Благодаря html DOM, JavaScript может получать и изменять все элементы веб-страницы. При чем отыскивает он их пятью способами:

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

Поэтому после указания команды поиска стоит через точку прописывать свойство innerHTML. Оно позволит получить и в последствии изменить (перезаписать) текстовое содержимое элементов.

Вот теперь можно перейти к полноценной программной реализации.

Решение задачи найдено!

Я написал для вас простенькое приложение с двумя функциями. Одна из них – GetBigLetter () – переводит в верхний регистр только первую букву абзаца, а вторая – GetAllBigLetter () – изменяет все слова предложения, записывая их все с заглавной буквы.

Абзац всегда будет начинаться с прописной буквы

в этом предложении первая буква изменится на заглавную!

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

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

задан 22 июн ’09, 05:06

30 ответы

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

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

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

Дополнительные возможности интернационализации см. В оригинальный ответ ниже.

ответ дан 19 дек ’20, 09:12

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

Вы бы вызывали функцию, например, так:

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

Обновление:

Согласно комментариям ниже, это не работает в IE 7 или ниже.

Обновление 2:

Чтобы избежать undefined для пустых строк (см. Комментарий @ njzk2 ниже), вы можете проверить наличие пустой строки:

ответ дан 23 мая ’17, 13:05

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

Вот самые быстрые методы, основанные на этот тест jsperf (в порядке от самого быстрого к самому медленному).

Как видите, первые два метода практически сопоставимы по производительности, тогда как изменение String.prototype безусловно, самый медленный с точки зрения производительности.

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

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

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

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

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

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

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

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

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

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

По состоянию на январь 2021 года все основные движки реализовали функцию класса символов свойств Unicode, но в зависимости от вашего целевого диапазона поддержки вы, возможно, еще не сможете безопасно использовать ее. Последним браузером, который представил поддержку, был Firefox (78; 30 июня 2020 г.). Вы можете проверить поддержку этой функции с помощью Таблица совместимости кангакса. Babel можно использовать для компиляции литералов RegExp со ссылками на свойства на эквивалентные шаблоны без них, но имейте в виду, что результирующий код иногда может быть огромным. Вы, вероятно, не захотите делать это, если не уверены, что компромисс оправдан для вашего варианта использования.

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

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

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

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

Делайте первую букву слова заглавной

Кроме того, мы можем получить доступ к каждой букве из String так же, как мы получаем доступ к элементу из массива. Например, первая буква слова « freeCodeCamp » находится в позиции 0.

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

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

Запустив приведенный выше код, вы получите заглавную F вместо f. Чтобы вернуть все слово, мы можем сделать это:

Теперь он объединяет «F» с «reeCodeCamp», что означает, что мы возвращаем слово «FreeCodeCamp». Это все!

Подведем итоги

Чтобы быть уверенным, что все ясно, давайте резюмируем то, что мы узнали до сих пор:

Делайте заглавными первую букву каждого слова в строке

Разделите это на слова

Перебирать каждое слово

В приведенном выше коде каждое слово взято отдельно. Затем он делает первую букву заглавной и в конце объединяет первую заглавную букву с остальной частью строки.

Присоединяйтесь к словам

Что делает приведенный выше код? Он выполняет итерацию по каждому слову и заменяет его заглавными буквами первой буквы + остальной частью строки.

В приведенном выше фрагменте кода мы можем увидеть метод соединения в действии. Мы вызываем его в words массиве и указываем разделитель, который в нашем случае является пробелом.

Другие методы

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

Let’s go even further, and try to do a one-liner. Be aware! One line solutions might look cool, but in the real world they are rarely used because it is challenging to understand them. Code readability always comes first.

The above code uses RegEx to transform the letters. The RegEx might look confusing, so let me explain what happens:

Thus, with one line, we accomplished the same thing we accomplished in the above solutions. If you want to play around with the RegEx and to learn more, you can use this website.

Conclusion

Congratulations, you learnt a new thing today! To recap, in this article, you learnt how to:

If you like what I write, the chances are you would love what I email. Consider subscribing to my mailing list. If you’re not a fan of newsletters, we can always keep in touch on Twitter.

Методы строк в JavaScript: простая шпаргалка с примерами

Любые текстовые данные в JavaScript считаются строками. Это примитивный тип, но язык позволяет работать с ним так, будто он является объектом. В том числе — использовать встроенные в JS методы строк, которые собраны в этой шпаргалке.

Важно: при использовании методов создаётся новая строка, которая записывается в ту же переменную вместо старой строки.

Как изменить регистр

toLowerCase

Преобразует символы в строке в нижний регистр.

toUpperCase

Преобразует символы в строке в верхний регистр.

Как объединить строки

concat

Объединяет две или более строки и возвращает одну строку.

Как разделить строку на подстроки

split

Разбивает строку в массив по указанному разделителю, которым может быть подстрока или регулярное выражение. Вторым параметром можно указать ограничитель.

Как повторить строку

repeat

Принимает в качестве параметра число и повторяет строку указанное количество раз.

Как найти подстроку

charAt

Возвращает символ по указанному индексу.

includes

Проверяет, содержит ли строка указанную подстроку. Возвращает значение true или false. Вторым параметром можно указать позицию в строке, с которой следует начать поиск.

indexOf

lastIndexOf

endsWith

Проверяет, заканчивается ли строка символами, заданными первым параметром. Возвращает true или false. Есть второй необязательный параметр — ограничитель по диапазону поиска. По умолчанию он равен длине строки.

startsWith

Проверяет, начинается ли строка с указанных символов. Возвращает true или false. Вторым параметром можно указать индекс, с которого следует начать проверку.

search

Проверяет, есть ли в строке указанное значение или регулярное выражение и возвращает индекс начала совпадения.

Как извлечь подстроку

slice

Извлекает часть строки и возвращает новую строку. Обязательный параметр — начало извлечения. Вторым параметром можно установить границу (по умолчанию — до конца строки).

substring

Извлекает символы из строки между двумя указанными индексами. Второй индекс указывать не обязательно. В таком случае будут извлечены все символы от начала до конца строки. В отличие от slice, можно задавать start больше, чем end. Отрицательные значения не поддерживаются, они интерпретируются как 0.

substr

Извлекает часть строки указанной длины. Первым параметром принимает стартовую позицию, вторым — длину. Значение первого параметра может быть отрицательным, тогда позиция определяется с конца строки.

Как заменить подстроку

replace

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

replaceAll

Даёт такой же результат, как метод replace() с глобальным флагом g. Заменяет все найденные совпадения другой строкой или переданной функцией.

Как добавить в строку пробелы или другие символы

padEnd

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

padStart

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

Как удалить пробелы в строке

Обрезает пробелы с обоих концов строки.

trimEnd

Обрезает пробелы в конце строки

trimStart

Обрезает пробелы в начале строки

Как работать с Юникодом

charCodeAt

Возвращает числовое значение Юникода по указанному индексу. Обратите внимание: у букв в верхнем и нижнем регистрах разные коды.

fromCharCode

Преобразует числовые значения Юникода в читаемые символы.

Примечание: при работе с эмодзи, редкими математическими символами, иероглифами нужно помнить о суррогатных парах. Это символы, которые записываются двумя 16-битными словами. Длина таких строк — 2.

Суррогатные пары не учитывались при создании JS и методы строк charCodeAt / fromCharCode обрабатывают их некорректно. Правильно работают с суррогатными парами редкие методы String.fromCodePoint и str.codePointAt, которые появились в языке недавно.

Для работы со строками в JS есть не только встроенные методы, но и сторонние библиотеки. Они решают задачи более сложные задачи. Но подключать их имеет смысл только в том случае, если возможностей встроенных методов действительно не хватает.

Полезные методы для строк

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

Строки как объекты

Почти всё в JavaScript является объектами. Когда вы создаёте строку, например:

ваша переменная становится строковым объектом, и, как результат, ей доступно множество свойств и методов. Можете убедиться в этом, перейдя на страницу String и просмотрев на ней список свойств и методов!

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

Введем несколько примеров в консоль разработчика.

Поиск длины строки

Результатом должно быть число 7, потому что слово «mozilla» состоит из 7 символов. Это свойство можно применить, например, если вы захотите найти длины серии имён, чтобы их можно было отображать по порядку длины или сообщить пользователю, что имя пользователя, которое он ввёл в поле формы, слишком длинное, если оно превышает определённую длину.

Получение определённого строкового символа

Вы можете вернуть любой символ внутри строки, используя обозначение в квадратных скобках. Это означает, что вы добавляете квадратные скобки ([ ]) в конце вашего имени переменной. В квадратных скобках вы указываете номер символа, который хотите вернуть. Например, чтобы получить первую букву, нужно написать:

Компьютеры считают от 0, а не 1! Чтобы получить последний символ любой строки, мы могли бы использовать следующую строку, объединив эту технику с свойством length :

Поиск подстроки внутри строки и её извлечение

Изменение регистра

Строковые методы toLowerCase () и toUpperCase () преобразовывают все символы в строке в нижний или верхний регистр соответственно. Этот способ можно применить, если вы хотите нормализовать все введённые пользователем данные перед их сохранением в базе данных.

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

Обновление частей строки

Он принимает два параметра — строку, которую вы хотите заменить, и строку, которую вы хотите вставить вместо заменяемой. Попробуйте этот пример:

Обратите внимание, что для фактического получения обновлённого значения, отражённого в переменной browserType в реальной программе, вам нужно будет установить значение переменной в результате операции; он не просто обновляет значение подстроки автоматически. Таким образом, вы должны были бы написать это: browserType = browserType.replace(‘moz’,’van’);

Активные примеры обучения

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

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

Фильтрация приветственных сообщений

Исправление регистра (размера букв в тексте—прим. пер.)

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

Примечание: Подсказка — параметры строковых методов не обязательно должны быть строковыми литералами; они также могут быть переменными или даже переменными с вызываемым ими методом.

Создание новых строк из старых частей

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

Мы хотим извлечь код станции и имя и поместить их в строку со следующей структурой:

Мы бы рекомендовали реализовать это следующим образом:

Заключение

Нельзя не согласиться с тем, что способность обрабатывать слова и предложения в программировании очень важна — особенно в JavaScript, поскольку веб-сайты — все связаны с людьми. Эта статья дала вам основы, которые вам нужно знать о манипуляции строками на данный момент. Это пойдёт вам на пользу, когда вы займётесь более сложными темами в будущем. Далее мы рассмотрим последний важный тип данных, на который нам нужно сосредоточиться в краткосрочной перспективе — массивы.

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

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

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

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

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

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

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

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

Обновить:

Согласно комментариям ниже, это не работает в IE 7 или ниже.

Обновление 2:

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

Вот самые быстрые методы, основанные на этом тесте jsperf (упорядоченные от самого быстрого до самого медленного).

Как вы можете видеть, первые два метода по существу сопоставимы с точки зрения производительности, тогда как изменение String.prototype является самым медленным с точки зрения производительности.

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

Это решение ECMAScript 6+ 2018 года :

_.camelCase(‘Foo Bar’); //=> ‘fooBar’

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

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

И для всех любителей кофе:

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

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

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

Обновление ноябрь 2016 (ES6), просто для удовольствия:

тогда capitalize(«hello») // Hello

Только CSS

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

Поскольку существует множество ответов, но в ES2015 нет ни одного, который бы эффективно решал исходную проблему, я придумал следующее:

замечания

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

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

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

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

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

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

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

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

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

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

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

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

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

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

114 ответов

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

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

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

Обновить:

Согласно комментариям ниже, это не работает в IE 7 или ниже.

Обновление 2:

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

Вот самые быстрые методы, основанные на этом тесте jsperf (упорядоченные от самого быстрого до самого медленного).

Как вы можете видеть, первые два метода по существу сопоставимы с точки зрения производительности, тогда как изменение String.prototype является безусловно самым медленным с точки зрения производительности.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вы бы вызывали функцию, например, так:

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

Обновлять

Согласно комментариям ниже, это не работает в IE 7 или ниже.

Обновление 2:

Версия ES

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

Вот самые быстрые методы, основанные на этом тесте jsperf (отсортированы от самого быстрого к самому медленному).

Как видите, первые два метода практически сопоставимы с точки зрения производительности, тогда как изменение метода String.prototype является самым медленным с точки зрения производительности.

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

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

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

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

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

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

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

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

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

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

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

84 ответа

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

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

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

Update:

В соответствии с приведенными ниже комментариями это не работает в IE 7 или ниже.

Обновление 2:

Чтобы избежать undefined для пустых строк (см. @njzk2 комментарий ниже), вы можете проверить пустую строку:

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

Вот самые быстрые методы, основанные на этот тест jsperf (упорядоченный от самого быстрого до самого медленного).

Как вы можете видеть, первые два метода по существу сопоставимы с точки зрения производительности, тогда как изменение String.prototype на сегодняшний день является самым медленным с точки зрения производительности.

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

Первое решение в CSS:

Второе решение:

Вы также можете добавить его в String.prototype чтобы String.prototype его другими методами:

и используйте это так:

Третье решение:

Это решение 2018 года ES6+:

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

_.camelCase(‘Foo Bar’); //=> ‘fooBar’

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

И для всех наркоманов:

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

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

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

Обновление Nov.2016 (ES6), только для FUN:

тогда capitalize(«hello») // Hello

Только CSS

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

Поскольку существует множество ответов, но в ES2015 нет, которые бы эффективно решали исходную проблему, я придумал следующее:

Примечания

Benchmark

Всегда лучше сначала обрабатывать такие вещи, используя CSS, в общем, если вы можете решить что-то с помощью CSS, сначала сделайте это, затем попробуйте JavaScript, чтобы решить ваши проблемы, поэтому в этом случае попробуйте использовать :first-letter in CSS и применить text-transform:capitalize;

Также альтернативным вариантом является JavaScript, поэтому лучше всего будет что-то вроде этого:

и назовите это как:

Если вы хотите использовать его снова и снова, лучше присоединить его к нативной String javascript, так что-то вроде ниже:

и назовите это как ниже:

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

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

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

Это текстовая строка = > This Is A Text String

Вот функция, называемая ucfirst() (сокращение от «первой буквы первой буквы» ):

Вы можете использовать строку ucfirst ( «некоторая строка» ), например,

Он работает, разбивая строку на две части. На первой строке он вытаскивает firstLetter, а затем во второй строке он использует firstLetter, вызывая firstLetter.toUpperCase() и присоединяет его к остальную часть строки, которую можно найти, вызвав str.substr(1).

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

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

Зарезервируйте это решение:

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

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

Спасибо J-P за акклиматизацию.

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

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

В CoffeeScript добавьте в прототип строки:

Публикация редактирования ответа @salim для включения преобразования букв локали.

он вернет «Ruby java»

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

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

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

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

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

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

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

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

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

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