JavaScript - Строки: Пособие для начинающих

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

JavaScript - Strings

Что такое строки?

В JavaScript строки - этоsequence символов. Это могут быть буквы, числа, символы или даже пробелы. Представьте их как текст вашего программного мира.

Пример:

let greeting = "Привет, мир!";
let number = "42";
let symbol = "@#$%";

Каждая из этих строк, даже число! В JavaScript, если это в кавычках, это строка.

Синтаксис

Создание строки в JavaScript так же просто, как pie. Вы можете использовать одинарные кавычки (''), двойные кавычки (""), или даже обратные кавычки (``). Давайте посмотрим на несколько примеров:

let singleQuotes = 'Я строка';
let doubleQuotes = "Я тоже строка";
let backticks = `И я тоже строка!`;

Совет: Обратные кавычки имеют особую суперсилу - они позволяют нам вставлять выражения. Мы вернемся к этому позже!

Свойства объекта Строка в JavaScript

Строки в JavaScript имеют некоторые встроенные свойства. Это как у них есть свой собственный ID card с информацией о себе. Давайте посмотрим на最常见的:

length

Свойство length告诉我们, сколько символов в строке.

let myName = "Алиса";
console.log(myName.length); // Вывод: 5

Здесь myName.length равен 5, потому что "Алиса" имеет 5 символов.

Методы объекта Строка в JavaScript

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

Вот таблица некоторых.common строковых методов:

Метод	Описание	Пример
toUpperCase()	Преобразует строку в верхний регистр	"hello".toUpperCase() возвращает "HELLO"
toLowerCase()	Преобразует строку в нижний регистр	"WORLD".toLowerCase() возвращает "world"
trim()	Удаляет пробелы с обоих концов	" hi ".trim() возвращает "hi"
charAt(index)	Возвращает символ в указанном индексе	"hello".charAt(1) возвращает "e"
indexOf(substring)	Возвращает индекс первого появления подстроки	"hello".indexOf("l") возвращает 2
slice(start, end)	Извлекает часть строки	"hello".slice(1, 4) возвращает "ell"
replace(old, new)	Заменяет указанное значение на другое	"hello".replace("h", "j") возвращает "jello"

Давайте углубимся в некоторые из них с примерами:

toUpperCase() и toLowerCase()

let shout = "hello".toUpperCase();
console.log(shout); // Вывод: HELLO

let whisper = "QUIET PLEASE".toLowerCase();
console.log(whisper); // Вывод: quiet please

Представьте, что вы создаете текстовое приложение для отправки сообщений. Эти методы могут быть полезны для добавления функции CAPS LOCK или обеспечения того, чтобы имена пользователей всегда хранились в нижнем регистре.

trim()

let untidy = "   уберечь   ";
let tidy = untidy.trim();
console.log(tidy); // Вывод: "уберечь"

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

charAt(index)

let word = "JavaScript";
console.log(word.charAt(4)); // Вывод: S

Помните, в программировании мы начинаем отсчет с 0, а не с 1. Так что 5-й символ находится в индексе 4!

indexOf(substring)

let sentence = "Быстрая коричневая лиса прыгает через ленивую собаку";
console.log(sentence.indexOf("лиса")); // Вывод: 16

Это告诉我们, что "лиса" начинается с 17-го символа (не забывайте, что мы считаем с 0).

slice(start, end)

let fruit = "apple,banana,cherry";
let banana = fruit.slice(6, 12);
console.log(banana); // Вывод: banana

Slice как использование ножниц для вырезания части вашей строки. Здесь мы вырезаем "banana" из нашей fruit строки.

replace(old, new)

let oldSaying = "Ранняя пташка catching worm";
let newSaying = oldSaying.replace("worm", "успех");
console.log(newSaying); // Вывод: Ранняя пташка catching success

Этот метод великолепен для быстрого изменения ваших строк.

Примеры

Давайте объединим все это в fun пример. Представьте, что мы создаем простой генератор бейджей с именем:

function createNameTag(name, role) {
let upperName = name.toUpperCase();
let trimmedRole = role.trim();
let tag = `Здравствуйте, мое имя ${upperName} и я ${trimmedRole}`;
return tag;
}

let myTag = createNameTag("  алиса  ", "  разработчик   ");
console.log(myTag); // Вывод: Здравствуйте, мое имя ALICE и я разработчик

В этом примере мы используем toUpperCase() чтобы имя stood out, trim() чтобы удалить случайные пробелы, и template literals (обратные кавычки) чтобы легко combines наши строки.

HTML обертки для строк

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

let text = "Bold and Beautiful";
console.log(text.bold()); // Вывод: <b>Bold and Beautiful</b>
console.log(text.italics()); // Вывод: <i>Bold and Beautiful</i>
console.log(text.link("https://example.com")); // Вывод: <a href="https://example.com">Bold and Beautiful</a>

Однако стоит отметить, что эти методы считаются устаревшими. В современной веб-разработке обычно лучше manipulates DOM напрямую или использовать фреймворк.

И вот вы уже сделали свои первые шаги в мир строк JavaScript. Помните, что практика делает perfect, так что не бойтесь экспериментировать с этими методами. Before you know it, вы будете складывать сложные программы с легкостью. Happy coding!

Credits: Image by storyset