StudyCode
К практике
НачальныйJavaScriptстрокиstring
📝JuniorJavaScriptстрокиstringtemplate literalsметоды

Строки

Кавычки и шаблонные строки, escape-последовательности, главные методы.

JSСтроки в JavaScript

Три способа создать строку — все три работают одинаково, кроме шаблонных литералов

'одинарные кавычки'
const name = 'Иван';
const msg  = 'Привет, "мир"'; // двойные внутри — ок
"двойные кавычки"
const city = "Москва";
const msg  = "Привет, 'мир'"; // одинарные внутри — ок
`шаблонные литералы`особые
const user = "Иван";
const msg  = `Привет, ${user}!`; // вставка выражения
// Многострочные без \n:
const text = `Строка 1
Строка 2`;

Экранирование

\nперевод строки
\tтабуляция
\'одинарная кавычка
\"двойная кавычка
\\обратный слэш
\u0041Unicode символ (A)
Строки неизменяемы — нельзя изменить один символ: s[0] = "X" не сработает. Любой метод возвращает новую строку.
Язык примеров:
Шаг 1 из 2
1

Создание строк

Три вида кавычек

javascript
let s1 = "двойные — стандарт для большинства";
let s2 = 'одинарные — эквивалентны';
let s3 = `обратные — шаблонные строки (template literals)`;

// Внутри кавычек другого вида — без экранирования
let html = '<div class="name">Иван</div>';
let msg = "it's a good day";

Template literals (шаблонные строки)

javascript
const name = "Мария";
const age = 25;
const city = "Москва";

// Интерполяция выражений
const greeting = `Привет, ${name}!`;
const info = `Возраст: ${age}, через год: ${age + 1}`;

// Любое выражение внутри ${}
const badge = `[${age >= 18 ? "Взрослый" : "Несовершеннолетний"}]`;

// Многострочность
const multiline = `
  Город: ${city}
  Имя: ${name}
  Возраст: ${age}
`.trim();

// Тегированные шаблоны (продвинутые)
// html`<div>${name}</div>`  — библиотека lit-html

Escape-последовательности

javascript
"Новая\nстрока"    // \n — перевод строки
"Табуляция\tтут"  // \t — табуляция
"Кавычки: \"тут\"" // \" — кавычка внутри кавычек
"Обратный: \\"     // \\ — обратный слэш
"Unicode: \u{1F600}" // 😀

// Raw строки (без интерпретации escape):
String.raw`первая\nвторая`  // "первая\nвторая" (без переноса)

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

javascript
const str = "Привет";
str[0] = "п";     // ничего не произойдёт — строки immutable
str.toUpperCase(); // ПРИВЕТ — возвращает новую строку
console.log(str);  // "Привет" — оригинал не изменился
JavaScript
// Строки — основные операции

const s = "  Привет, Мир!  ";

// Длина
s.length          // 17

// Доступ к символам
s[0]              // " "
s.at(-1)          // " " (последний, ES2022)
s.at(-2)          // "!"

// Поиск
s.includes("Мир")        // true
s.startsWith("  П")      // true
s.endsWith("!  ")        // true
s.indexOf("Мир")         // 9 (индекс или -1)
s.lastIndexOf("и")       // 12

// Трансформация (возвращают новую строку)
s.trim()                 // "Привет, Мир!"
s.trimStart()            // "Привет, Мир!  "
s.toUpperCase()          // "  ПРИВЕТ, МИР!  "
s.toLowerCase()          // "  привет, мир!  "
s.replace("Мир", "JS")  // "  Привет, JS!  "
s.replaceAll("и", "И")  // заменить все вхождения

// Разбивка
"a,b,c".split(",")       // ["a", "b", "c"]
"hello".split("")        // ["h","e","l","l","o"]

// Объединение (лучше template literals или join)
["a", "b", "c"].join("-") // "a-b-c"

// Срез
s.slice(2, 8)            // "Привет"
s.slice(-7, -2)          // "Мир!!" (отрицательные от конца)

// Заполнение
"5".padStart(3, "0")     // "005"
"hi".padEnd(10, ".")     // "hi........"
"  ha  ".repeat(3)       // "  ha    ha    ha  "