Статьи

JavaScript заглавная буква первого примера строки

Январь 22, 2019

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

1. Начальная настройка

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

JavaScript заглавная буква - структура проекта
Структура проекта

Наш пользовательский интерфейс просто позволил бы пользователю вводить строку, и мы будем использовать первую букву строки и отображать результат. Для того же, HTML-код нашего пользовательского интерфейса хотел бы ниже:

index.html

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <fieldset>
            <legend>
                <h3>JCG -- JavaScript Capitalize First Letter of String Example</h3>
            </legend>
            <label for="userinput">Please enter text</label>
            <input type="text" id="userinput">
            <button type="button" id="capitalize">Capitalize</button>
            <label for="result">Result</label>
            <span style="font-weight: bold" id="result"></span>
        </fieldset>
        <script src="./myscript.js"></script>
    </body>
</html>

Вышеуказанный интерфейс выглядит следующим образом:

JavaScript заглавная буква

Далее мы пишем код в нашем файле JavaScript myscript.js. Мы реализуем две функции с именем capitalizeUsingStringFunctions и capitalizeUsingSliceFunction. Обсудим там реализацию дальше

2. Использование заглавных букв в строковых функциях

JavaScript предоставляет несколько методов для работы со строками. Особый интерес для нас представляют функции charAt, toUpperCase и substring. Поскольку строка обрабатывается как массив символов, мы можем использовать функцию chartAt, чтобы получить символ в определенной позиции в строке.

Мы будем использовать его для получения первого символа, а затем вызовем функцию toUpperCase для возвращаемого значения. Это будет заглавная буква первого символа, затем мы добавим оставшуюся строку, извлеченную с использованием функции substring, и вернем результат в вызывающий код. Наша функция выглядит следующим образом:

myscript.js

1
2
3
function capitalizeUsingStringFunctions(str) {
    return str.charAt(0).toUpperCase() + str.substring(1, str.length);
}

3. Использование заглавной буквы с использованием функции среза

Как упоминалось ранее, строки в JavaScript обрабатываются как массивы символов. Таким образом, мы можем использовать функции манипулирования массивами и для строк. Один, в частности, срез, окажется полезным для реализации нашей цели здесь.

Мы будем использовать метод slice, чтобы извлечь первый символ из строки и использовать его с большой буквы. Затем мы добавим это к оставшейся строке, извлеченной снова, используя функцию slice, и вернем результат в вызывающий код. Наша функция будет выглядеть следующим образом:

myscript.js

1
2
3
function capitalizeUsingSlice(str) {
    return str.slice(0, 1).toUpperCase() + str.slice(1, str.length);
}

После реализации двух вышеуказанных методов мы завершим код для их вызова и отобразим результат. Наш законченный код будет выглядеть следующим образом:

myscript.js

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
let input = document.getElementById("userinput");
let result = document.getElementById("result");
let button = document.getElementById("capitalize");
 
button.addEventListener("click", function(evt) {
    //result.innerHTML = capitalizeUsingSlice(input.value);
    result.innerHTML = capitalizeUsingStringFunctions(input.value);
});
 
 
function capitalizeUsingSlice(str) {
    return str.slice(0, 1).toUpperCase() + str.slice(1, str.length);
}
 
function capitalizeUsingStringFunctions(str) {
    return str.charAt(0).toUpperCase() + str.substring(1, str.length);
}

4. Запуск кода

Когда мы запустим код и нажмем на URL в браузере, мы увидим наш код в действии, как показано ниже:

JavaScript заглавная буква

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

5. Загрузите исходный код

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

1
2
> npm install
> npm start

После этого укажите браузеру следующий URL:

http://localhost:8080

Скачать
Вы можете скачать полный исходный код этого примера здесь: JavaScript Заглавная буква первого примера строки
68
Share: