Строки: методы и шаблонные литералы

Строки в JavaScript — неизменяемые (immutable) последовательности символов Unicode; все методы строк возвращают новые строки, не изменяя исходную; шаблонные литералы (template literals) упрощают интерполяцию и многострочный текст.

Зачем нужно

Строки — один из самых часто используемых типов данных. Знание встроенных методов позволяет избегать ручных циклов и регулярных выражений для простых задач. Шаблонные литералы делают конкатенацию читаемой и мощной.

Где используется

  • Форматирование данных для отображения
  • Разбор и обработка URL, пользовательского ввода
  • Генерация HTML-разметки
  • Работа с API (JSON, пути к файлам)

Шаблонные литералы (Template Literals)

const name = 'Иван';
const age  = 25;

// Интерполяция
const greeting = `Привет, ${name}! Тебе ${age} лет.`;

// Выражения внутри ${}
const price = 100;
const total = `Итого: ${price * 1.2} руб.`;
console.log(total); // 'Итого: 120 руб.'

// Многострочные строки
const html = `
  <div class="card">
    <h2>${name}</h2>
    <p>Возраст: ${age}</p>
  </div>
`;

// Условие внутри
const status = `Статус: ${age >= 18 ? 'совершеннолетний' : 'несовершеннолетний'}`;

// Вызов функции
const upper = `${name.toUpperCase()} — пользователь`;

Основные методы строк

const str = '  Привет, мир!  ';

// Длина
str.length; // 16

// Обрезка пробелов
str.trim();      // 'Привет, мир!'
str.trimStart(); // 'Привет, мир!  '
str.trimEnd();   // '  Привет, мир!'

// Регистр
'hello'.toUpperCase(); // 'HELLO'
'HELLO'.toLowerCase(); // 'hello'

// Поиск
const s = 'JavaScript — лучший';
s.includes('JavaScript');  // true
s.startsWith('Java');      // true
s.endsWith('лучший');      // true
s.indexOf('а');            // 1 (первое вхождение)
s.lastIndexOf('а');        // 3

// Извлечение
s.slice(0, 10);   // 'JavaScript' (начало, конец не включая)
s.slice(-7);      // 'лучший'
s.substring(0, 4); // 'Java'

// Разбивка / соединение
'a,b,c'.split(',');  // ['a', 'b', 'c']
['a', 'b'].join('-'); // 'a-b'

// Повтор и дополнение
'*'.repeat(5);           // '*****'
'7'.padStart(4, '0');    // '0007'
'hello'.padEnd(10, '.'); // 'hello.....'

// Замена
'foo foo'.replace('foo', 'bar');       // 'bar foo' (первое)
'foo foo'.replaceAll('foo', 'bar');    // 'bar bar'
'hello world'.replace(/\w+/g, w => w.toUpperCase()); // 'HELLO WORLD'

// at — ES2022, поддерживает отрицательные индексы
'hello'.at(0);  // 'h'
'hello'.at(-1); // 'o'

// charAt, charCodeAt
'ABC'.charCodeAt(0); // 65
String.fromCharCode(65); // 'A'

Строки и регулярные выражения

const text = 'Номер: +7-999-123-45-67';

// match — находит совпадения
text.match(/\d+/g); // ['7', '999', '123', '45', '67']

// matchAll — итератор всех совпадений с группами
const emailRegex = /(\w+)@(\w+)\.(\w+)/g;
const emails = [...'a@b.com c@d.org'.matchAll(emailRegex)];
emails[0][1]; // 'a' — первая группа

// search — индекс первого совпадения
'hello world'.search(/\w+/); // 0

// replace с функцией
'hello world'.replace(/\b\w/g, c => c.toUpperCase()); // 'Hello World'

Tagged Template Literals

function highlight(strings, ...values()) {
  return strings.reduce((result, str, i) => {
    const val = values[i] !== undefined
      ? `<strong>${values[i]}</strong>`
      : '';
    return result + str + val;
  }, '');
}

const user = 'Иван';
const role = 'admin';
const html = highlight`Пользователь ${user} имеет роль ${role}`;
// 'Пользователь <strong>Иван</strong> имеет роль <strong>admin</strong>'

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

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

const str = 'hello';
str[0] = 'H'; // молча игнорируется!
console.log(str); // 'hello'

// Правильно: создать новую строку
const newStr = 'H' + str.slice(1); // 'Hello'

2. Сравнение строк === чувствительно к регистру

'Hello' === 'hello'; // false
'Hello'.toLowerCase() === 'hello'; // true

// Для локализованного сравнения:
'ё'.localeCompare('е', 'ru'); // > 0 — ё после е в русском алфавите

3. Конкатенация с + в цикле (неэффективно)

// Плохо: O(n²) — каждый раз новая строка
let result = '';
for (let i = 0; i < 1000; i++) result += items[i];

// Хорошо: join
const result = items.join('');

Связанные темы

Ресурсы