Строки и шаблонные строки

На экране телефона ты видишь: «Привет, Айсель! У тебя 3 новых сообщения». Программа не хранит эту фразу готовой — она собирает её из частей: постоянных слов, имени пользователя и количества сообщений. Работа с текстом — одна из самых частых задач в программировании.

Как создать строку

Строка (string) — это последовательность символов. Её можно записать в одинарных кавычках, в двойных или между обратными кавычками (backtick). Одинарные и двойные кавычки работают одинаково — главное, чтобы открывающая и закрывающая совпадали. Для особых символов внутри строки используют знак \: \n — перевод строки, \' — символ кавычки.

const single = 'Hello';
const double = "Hello";
const quote = 'It\'s JavaScript';

console.log(single, double);
console.log(quote);
console.log('Line 1\nLine 2');

Hello Hello
It's JavaScript
Line 1
Line 2

Длина и индексы

Свойство length показывает, сколько символов в строке. У каждого символа есть свой номер — индекс, и счёт начинается с 0. Поэтому в строке 'Baku' символ B имеет индекс 0, а u — индекс 3. Последний символ можно получить и через at(-1).

const city = 'Baku';

console.log(city.length);
console.log(city[0]);
console.log(city[city.length - 1]);
console.log(city.at(-1));
console.log(city.toUpperCase());
console.log(city.toLowerCase());

4
B
u
u
BAKU
baku

Полезные методы

Метод — это функция, «прикреплённая» к значению; её вызывают через точку: city.toUpperCase(). У строк много методов, но для большинства повседневных задач хватает тех, что ниже.

const email = '  Leyla.Mammadova@Example.com  ';
const clean = email.trim().toLowerCase();

console.log(clean);
console.log(clean.includes('@'));
console.log(clean.indexOf('@'));
console.log(clean.slice(0, clean.indexOf('@')));
console.log(clean.endsWith('.com'));

leyla.mammadova@example.com
true
15
leyla.mammadova
true

const sentence = 'I love JavaScript';

console.log(sentence.replace('love', 'enjoy'));
console.log(sentence.split(' '));
console.log('ha'.repeat(3));
console.log('7'.padStart(3, '0'));
console.log(sentence);

I enjoy JavaScript
[ 'I', 'love', 'JavaScript' ]
hahaha
007
I love JavaScript

Шаблонные строки

Склеивать текст по кусочкам через + утомительно, и легко забыть пробел. Шаблонные строки (template literals) упрощают эту задачу. Их пишут между обратными кавычками — в английской раскладке это клавиша под Esc, та же, где буква Ё. Если внутри написать ${...}, значение выражения в фигурных скобках подставится в текст.

const name = 'Aysel';
const messages = 3;

console.log('Hi, ' + name + '! You have ' + messages + ' new messages.');
console.log(`Hi, ${name}! You have ${messages} new messages.`);

Hi, Aysel! You have 3 new messages.
Hi, Aysel! You have 3 new messages.

Внутри ${...} может стоять не только переменная, но и любое выражение: вычисление, вызов метода. Шаблонные строки могут занимать и несколько строк — \n писать не нужно. Метод toFixed(2) показывает число с двумя знаками после запятой.

const item = 'bread';
const price = 0.8;
const quantity = 5;

console.log(`Total: ${price * quantity} AZN`);

const receipt = `Item: ${item.toUpperCase()}
Quantity: ${quantity}
Sum: ${(price * quantity).toFixed(2)} AZN`;
console.log(receipt);

Total: 4 AZN
Item: BREAD
Quantity: 5
Sum: 4.00 AZN

const name = 'Elvin';

console.log('Hi, ${name}');
console.log(`Hi, ${name}`);

Hi, ${name}
Hi, Elvin

Практика: создаём логин

Соединим всё, что узнали. Составим логин из полного имени: split(' ') разделяет имя и фамилию, toLowerCase() делает буквы строчными, а шаблонная строка соединяет части через точку. Попробуй код со своим именем.

const fullName = 'Murad Aliyev';
const parts = fullName.split(' ');
const login = `${parts[0].toLowerCase()}.${parts[1].toLowerCase()}`;

console.log(parts);
console.log(login);
console.log(`Welcome, ${parts[0]}! Your login is ${login}`);

[ 'Murad', 'Aliyev' ]
murad.aliyev
Welcome, Murad! Your login is murad.aliyev

const rawName = '  Leyla HASANOVA ';
const year = 2012;
// 1) build and print the login leyla.hasanova12
// 2) print Login length: N

leyla.hasanova12
Login length: 16