Learn JavaScript

Строки - шаблонные строки и полезные операции

Строка (string) - тип данных для текста. В JavaScript строки неизменяемы: методы не меняют исходную строку, а возвращают новую. Это помогает писать предсказуемый код и избегать скрытых побочных эффектов.

Как создавать строки

Строки можно записывать в двойных кавычках, одинарных кавычках или в шаблонных строках.

const a = "text";
const b = 'text';
const c = `text`;

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

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

Шаблонные строки записываются в обратных кавычках `...` и поддерживают:

  • многострочный текст
  • вставки выражений через ${...}

Вставка значений

const name = "Jack";
const score = 42;

const message = `Name: ${name}, score: ${score}`;
message; // "Name: Jack, score: 42"

Внутри ${...} может быть выражение, а не только переменная:

const a = 10;
const b = 5;

`Sum: ${a + b}`; // "Sum: 15"

Многострочный текст

const text = `Line 1
Line 2
Line 3`;

Конкатенация строк

Классический способ - оператор +.

const first = "Hello";
const second = "world";

first + " " + second; // "Hello world"

В длинных строках шаблонные строки обычно читаются проще.

Длина, символы и доступ по индексу

Длина строки - length:

const s = "JavaScript";
s.length; // 10

Доступ к символам по индексу (индексация с нуля):

const s = "JavaScript";
s[0]; // "J"
s[4]; // "S"

Если индекс выходит за границы, результат будет undefined:

"hi"[10]; // undefined

slice - извлечение части строки

const s = "JavaScript";

s.slice(0, 4);  // "Java"
s.slice(4);     // "Script"
s.slice(-6);    // "Script"

Регистр и пробелы

toLowerCase и toUpperCase

const s = "Hello";

s.toLowerCase(); // "hello"
s.toUpperCase(); // "HELLO"

trim - убрать пробелы по краям

const s = "  hello  ";
s.trim(); // "hello"

Есть также trimStart() и trimEnd():

"  hello".trimStart(); // "hello"
"hello  ".trimEnd();   // "hello"

Поиск подстроки

includes - есть ли подстрока

const s = "JavaScript";

s.includes("Script"); // true
s.includes("script"); // false

Часто применяют вместе с приведением к одному регистру:

const s = "JavaScript";
s.toLowerCase().includes("script"); // true

indexOf - позиция подстроки

indexOf возвращает индекс первого вхождения или -1, если ничего не найдено.

const s = "JavaScript";

s.indexOf("a");   // 1
s.indexOf("xyz"); // -1

startsWith и endsWith

const file = "photo.jpg";

file.startsWith("photo"); // true
file.endsWith(".jpg");    // true

Замена текста

replace заменяет первое вхождение, replaceAll - все вхождения.

const s = "a-b-c";

s.replace("-", "_");     // "a_b-c"
s.replaceAll("-", "_");  // "a_b_c"

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

Разбиение и сборка

split - разбить строку на массив

const csv = "red,green,blue";
csv.split(","); // ["red", "green", "blue"]

join - собрать массив обратно в строку

const parts = ["2026", "01", "15"];
parts.join("-"); // "2026-01-15"

Повторение и заполнение

repeat - повторить строку

"*".repeat(5); // "*****"

padStart и padEnd - добить до длины

Полезно для форматов, например для времени.

const n = 7;

String(n).padStart(2, "0"); // "07"
String(n).padEnd(3, ".");   // "7.."

Частые ошибки и нюансы

Строка и число с оператором +

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

"10" + 5; // "105"

Если нужно сложение, лучше явно привести к числу:

Number("10") + 5; // 15

Строки неизменяемы

Нельзя изменить символ по индексу:

const s = "hello";
s[0] = "H"; // не изменит строку

Нужно создавать новую строку, например через slice:

const s = "hello";
const result = "H" + s.slice(1);
result; // "Hello"

Быстрая памятка

  • Шаблонные строки: `Text ${value}`
  • Длина: str.length
  • Часть строки: slice
  • Поиск: includes, indexOf, startsWith, endsWith
  • Пробелы: trim
  • Замена: replace, replaceAll
  • Разбиение: split, сборка: join
  • Форматирование: padStart, padEnd

Короткий итог

Строки используются почти в любом коде - от форматирования сообщений до разбора данных. Шаблонные строки упрощают создание текста, а методы вроде trim, includes, replaceAll и split помогают быстро решать типовые задачи.